Landing Pages

The MyST book-theme template provides out-of-the-box support for high-level landing-page blocks. By adding a small amount of annotation to your landing page, you can increase the approachability of your home page by composing it from visually-appealing blocks.

Defining a Block¶

The landing-page feature uses MyST Blocks to annotate sections of a page. Each landing-page block-type has a distinct kind that can be defined using the +++ block syntax as follows:

+++ {"kind": "justified"}

I am a\
Subtitle

### Justified

A CTA that is justified to the left. At smaller screen sizes, buttons and links are placed below the description, whilst for large displays they float to right of the heading.

{button}`Go to Wiki <https://wikipedia.org>`
[MyST](https://mystmd.org)

See Justified to see how this CTA is rendered.

There are a few special block-types supported out of the box:

split-image

A CTA consisting of a left-side image and a right-side call out with optional links and buttons.

justified

A CTA justified to the left of the screen with optional buttons and links aligned to the right.

centered

A CTA centered on the page. Where defined, buttons and links are placed below the content.

logo-cloud

A logo cloud section may be used to highlight prominent people, concepts, or projects. It adds a little sparkle to the existing Grids feature by centering and emboldening narrative text.

Each CTA supports a subtitle, title, and description, which must be defined in the following order:

I am a subtitle! \
I occur before the heading.

## I am a heading!

I am a description, I follow the heading.

Where a landing-page block supports links and buttons, these are pulled from anywhere in the block description, e.g.:

I am a subtitle! \
I occur before the heading.

## I am a heading!

I am a description, [I am a link!](https://wikipedia.org).
I follow the heading. {button}`I am a button <https://mystmd.org>`

Turning off elements on the landing page¶

It can be helpful to turn off the outline and table of contents on landing pages as well as hide the default title-block, this can be completed through the frontmatter block at the top of your index page:

---
title: Welcome to My Landing Page
site:
  hide_outline: true
  hide_toc: true
  hide_title_block: true
---

Examples¶

Subtitle

Split-Image¶

A helpful description in the body of the CTA.

MyST

Go to WikiMyST

Logo Cloud¶

Logo-clouds can focus on grid-like content.

Go to Wiki