Components

Overview

Components are reusable Nunjucks macros that help you build consistent UI elements. Import them from _components/index.njk.

{% from "_components/index.njk" import button, card, badge, authorCard %}

Button

Create styled buttons with various variants and sizes.

{{ button({ text: "Click Me", url: "/contact", variant: "primary" }) }}
{{ button({ text: "Learn More", variant: "secondary" }) }}
{{ button({ text: "Cancel", variant: "outline" }) }}
{{ button({ text: "Menu", variant: "ghost" }) }}

Button Variants

Variant	Description
`primary`	Orange background (default)
`secondary`	Light background
`outline`	Transparent with border
`ghost`	No background or border
`white`	White outline (for dark backgrounds)
`danger`	Black/dark variant

Button Sizes

Add size classes: xs, sm, md, lg, full

Card

Display content in a card format, perfect for blog posts or features.

{{ card({
  title: "Post Title",
  description: "Description text",
  image: "/path/to/image.jpg",
  url: "/post-url/",
  date: post.date,
  author: "John Doe"
}) }}

Badge

Display small labels or tags.

{{ badge({ text: "Featured", variant: "primary" }) }}
{{ badge({ text: "New", variant: "secondary" }) }}

Author Card

Display author information with avatar and bio.

{{ authorCard({
  name: "John Doe",
  bio: "Author bio text",
  avatar: "/path/to/avatar.jpg",
  url: "/authors/john-doe/"
}) }}