Each section on the landing page corresponds to a specific template with its own set of parameters for customisation. There are (currently) 4 templates.

heroheroA basic hero template with text and CTA buttons on the left and an image on the right. Traditionally the first section of a landing page.
feature gridgridA multi row, 3 column grid listing features. Each feature consists of an icon, title, and descriptive text.
image textimage + textA 2 column section with an image on the left (or the right) with some descriptive text, lists and a call-to-action button adjacent.
image compareimage comparisonUtilizes the image-compare-viewer library by Kyle Wetton to compare multiple before and after images. Includes an auto-generated tab to switch between image comparison sets.

Required data file parameters

For each enabled section defined in your data file (/data/landing.yaml), the following parameters are required:

  • Choose a unique name for each section array defined in the data file. e.g. myCoolHero for the section using the hero template.

  • weight - This key is nested under a section’s array title. It’s value defines where in the landing page the section should appear. Sections with lower values appear higher up on the rendered landing page.

  • template - This key defines the template the section should use.

Here’s an example of how the weight key (lines 4, 11, and 18 below) is used to configure the order in which sections on the landing page appear:

Section anchors

Each section defined in the landing.yaml configuration has an id auto-generated using the section name. So a section named appImageCompare can be linked using the anchor /#appImageCompare. This is useful for linking from one section to another on the landing page.


The hero template has 8 configurable components. The illustration below demonstrates a rendered layout of these components.

Lotus Docs Landing Page Hero Section Diagram

Configure the options illustrated above using your landing.yaml data configuration file:

Feature Grid

The feature grid template has 5 configurable components. The illustration below demonstrates a rendered layout of these components.

Lotus Docs Landing Page Feature Grid Section Diagram

Grid items wrap behaviour

The feature grid template arranges items into rows of 3 columns. Each group of extra items will wrap onto a new line:


Image Compare

The image compare template allows multiple image comparisons to be presented in a single section. Each pair or compared images are selected by tabs. The template has 5 configurable components. See the illustration below for a rendered layout of these components.

Lotus Docs Landing Page Image Compare Section Diagram

Configuration Options

Options for the each image compare are nested in the config array. Visit the image compare viewer website to learn more about these options.

  # landing.yaml
        - title: Dark Mode
          config: {
              startingPoint: 50,
              addCircle: true,
              addCircleBlur: false,
              showLabels: true,
              labelOptions: {
                before: 'Dark',
                after: 'Light',
                onHover: false
          imagePath: "images/screenshots"
          imageBefore: "lotusdocs_dark_v0.8.webp"
          imageAfter: "lotusdocs_light_v0.8.webp"

Image Text

The image text template consists of a 2 columns. One with and image and the other with a combination of a title, descriptive text, a list, and a call-to-action link. The image can be position either on the left or the right of the section.

Lotus Docs Landing Page Image Text Section Diagram

Last updated 20 Nov 2023, 22:57 UTC . history

Was this page helpful?