Components Reference

Components are section types that render styled HTML. Each has specific YAML fields.

View visual gallery → · Content Guide →

Full-width page opener with title, subtitle, body, and optional buttons.

YAML:

- id: "hero"
  type: "hero"
  title: "Page Title"
  subtitle: "Optional subtitle"
  body: "Intro paragraph text."
  buttons:
    - text: "Primary Button"
      href: "/page"
      variant: "primary"
    - text: "Outline Button"
      href: "/other"
      variant: "outline"

Fields:

Field	Type	Description
title	string	Main heading
subtitle	string	Optional tagline
body	string	Intro text (Markdown supported)
buttons	array	List of button objects

Button object:

Field	Type	Description
text	string	Button label
href	string	Link URL
variant	string	primary or outline

Responsive grid of feature cards.

YAML:

- id: "features"
  type: "features"
  title: "Features Title"
  cards:
    - title: "Card Title"
      body: "Card description text."
    - title: "Another Card"
      body: "More description here."

Fields:

Field	Type	Description
title	string	Section heading
cards	array	List of card objects

Card object:

Field	Type	Description
title	string	Card heading
body	string	Card content

Styled information boxes. Variants: info, tip, note.

YAML:

- id: "info"
  type: "callout"
  variant: "info"
  title: "Info Title"
  body: "Information text here."

- id: "tip"
  type: "callout"
  variant: "tip"
  title: "Pro Tip"
  body: "Helpful tip text."

- id: "note"
  type: "callout"
  variant: "note"
  title: "Note"
  body: "Note text."

Fields:

Field	Type	Description
variant	string	info, tip, or note
title	string	Optional title
body	string	Content text

Blockquote with optional attribution.

YAML:

- id: "quote"
  type: "pull-quote"
  quote: "The best way to predict the future is to invent it."
  attribution: "Alan Kay"

Fields:

Field	Type	Description
quote	string	Quote text
attribution	string	Optional citation

Reference to external sources (books, articles).

YAML:

- id: "cite"
  type: "citation"
  text: "Book Title"
  url: "https://example.com/book"
  publisher: "Publisher Name, 2024"

Fields:

Field	Type	Description
text	string	Title of work
url	string	Link to source
publisher	string	Publisher/author info

Prominent call-to-action banner with button.

YAML:

- id: "cta"
  type: "cta"
  title: "Get Started"
  body: "Join thousands of users building with lyt."
  button_text: "Sign Up Free"
  button_href: "/signup"

Fields:

Field	Type	Description
title	string	Heading text
body	string	Description text
button_text	string	Button label
button_href	string	Button link

Alert boxes. Variants: warning, error, info, success.

YAML:

- id: "warn"
  type: "warning"
  variant: "warning"
  title: "Warning Title"
  body: "Warning message text."

- id: "error"
  type: "warning"
  variant: "error"
  title: "Error"
  body: "Error message."

- id: "info"
  type: "warning"
  variant: "info"
  title: "Info"
  body: "Info message."

- id: "success"
  type: "warning"
  variant: "success"
  title: "Success"
  body: "Success message."

Fields:

Field	Type	Description
variant	string	warning, error, info, success
title	string	Alert title
body	string	Alert message

Syntax-highlighted code block with title and language label.

YAML:

- id: "example"
  type: "code-example"
  title: "filename.yaml"
  language: "yaml"
  code: |
    key: value
    nested:
      - item1
      - item2

Fields:

Field	Type	Description
title	string	Filename/title
language	string	Language for syntax highlighting
code	string	Code content (preserves whitespace)

See these components in action:

View Component Gallery →

The gallery shows rendered examples of all components.