Hero specimen

Give the page one unmistakable opening

A hero combines a focused promise, a short explanation, and no more than two next steps. Add one image when it advances the story.

Explore features Compare themes

- type: hero
  eyebrow: Hero specimen
  heading: Give the page one unmistakable opening
  markdown: A focused promise, a short explanation, and no more than two next steps.
  actions:
    - { label: Explore features, href: /features-facts/ }
    - { label: Compare themes, href: /themes/, style: secondary }

Strong emphasis closes the loop

Use the strong treatment when the page has earned a clear, high-priority request.

Take the primary step Choose another path

- type: call-to-action
  heading: Strong emphasis closes the loop
  markdown: Use this treatment for a high-priority request.
  actions:
    - { label: Take the primary step, href: "#strong-example" }
    - { label: Choose another path, href: /quotes-resources/, style: secondary }
  emphasis: strong

Subtle emphasis keeps the invitation open

Use the subtle treatment for a useful next step that should not overpower the surrounding material.

Read the source

- type: call-to-action
  heading: Subtle emphasis keeps the invitation open
  markdown: Use this for a useful next step that should not overpower the page.
  actions:
    - { label: Read the source, href: https://github.com/nopolabs/clodsite }
  emphasis: subtle