Components

Gallery

Visual showcase of all available lyt components. See how they look and grab the code.

About This Gallery

This page shows every component lyt supports. Each example is rendered live, with the YAML code displayed below.

For complete documentation, see the Component Reference →

For content basics, see the Content Guide →

Hero Section

Full-width opener

The hero component creates an impactful opening section with title, subtitle, body text, and optional buttons.

Primary Outline

yamlhero.yaml

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

Features Grid

Card One

A feature card with title and body.

Card Two

Cards arrange in a responsive grid.

Card Three

Three columns on desktop, fewer on mobile.

Card Four

Add as many cards as you need.

yamlfeatures.yaml

- id: "features"

∗

yamlcallout.yaml

# Variants: info, tip, note
- id: "callout"
  type: "callout"
  variant: "info"
  title: "Title"
  body: "Content."

The best way to predict the future is to invent it.

Alan Kay

Simplicity is the ultimate sophistication.

yamlpull-quote.yaml

# With attribution
- id: "quote"
  type: "pull-quote"
  quote: "Quote text."
  attribution: "Author"

# Without attribution
- id: "quote2"
  type: "pull-quote"
  quote: "Another quote."

The Pragmatic ProgrammerAddison-Wesley, 2019

yamlcitation.yaml

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

Call to Action

Encourage users to take action with a styled CTA section.

Get Started

yamlcta.yaml

- id: "cta"
  type: "cta"
  title: "Title"
  body: "Description."
  button_text: "Button"
  button_href: "/link"

⚠

Default Warning

This is a default warning message.

Warning

Proceed with caution.

Error

Something went wrong.

Info

Good to know.

Success

Everything went well.

yamlwarning.yaml

# Variants: default, warning, error, info, success
- id: "warn"
  type: "warning"
  variant: "warning"
  title: "Warning"
  body: "Message."

gomain.go

package main

import "fmt"

func main() {
    fmt.Println("Hello, lyt!")
}

yamlconfig.yaml

meta:
  title: My Site

sections:
  - type: hero
    title: Welcome

yamlcode-example.yaml

- id: "code"
  type: "code-example"
  title: "filename.go"
  language: "go"
  code: |
    func main() {}

Full Reference

See the complete component documentation for all fields and options.

Component Reference