The hero component displays a large title and description for your page, with an optional large illustrative image or video. Perfect for home pages and landing pages.
Basic Usage
SELECT 'hero' AS component,
'Welcome' AS title,
'This is a simple site built with SQLPage.' AS description;
Top-Level Properties
The title of your page, shown in very large characters at the top
Description displayed below the title in smaller, greyed-out text
Description in Markdown format with rich text formatting
URL of an image to display next to the page title
URL of a video to display next to the page title
Creates a large “call to action” button below the description
Text to display in the call to action button (default: “Go”)
URL of the image to display before the video starts (video only)
Hide video controls and autoplay the video
Automatically start playing the video
Loop the video continuously
Reverse the layout: image on the left, text on the right
Feature Section Properties
After the main hero section, you can add feature highlights with these properties:
Name of the feature section
Description of the feature
Description in Markdown format
URL to navigate to when the feature title is clicked
Examples
Simple Hero
SELECT 'hero' AS component,
'Welcome' AS title,
'This is a very simple site built with SQLPage.' AS description;
Hero with Image and Call to Action
SELECT 'hero' AS component,
'SQLPage' AS title,
'Documentation for the *SQLPage* low-code web 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;
Hero with Feature Sections
SELECT 'hero' AS component,
'SQLPage' AS title,
'Build websites with SQL' AS description,
'https://example.com/hero.jpg' AS image,
'/' AS link,
'Get Started' AS link_text;
-- Feature 1
SELECT
'Fast' AS title,
'Pages load instantly, even on slow mobile networks.' AS description,
'car' AS icon,
'red' AS color,
'/' AS link;
-- Feature 2
SELECT
'Beautiful' AS title,
'Uses pre-defined components that look professional.' AS description,
'eye' AS icon,
'green' AS color,
'/' AS link;
-- Feature 3
SELECT
'Easy' AS title,
'You can teach yourself SQL in a weekend.' AS description_md,
'sofa' AS icon,
'blue' AS color,
'/' AS link;
Hero with Video
SELECT 'hero' AS component,
'Databases' AS title,
true AS reverse,
'# "The goal is to turn data into information"' AS description_md,
'https://example.com/poster.jpg' AS poster,
'/sqlpage_intro.webm' AS video;
Hero with Video (Autoplay, No Controls)
SELECT 'hero' AS component,
'Welcome to Our Platform' AS title,
'Experience the future of web development' AS description,
'/background.mp4' AS video,
true AS nocontrols,
true AS muted,
true AS loop;
Notes
The hero component is designed to be the first component on your page to make a strong visual impact.
Feature sections below the hero automatically display in a 3-column responsive grid.
When using nocontrols with video, the video must be muted to comply with browser autoplay policies.
Use high-quality images (at least 1200px wide) for the best visual impact on large screens.