Skip to main content
The hero sliders schema defines the structure for carousel slides displayed in hero sections, supporting responsive images and call-to-action elements.

​
Schema Overview

The hero sliders data is structured as an array of slide objects, each containing image sources, text content, and optional CTA configuration.

​
Slide Object Fields

​
id
number
required
Unique identifier for the slideExample: 1
​
srcDesktop
string
required
URL or path to the desktop version of the hero image (recommended: 1920x1080)Example: "https://picsum.photos/id/1/1920/1080"
​
srcMobile
string
required
URL or path to the mobile version of the hero image (recommended: 1080x1920)Example: "https://picsum.photos/id/1/1080/1920"
​
alt
string
required
Alternative text for the image (accessibility and SEO)Example: "BoillerPlate"
​
overline
string
Small text displayed above the main headline (typically for category or context)Example: "Astro Project Boillerplate"
​
headline
string
required
Main headline or title text for the slideExample: "BoillerPlate V1"
​
byline
string
Descriptive text or subtitle displayed below the headlineExample: "A simple and clean boilerplate for Astro"
​
ctaLabel
string
Label text for the call-to-action buttonExample: "Call to action"
​
ctaLink
string
URL or anchor link for the call-to-action buttonExample: "#" or "/contact"

​
Usage Notes

​
Image Specifications

  • Desktop images: Recommended aspect ratio 16:9 (e.g., 1920x1080)
  • Mobile images: Recommended aspect ratio 9:16 (e.g., 1080x1920)
  • Images should be optimized for web performance
  • Support for external URLs and local paths

​
Text Content

The text hierarchy for each slide:
  1. Overline - Optional contextual text
  2. Headline - Main title (required)
  3. Byline - Supporting description
  4. CTA - Call-to-action button

​
Call-to-Action

Both ctaLabel and ctaLink should be provided together. If you want to hide the CTA button, omit both fields or set them to empty strings.

​
Example JSON

​
Single Slide

{
  "id": 1,
  "srcDesktop": "https://picsum.photos/id/1/1920/1080",
  "srcMobile": "https://picsum.photos/id/1/1080/1920",
  "alt": "BoillerPlate",
  "overline": "Astro Project Boillerplate",
  "headline": "BoillerPlate V1",
  "byline": "A simple and clean boilerplate for Astro",
  "ctaLabel": "Call to action",
  "ctaLink": "#"
}

​
Complete Array

[
  {
    "id": 1,
    "srcDesktop": "https://picsum.photos/id/1/1920/1080",
    "srcMobile": "https://picsum.photos/id/1/1080/1920",
    "alt": "BoillerPlate",
    "overline": "Astro Project Boillerplate",
    "headline": "BoillerPlate V1",
    "byline": "A simple and clean boilerplate for Astro",
    "ctaLabel": "Call to action",
    "ctaLink": "#"
  },
  {
    "id": 2,
    "srcDesktop": "https://picsum.photos/id/2/1920/1080",
    "srcMobile": "https://picsum.photos/id/2/1080/1920",
    "alt": "BoillerPlate",
    "overline": "Astro Project Boillerplate",
    "headline": "BoillerPlate V2",
    "byline": "A simple and clean boilerplate for Astro",
    "ctaLabel": "Call to action",
    "ctaLink": "#"
  }
]

​
Implementation

This schema is used by the hero slider component to render responsive carousel slides. The component automatically:
  • Switches between desktop and mobile images based on viewport
  • Displays text content with proper hierarchy
  • Renders CTA buttons when provided
  • Handles slide navigation and transitions

Build docs developers (and LLMs) love

Get started for freeTalk to us