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
autoplay
Automatically start playing the video
description
A description of the page. Displayed below the title, in smaller characters and slightly greyed out.
description_md
A description of the page. Displayed below the title, in smaller characters and slightly greyed out - formatted using markdown.
id
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
The URL of an image to display next to the page title.
link
Creates a large "call to action" button below the description, linking to the specified URL.
link_text
The text to display in the call to action button. Defaults to "Go".
loop
Loop the video
muted
Mute the video
nocontrols
Hide the video controls (play, pause, volume, etc.), and autoplay the video.
poster
URL of the image to be displayed before the video starts. Ignored if no video is present.
reverse
Reverse the order of the image and text: the image will be on the left, and the text on the right.
title
The title of your page. Will be shown in very large characters at the top.
video
The URL of a video to display next to the page title.
Row-level parameters
description
Description of the feature section.
description_md
Description of the feature section - formatted using markdown.
icon
Icon of the feature section.
link
An URL to which the user should be taken when they click on the section title.
title
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.datapage.app) in a weekend.' as description_md,
'sofa' as icon,
'blue' as color,
'/' as link;Result
Fast
Pages load instantly, even on slow mobile networks.
Beautiful
Uses pre-defined components that look professional.
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;