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 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
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;