The hero component

Display a large title and description for your page, with an optional large illustrative image. Useful in your home page, for instance.

Top-level parameters

name required type description
autoplay

BOOLEAN

Automatically start playing the video
description

TEXT

A description of the page. Displayed below the title, in smaller characters and slightly greyed out.
description_md

TEXT

A description of the page. Displayed below the title, in smaller characters and slightly greyed out - formatted using markdown.
id

TEXT

id attribute added to the container in HTML. It can be used to target this item through css or for scrolling to this item through links (use "#id" in link url).
image

URL

The URL of an image to display next to the page title.
link

URL

Creates a large "call to action" button below the description, linking to the specified URL.
link_text

TEXT

The text to display in the call to action button. Defaults to "Go".
loop

BOOLEAN

Loop the video
muted

BOOLEAN

Mute the video
nocontrols

BOOLEAN

Hide the video controls (play, pause, volume, etc.), and autoplay the video.
poster

URL

URL of the image to be displayed before the video starts. Ignored if no video is present.
reverse

BOOLEAN

Reverse the order of the image and text: the image will be on the left, and the text on the right.
title

TEXT

The title of your page. Will be shown in very large characters at the top.
video

URL

The URL of a video to display next to the page title.

Row-level parameters

name required type description
description

TEXT

Description of the feature section.
description_md

TEXT

Description of the feature section - formatted using markdown.
icon

ICON

Icon of the feature section.
link

TEXT

An URL to which the user should be taken when they click on the section title.
title

TEXT

The name of a single feature section highlighted by this hero.

Example 1

The simplest possible hero section

select 
    'hero'    as component,
    'Welcome' as title,
    'This is a very simple site built with SQLPage.' as description;

Result

Welcome

This is a very simple site built with SQLPage.

Example 2

A hero with a background image.

select 
    'hero'                 as component,
    'SQLPage'              as title,
    'Documentation for the *SQLPage* low-code web application framework.' as description_md,
    'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Lac_de_Zoug.jpg/640px-Lac_de_Zoug.jpg' as image,
    '/documentation.sql'   as link,
    'Read Documentation !' as link_text;
select 
    'Fast' as title,
    'Pages load instantly, even on slow mobile networks.' as description,
    'car'  as icon,
    'red'  as color,
    '/'    as link;
select 
    'Beautiful' as title,
    'Uses pre-defined components that look professional.' as description,
    'eye'       as icon,
    'green'     as color,
    '/'         as link;
select 
    'Easy' as title,
    'You can teach yourself enough SQL to use [**SQLPage**](https://sql-page.com) in a weekend.' as description_md,
    'sofa' as icon,
    'blue' as color,
    '/'    as link;

Result

SQLPage

Documentation for the SQLPage low-code web application framework.

Read Documentation !
SQLPage

Fast

Pages load instantly, even on slow mobile networks.

Beautiful

Uses pre-defined components that look professional.

Easy

You can teach yourself enough SQL to use SQLPage in a weekend.

Example 3

A hero with a video

select 
    'hero'      as component,
    'Databases' as title,
    TRUE        as reverse,
    '# “The goal is to turn data into information, and information into insight.”' as description_md,
    'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Lac_de_Zoug.jpg/640px-Lac_de_Zoug.jpg' as poster,
    '/sqlpage_introduction_video.webm' as video;

Result

Databases

“The goal is to turn data into information, and information into insight.”


See also: other components