---
title: "Shortcode Reference"
url: "https://bravr.ai/shortcodes"
---

# Shortcode Reference

Embed components anywhere in page content using HTML comment shortcodes. Works for both humans and AI — paste any example below into the WordPress content editor.

`@cta`

Call-to-action banner. Three visual styles across five brand gradients.

## Ready to start?

Let us help you move fast.

[Get in touch](/contact/)

Example

```
<!-- @cta heading="Ready to start?" description="Let us help you move fast." buttontext="Get in touch" buttonurl="/contact/" style="gradient" theme="warm" -->
```

Attribute

Required

Values

Description

`heading`

✓

—

Main heading text

`description`

—

—

Supporting paragraph

`buttontext`

—

—

Button label

`buttonurl`

—

—

Button destination URL

`style`

—

card | gradient | minimal

Visual style

`theme`

—

warm | rose | cool | teal | purple

Brand gradient

`@cards2`

Two-column card grid with optional section heading. Use card1-title / card1-description / card1-icon / card1-button-text / card1-button-url (and card2-…). Compact aliases t1/d1/i1/bt1/bu1 also accepted. Add wrap="1" for single column.

## How we help

⚡

### Speed

Ship in days not months.

🏆

### Quality

Built to last.

Example

```
<!-- @cards2 heading="How we help" style="icon" theme="cool" wrap="2"
  card1-title="Speed" card1-description="Ship in days not months." card1-icon="⚡"
  card2-title="Quality" card2-description="Built to last." card2-icon="🏆" -->
```

Attribute

Required

Values

Description

`heading`

—

—

Section heading

`subheading`

—

—

Section subheading

`style`

—

card | gradient | minimal | icon | metric | numbered | list

—

`theme`

—

warm | rose | cool | teal | purple

—

`wrap`

—

1 | 2

Number of columns before wrapping

`card1-title`

✓

—

Card 1 title

`card1-description`

—

—

Card 1 content

`card1-icon`

—

—

Card 1 icon (emoji)

`card1-button-text`

—

—

Card 1 button label

`card1-button-url`

—

—

Card 1 button URL

`card2-title`

✓

—

Card 2 title

`card2-description`

—

—

Card 2 content

`card2-icon`

—

—

Card 2 icon (emoji)

`card2-button-text`

—

—

Card 2 button label

`card2-button-url`

—

—

Card 2 button URL

`@cards3`

Three-column card grid. Use card1-title / card1-description / card1-icon (and card2-… card3-…). Compact aliases t1/d1/i1 also accepted. Add wrap="1" for single column, wrap="2" for 2 columns.

## The Problem

### Burnout

Teams waste 20+ hours on manual work.

### Costs

Processes demand more headcount.

### Errors

Fatigue leads to costly mistakes.

Example

```
<!-- @cards3 heading="The Problem" style="card" theme="rose" wrap="2"
  card1-title="Burnout" card1-description="Teams waste 20+ hours on manual work." card1-icon="🔄"
  card2-title="Costs" card2-description="Processes demand more headcount." card2-icon="💸"
  card3-title="Errors" card3-description="Fatigue leads to costly mistakes." card3-icon="🚨" -->
```

Attribute

Required

Values

Description

`heading`

—

—

Section heading

`subheading`

—

—

Section subheading

`style`

—

card | gradient | minimal | icon | metric | numbered | list

—

`theme`

—

warm | rose | cool | teal | purple

—

`wrap`

—

1 | 2 | 3

Number of columns before wrapping

`card1-title`

✓

—

—

`card1-description`

—

—

—

`card1-icon`

—

—

—

`card1-button-text`

—

—

—

`card1-button-url`

—

—

—

`card2-title`

✓

—

—

`card2-description`

—

—

—

`card2-icon`

—

—

—

`card2-button-text`

—

—

—

`card2-button-url`

—

—

—

`card3-title`

✓

—

—

`card3-description`

—

—

—

`card3-icon`

—

—

—

`card3-button-text`

—

—

—

`card3-button-url`

—

—

—

`@cards4`

Four-column card grid. Great for metrics, steps, or feature lists. Use card1-title / card1-description (and card2-… card4-…). Compact aliases t1/d1 also accepted.

## Results

40%

Reduction in manual work

95%

Automation success rate

50%

Ticket volume reduction

3x

ROI within 6 months

Example

```
<!-- @cards4 heading="Results" style="metric" theme="warm"
  card1-title="40%" card1-description="Reduction in manual work"
  card2-title="95%" card2-description="Automation success rate"
  card3-title="50%" card3-description="Ticket volume reduction"
  card4-title="3x" card4-description="ROI within 6 months" -->
```

Attribute

Required

Values

Description

`heading`

—

—

Section heading

`subheading`

—

—

Section subheading

`style`

—

card | gradient | minimal | icon | metric | numbered | list

—

`theme`

—

warm | rose | cool | teal | purple

—

`card1-title`

✓

—

—

`card1-description`

—

—

—

`card1-icon`

—

—

—

`card1-button-text`

—

—

—

`card1-button-url`

—

—

—

`card2-title`

✓

—

—

`card2-description`

—

—

—

`card2-icon`

—

—

—

`card2-button-text`

—

—

—

`card2-button-url`

—

—

—

`card3-title`

✓

—

—

`card3-description`

—

—

—

`card3-icon`

—

—

—

`card3-button-text`

—

—

—

`card3-button-url`

—

—

—

`card4-title`

✓

—

—

`card4-description`

—

—

—

`card4-icon`

—

—

—

`card4-button-text`

—

—

—

`card4-button-url`

—

—

—

`@steps`

Numbered process steps with cycling gradient circles. Up to 4 steps. Use step1-title / step1-description (and step2-… step4-…). Compact aliases t1/d1 also accepted. Add wrap="1" for single column, wrap="2" for 2x2 grid, wrap="3" for 3-across.

## Our Approach

1

### Discovery

We analyse your workflows.

2

### Design

We map the solution.

3

### Build

We deliver fast.

4

### Optimise

We improve over time.

Example

```
<!-- @steps heading="Our Approach" theme="cool" wrap="2"
  step1-title="Discovery" step1-description="We analyse your workflows."
  step2-title="Design" step2-description="We map the solution."
  step3-title="Build" step3-description="We deliver fast."
  step4-title="Optimise" step4-description="We improve over time." -->
```

Attribute

Required

Values

Description

`heading`

—

—

Section heading

`theme`

—

warm | rose | cool | teal | purple

—

`wrap`

—

1 | 2 | 3 | 4

Number of columns before wrapping

`step1-title`

✓

—

—

`step1-description`

—

—

—

`step2-title`

✓

—

—

`step2-description`

—

—

—

`step3-title`

—

—

—

`step3-description`

—

—

—

`step4-title`

—

—

—

`step4-description`

—

—

—

`@metrics`

Row of large stat numbers with labels. Up to 4 metrics. Use metric1-value / metric1-label (and metric2-… metric4-…). Compact aliases t1/d1 also accepted.

## Outcomes

40%

Less manual work

95%

Automation rate

3x

ROI in 6 months

50%

Fewer support tickets

Example

```
<!-- @metrics heading="Outcomes" theme="warm"
  metric1-value="40%" metric1-label="Less manual work"
  metric2-value="95%" metric2-label="Automation rate"
  metric3-value="3x" metric3-label="ROI in 6 months"
  metric4-value="50%" metric4-label="Fewer support tickets" -->
```

Attribute

Required

Values

Description

`heading`

—

—

Section heading

`theme`

—

warm | rose | cool | teal | purple

—

`metric1-value`

✓

—

Stat value e.g. 40%

`metric1-label`

—

—

Stat label

`metric2-value`

—

—

—

`metric2-label`

—

—

—

`metric3-value`

—

—

—

`metric3-label`

—

—

—

`metric4-value`

—

—

—

`metric4-label`

—

—

—

`@quote`

A pull-quote with colored left border and optional attribution. Supports theme colors and custom icons.

⚡

The companies that adapt now will be the sources AI learns to trust. Those that wait will watch their traffic drain away as AI systems cite their competitors instead.

Example

```
<!-- @quote content="The companies that adapt now will be the sources AI learns to trust. Those that wait will watch their traffic drain away as AI systems cite their competitors instead." theme="warm" icon="⚡" -->
```

Attribute

Required

Values

Description

`content`

✓

—

The quote text

`theme`

—

warm | rose | cool | teal | purple

Brand color theme

`icon`

—

default: ⚡

Icon or emoji (default: ⚡)

`cite`

—

—

Person name

`role`

—

—

Person role / company

`image`

—

—

Avatar image URL

`@faq`

Accordion FAQ. Up to 6 question/answer pairs. Use question1 / answer1 (and question2-… question6-…). Compact aliases q1/a1 also accepted.

## Common Questions

What is AI automation?

AI automation uses software agents...

How long does it take?

Most projects launch within 4 weeks.

Example

```
<!-- @faq heading="Common Questions"
  question1="What is AI automation?" answer1="AI automation uses software agents..."
  question2="How long does it take?" answer2="Most projects launch within 4 weeks." -->
```

Attribute

Required

Values

Description

`heading`

—

—

Section heading

`question1`

✓

—

—

`answer1`

✓

—

—

`question2`

—

—

—

`answer2`

—

—

—

`question3`

—

—

—

`answer3`

—

—

—

`question4`

—

—

—

`answer4`

—

—

—

`question5`

—

—

—

`answer5`

—

—

—

`question6`

—

—

—

`answer6`

—

—

—

`@testimonials`

Grid of short testimonial quotes with social handles. Up to 10. Use quote1 / handle1 (and quote2-… quote10-…). Compact aliases q1/h1 also accepted.

## What clients say

> Transformed our operations completely.
> 
> @@ceo\_acme

> Best investment we made this year.
> 
> @@founder\_xyz

Example

```
<!-- @testimonials heading="What clients say"
  quote1="Transformed our operations completely." handle1="@ceo_acme"
  quote2="Best investment we made this year." handle2="@founder_xyz" -->
```

Attribute

Required

Values

Description

`heading`

—

—

Section heading

`quote1`

✓

—

Quote text

`handle1`

✓

—

Social handle e.g. @name

`quote2`

—

—

—

`handle2`

—

—

—

`quote3`

—

—

—

`handle3`

—

—

—

`quote4`

—

—

—

`handle4`

—

—

—

`quote5`

—

—

—

`handle5`

—

—

—

`quote6`

—

—

—

`handle6`

—

—

—

`quote7`

—

—

—

`handle7`

—

—

—

`quote8`

—

—

—

`handle8`

—

—

—

`quote9`

—

—

—

`handle9`

—

—

—

`quote10`

—

—

—

`handle10`

—

—

—

`@hero`

Full-screen hero section with Three.js animated background. Displays main title, subtitle, and supporting content.

# We are bravr

## Digital Consultancy & AI Solutions

### Driven by creativity, collaboration, and excellence, Bravr AI harnesses the power of AI to provide real solutions to real problems.

Example

```
<!-- @hero title="We are bravr" subtitle="Digital Consultancy &amp; AI Solutions" content="Driven by creativity, collaboration, and excellence, Bravr AI harnesses the power of AI to provide real solutions to real problems." -->
```

Attribute

Required

Values

Description

`title`

✓

—

Main H1 heading (supports HTML)

`subtitle`

—

—

H2 subheading (supports HTML)

`content`

—

—

H3 content text (supports HTML)

`@services`

Carousel of service cards with background images. Slides horizontally with prev/next navigation.

## Our services

![](/content-images/blackspike-wallpaper-01.avif)

## We create timeless visual identities for modern brands.

**Great companies are built on their ability to adapt and grow.** We create brands that will adapt and flourish no matter where the market takes you.

[Call us about branding](/contact/)

![](/content-images/blackspike-wallpaper-02.avif)

## We design websites that drive conversions and delight users.

**Experts in imagining future interfaces and experiences.** From UX to creative to analytics, we are there every step of the way.

[Book a website review call](/contact/)

Example

```
<!-- @services title="Our services"
  service1-title="We create timeless visual identities for modern brands." service1-content="&lt;strong&gt;Great companies are built on their ability to adapt and grow.&lt;/strong&gt; We create brands that will adapt and flourish no matter where the market takes you." service1-cta="Call us about branding" service1-image="/content-images/blackspike-wallpaper-01.avif"
  service2-title="We design websites that drive conversions and delight users." service2-content="&lt;strong&gt;Experts in imagining future interfaces and experiences.&lt;/strong&gt; From UX to creative to analytics, we are there every step of the way." service2-cta="Book a website review call" service2-image="/content-images/blackspike-wallpaper-02.avif" -->
```

Attribute

Required

Values

Description

`title`

—

—

Section heading

`subtitle`

—

—

Subtitle text beneath the heading (HTML supported)

`align`

—

left | center

Title/subtitle alignment

`service1-title`

✓

—

Service card title

`service1-content`

✓

—

Service card content (HTML supported)

`service1-cta`

✓

—

CTA button text

`service1-link`

—

default: /contact/

CTA button URL

`service1-image`

✓

—

Background image path

`service2-title`

—

—

—

`service2-content`

—

—

—

`service2-cta`

—

—

—

`service2-link`

—

—

—

`service2-image`

—

—

—

`service3-title`

—

—

—

`service3-content`

—

—

—

`service3-cta`

—

—

—

`service3-link`

—

—

—

`service3-image`

—

—

—

`service4-title`

—

—

—

`service4-content`

—

—

—

`service4-cta`

—

—

—

`service4-link`

—

—

—

`service4-image`

—

—

—

`service5-title`

—

—

—

`service5-content`

—

—

—

`service5-cta`

—

—

—

`service5-link`

—

—

—

`service5-image`

—

—

—

`@services-glow`

Grid of service cards with interactive glow spotlight effect. Cards respond to mouse movement with a dynamic highlight. Great for modern, interactive service showcases.

## What we do

Every service we offer started with a real problem we solved.

### Automate

We build intelligent workflows that handle the repetitive work, so your team can focus on the things that actually need a human.

[

Learn More

](/what-we-do/automate/)

[

Learn More

](/what-we-do/automate/)

### Chat

We build chatbots that actually do things. Search your data, manage your admin, trigger real actions across your systems.

[

Learn More

](/what-we-do/chat/)

[

Learn More

](/what-we-do/chat/)

Example

```
<!-- @services-glow title="What we do" align="left" subtitle="Every service we offer started with a real problem we solved."
  service1-title="Automate" service1-content="We build intelligent workflows that handle the repetitive work, so your team can focus on the things that actually need a human." service1-cta="Learn More" service1-link="/what-we-do/automate/" service1-image="/images/service-01.jpg"
  service2-title="Chat" service2-content="We build chatbots that actually do things. Search your data, manage your admin, trigger real actions across your systems." service2-cta="Learn More" service2-link="/what-we-do/chat/" service2-image="/images/service-02.jpg" -->
```

Attribute

Required

Values

Description

`title`

—

—

Section heading

`subtitle`

—

—

Subtitle text beneath the heading (HTML supported)

`align`

—

left | center

Title/subtitle alignment

`service1-title`

✓

—

Service card title

`service1-content`

✓

—

Service card content (HTML supported)

`service1-cta`

✓

—

CTA button text

`service1-link`

—

default: /contact/

CTA button URL

`service1-image`

✓

—

Card background image path

`service2-title`

—

—

—

`service2-content`

—

—

—

`service2-cta`

—

—

—

`service2-link`

—

—

—

`service2-image`

—

—

—

`service3-title`

—

—

—

`service3-content`

—

—

—

`service3-cta`

—

—

—

`service3-link`

—

—

—

`service3-image`

—

—

—

`service4-title`

—

—

—

`service4-content`

—

—

—

`service4-cta`

—

—

—

`service4-link`

—

—

—

`service4-image`

—

—

—

`service5-title`

—

—

—

`service5-content`

—

—

—

`service5-cta`

—

—

—

`service5-link`

—

—

—

`service5-image`

—

—

—

`@clients`

Grid of client logos with hover animations. Displays 2-5 columns responsively.

## Trusted by some great companies

 [![Clamaane](/content-images/logo-01.svg)](https://example.com)[![Komplex](/content-images/logo-02.svg)](https://example.com)

Example

```
<!-- @clients title="Trusted by some great companies"
  client1-title="Clamaane" client1-image="/content-images/logo-01.svg" client1-link="https://example.com"
  client2-title="Komplex" client2-image="/content-images/logo-02.svg" client2-link="https://example.com" -->
```

Attribute

Required

Values

Description

`title`

—

—

Section heading

`subtitle`

—

—

Subtitle text beneath the heading (HTML supported)

`client1-title`

✓

—

Client name

`client1-image`

✓

—

Logo image path

`client1-link`

✓

—

Client website URL

`client2-title`

—

—

—

`client2-image`

—

—

—

`client2-link`

—

—

—

`client3-title`

—

—

—

`client3-image`

—

—

—

`client3-link`

—

—

—

`client4-title`

—

—

—

`client4-image`

—

—

—

`client4-link`

—

—

—

`client5-title`

—

—

—

`client5-image`

—

—

—

`client5-link`

—

—

—

`client6-title`

—

—

—

`client6-image`

—

—

—

`client6-link`

—

—

—

`client7-title`

—

—

—

`client7-image`

—

—

—

`client7-link`

—

—

—

`client8-title`

—

—

—

`client8-image`

—

—

—

`client8-link`

—

—

—

`client9-title`

—

—

—

`client9-image`

—

—

—

`client9-link`

—

—

—

`client10-title`

—

—

—

`client10-image`

—

—

—

`client10-link`

—

—

—

`@pull-quote`

A large pull quote with avatar, name and role. Different from @quote which is for testimonials.

> This **design agency** is a **game changer**.
> 
> ![](/content-images/quote-man.avif)
> 
> Sean Higgins CTO, Interia

Example

```
<!-- @pull-quote content="This &lt;strong&gt;design agency&lt;/strong&gt; is a &lt;strong&gt;game changer&lt;/strong&gt;." cite="Sean Higgins" role="CTO, Interia" image="/content-images/quote-man.avif" -->
```

Attribute

Required

Values

Description

`content`

✓

—

The quote text (supports HTML)

`cite`

—

—

Person name

`role`

—

—

Person role / company

`image`

—

—

Avatar image URL

`@case-studies`

Case studies showcase with one large featured study and subsequent ones in a grid (up to 10 total).

## Case studies

Web design

## Powering Growth. Simplifying Success.

**Our custom web design solution helped Biotechlet Ltd elevate its digital presence.**

Visit spike.news

Development

## Accelerating Innovation.

Our dynamic design and build simplified productivity.

Visit pixelate.pictures

3D Design

## Enhance productivity.

Create, collaborate, and render.

Visit brighton.dog

Example

```
<!-- @case-studies title="Case studies"
  case-study1-title="Powering Growth. Simplifying Success." case-study1-sector="Web design" case-study1-content="&lt;strong&gt;Our custom web design solution helped Biotechlet Ltd elevate its digital presence.&lt;/strong&gt;" case-study1-cta="Visit spike.news" case-study1-image="/content-images/spike.news.avif" case-study1-bg="bg-gradient-to-r from-indigo-500 to-purple-600"
  case-study2-title="Accelerating Innovation." case-study2-sector="Development" case-study2-content="Our dynamic design and build simplified productivity." case-study2-cta="Visit pixelate.pictures" case-study2-image="/content-images/pixelate.pictures.avif" case-study2-bg="bg-gradient-to-r from-fuchsia-500 to-cyan-500"
  case-study3-title="Enhance productivity." case-study3-sector="3D Design" case-study3-content="Create, collaborate, and render." case-study3-cta="Visit brighton.dog" case-study3-image="/content-images/brighton.dog.avif" case-study3-bg="bg-gradient-to-r from-pink-500 to-yellow-500" -->
```

Attribute

Required

Values

Description

`title`

—

—

Section heading

`subtitle`

—

—

Subtitle text beneath the heading (HTML supported)

`align`

—

left | center

Title/subtitle alignment

`case-study1-title`

✓

—

Featured case study title

`case-study1-sector`

✓

—

Industry sector

`case-study1-content`

✓

—

Case study description (HTML supported)

`case-study1-cta`

✓

—

CTA button text

`case-study1-link`

✓

—

URL for the case study

`case-study1-image`

✓

—

Case study image path

`case-study1-theme`

—

warm | rose | cool | teal | purple

Brand gradient theme

`case-study2-title`

—

—

—

`case-study2-sector`

—

—

—

`case-study2-content`

—

—

—

`case-study2-cta`

—

—

—

`case-study2-link`

—

—

—

`case-study2-image`

—

—

—

`case-study2-theme`

—

—

—

`case-study3-title`

—

—

—

`case-study3-sector`

—

—

—

`case-study3-content`

—

—

—

`case-study3-cta`

—

—

—

`case-study3-link`

—

—

—

`case-study3-image`

—

—

—

`case-study3-theme`

—

—

—

`case-study4-title`

—

—

—

`case-study4-sector`

—

—

—

`case-study4-content`

—

—

—

`case-study4-cta`

—

—

—

`case-study4-link`

—

—

—

`case-study4-image`

—

—

—

`case-study4-theme`

—

—

—

`case-study5-title`

—

—

—

`case-study5-sector`

—

—

—

`case-study5-content`

—

—

—

`case-study5-cta`

—

—

—

`case-study5-link`

—

—

—

`case-study5-image`

—

—

—

`case-study5-theme`

—

—

—

`case-study6-title`

—

—

—

`case-study6-sector`

—

—

—

`case-study6-content`

—

—

—

`case-study6-cta`

—

—

—

`case-study6-link`

—

—

—

`case-study6-image`

—

—

—

`case-study6-theme`

—

—

—

`case-study7-title`

—

—

—

`case-study7-sector`

—

—

—

`case-study7-content`

—

—

—

`case-study7-cta`

—

—

—

`case-study7-link`

—

—

—

`case-study7-image`

—

—

—

`case-study7-theme`

—

—

—

`case-study8-title`

—

—

—

`case-study8-sector`

—

—

—

`case-study8-content`

—

—

—

`case-study8-cta`

—

—

—

`case-study8-link`

—

—

—

`case-study8-image`

—

—

—

`case-study8-theme`

—

—

—

`case-study9-title`

—

—

—

`case-study9-sector`

—

—

—

`case-study9-content`

—

—

—

`case-study9-cta`

—

—

—

`case-study9-link`

—

—

—

`case-study9-image`

—

—

—

`case-study9-theme`

—

—

—

`case-study10-title`

—

—

—

`case-study10-sector`

—

—

—

`case-study10-content`

—

—

—

`case-study10-cta`

—

—

—

`case-study10-link`

—

—

—

`case-study10-image`

—

—

—

`case-study10-theme`

—

—

—

`@pricing`

Two-column pricing cards with service lists and CTAs.

## We do design retainers

## Basic plan

Most popular

One designer, 5 days a month

*   Access to basic services
*   Basic assets and logos
*   Up to 10 individual assets

£999 / month [Contact us](/contact/)

## Enterprise plan

Best value

One team, 5 days a month

*   All basic plan services
*   100 assets
*   Advanced reporting and analytics

£2999 / month [Contact us](/contact/)

Example

```
<!-- @pricing title="We do design retainers"
  plan1-title="Basic plan" plan1-tag="Most popular" plan1-content="One designer, 5 days a month" plan1-cta="Start free trial" plan1-price="999" plan1-services="Access to basic services | Basic assets and logos | Up to 10 individual assets"
  plan2-title="Enterprise plan" plan2-tag="Best value" plan2-content="One team, 5 days a month" plan2-cta="Enquire now" plan2-price="2999" plan2-services="All basic plan services | 100 assets | Advanced reporting and analytics" -->
```

Attribute

Required

Values

Description

`title`

—

—

Section heading

`plan1-title`

✓

—

Plan name

`plan1-tag`

—

—

Badge text e.g. "Most popular"

`plan1-content`

✓

—

Plan description

`plan1-cta`

✓

—

CTA button text

`plan1-price`

✓

—

Monthly price (numbers only)

`plan1-services`

✓

—

Pipe-separated list of services

`plan2-title`

✓

—

—

`plan2-tag`

—

—

—

`plan2-content`

—

—

—

`plan2-cta`

—

—

—

`plan2-price`

—

—

—

`plan2-services`

—

—

—

`@newsletter`

Newsletter signup form with background image.

![](/_astro/hero-image.CJcnn0bU_VhaAJ.avif)

## Sign up for our newsletter

**We have a deep commitment to keeping your data safe.** We will never sell your data and will send no more than two emails a month.

Name  Email  

Example

```
<!-- @newsletter title="Sign up for our newsletter" content="&lt;strong&gt;We have a deep commitment to keeping your data safe.&lt;/strong&gt; We will never sell your data and will send no more than two emails a month." cta="Sign up" -->
```

Attribute

Required

Values

Description

`title`

✓

—

Section heading

`content`

✓

—

Description text (HTML supported)

`cta`

✓

—

Submit button text

`@comparison-table`

Side-by-side comparison table with two columns to compare options, features, or approaches.

Dimension

Traditional

Modern

Speed

Slow process

Fast deployment

Cost

High upfront

Low initial

Example

```
<!-- @comparison-table left-header="Traditional" right-header="Modern"
  row1-dim="Speed" row1-left="Slow process" row1-right="Fast deployment"
  row2-dim="Cost" row2-left="High upfront" row2-right="Low initial" -->
```

Attribute

Required

Values

Description

`left-header`

—

default: Option A

Left column header

`right-header`

—

default: Option B

Right column header

`row1-dim`

—

—

—

`row1-left`

—

—

—

`row1-right`

—

—

—

`row2-dim`

—

—

—

`row2-left`

—

—

—

`row2-right`

—

—

—

`row3-dim`

—

—

—

`row3-left`

—

—

—

`row3-right`

—

—

—

`row4-dim`

—

—

—

`row4-left`

—

—

—

`row4-right`

—

—

—

`row5-dim`

—

—

—

`row5-left`

—

—

—

`row5-right`

—

—

—

`row6-dim`

—

—

—

`row6-left`

—

—

—

`row6-right`

—

—

—

`@timeline`

Horizontal timeline with milestones, useful for roadmaps, engagement plans, or process flows.

Project Timeline

Week 1–2 **Discovery** Initial analysis

Week 3–4 **Design** Solution design

Example

```
<!-- @timeline label="Project Timeline"
  milestone1-week="Week 1–2" milestone1-title="Discovery" milestone1-sub="Initial analysis" milestone1-color="#f97316"
  milestone2-week="Week 3–4" milestone2-title="Design" milestone2-sub="Solution design" milestone2-color="#a855f7" -->
```

Attribute

Required

Values

Description

`label`

—

default: Timeline

Timeline section label

`milestone1-week`

—

—

—

`milestone1-title`

—

—

—

`milestone1-sub`

—

—

—

`milestone1-color`

—

—

—

`milestone2-week`

—

—

—

`milestone2-title`

—

—

—

`milestone2-sub`

—

—

—

`milestone2-color`

—

—

—

`milestone3-week`

—

—

—

`milestone3-title`

—

—

—

`milestone3-sub`

—

—

—

`milestone3-color`

—

—

—

`milestone4-week`

—

—

—

`milestone4-title`

—

—

—

`milestone4-sub`

—

—

—

`milestone4-color`

—

—

—

`@stat-strip`

Statistics display with large numbers and labels. Great for metrics, KPIs, or key figures. Each stat can have its own color theme.

## Results

68%

of searches now end **without a click**

3×

more traffic for **AI-cited sources** vs rank #1

6–8w

average time to **first AI citation**

Example

```
<!-- @stat-strip heading="Results"
  stat1-number="68%" stat1-label="of searches now end &lt;strong&gt;without a click&lt;/strong&gt;" stat1-color="warm"
  stat2-number="3×" stat2-label="more traffic for &lt;strong&gt;AI-cited sources&lt;/strong&gt; vs rank #1" stat2-color="purple"
  stat3-number="6–8w" stat3-label="average time to &lt;strong&gt;first AI citation&lt;/strong&gt;" stat3-color="cool" -->
```

Attribute

Required

Values

Description

`heading`

—

—

Section heading

`stat1-number`

✓

—

—

`stat1-label`

—

—

—

`stat1-color`

—

warm | rose | cool | teal | purple

—

`stat2-number`

—

—

—

`stat2-label`

—

—

—

`stat2-color`

—

warm | rose | cool | teal | purple

—

`stat3-number`

—

—

—

`stat3-label`

—

—

—

`stat3-color`

—

warm | rose | cool | teal | purple

—

`stat4-number`

—

—

—

`stat4-label`

—

—

—

`stat4-color`

—

warm | rose | cool | teal | purple

—

`@flow-diagram`

Flow diagram with colored dots and item descriptions. Useful for processes, benefits, or key points.

## How it works

Our Approach

### Benefit 1

Description here

### Benefit 2

Description here

### Benefit 3

Description here

Example

```
<!-- @flow-diagram heading="How it works" label="Our Approach"
  flow1-title="Benefit 1" flow1-description="Description here" flow1-color="#f97316"
  flow2-title="Benefit 2" flow2-description="Description here" flow2-color="#a855f7"
  flow3-title="Benefit 3" flow3-description="Description here" flow3-color="#06b6d4" -->
```

Attribute

Required

Values

Description

`heading`

—

—

Section heading

`label`

—

default: Key Points

Flow section label

`flow1-title`

✓

—

—

`flow1-description`

—

—

—

`flow1-color`

—

—

—

`flow2-title`

—

—

—

`flow2-description`

—

—

—

`flow2-color`

—

—

—

`flow3-title`

—

—

—

`flow3-description`

—

—

—

`flow3-color`

—

—

—

`flow4-title`

—

—

—

`flow4-description`

—

—

—

`flow4-color`

—

—

—

`flow5-title`

—

—

—

`flow5-description`

—

—

—

`flow5-color`

—

—

—

`@kicker`

Section kicker label with a fading horizontal rule. Use above headings to add context like numbering or category.

/ 01 — THE PROBLEM

Example

```
<!-- @kicker label="/ 01 — THE PROBLEM" theme="warm" -->
```

Attribute

Required

Values

Description

`label`

✓

—

Kicker text e.g. "/ 01 — THE PROBLEM"

`theme`

—

warm | rose | cool | teal | purple

Accent color theme

`@latest-blog`

Displays the latest blog posts in a responsive grid using the standard blog card design.

## Latest from the blog

[

AI 22 May 2026

### AI Strategy Consultant vs. Implementation Partner: Why Most Projects Fail

Most AI projects don’t fail because the idea was bad. They fail because the “strategy” was delivered as a 50-page slide deck by a consultant who has never deployed a single agent in a production environment. The gap between a beautiful PowerPoint and a system that actually handles 1,000 requests a second without hallucinating is \[…\]

Read article Aurora



](/blog/ai-strategy-consultant-vs-implementation-partner/)[

AI 22 May 2026

### The ‘SEO is Dead’ Delusion -> It’s the Fuel for AI Retrieval

I’ve heard it three times this month: “SEO is dead.” Usually, it’s coming from a C-level executive who just saw a slide deck about AI Overviews and decided that the budget for “keywords” is now a waste of capital. Here is the problem: anyone telling you SEO is dead doesn’t actually understand how Large Language \[…\]

Read article Aurora



](/blog/seo-is-not-dead-it-is-the-fuel-for-ai-retrieval/)[

AI Consulting 20 May 2026

### Generative AI consulting: what to look for in a partner

Most “AI Consulting” is just a series of expensive workshops and a 60-slide deck that tells you your business needs to be “AI-enabled.” It’s high-level, vague, and fundamentally useless because it focuses on the what instead of the how. If you’re looking for generative AI consulting, you aren’t looking for a strategy. You’re looking for \[…\]

Read article Aurora



](/blog/generative-ai-consulting-what-to-look-for-in-a-partner/)

Example

```
<!-- @latest-blog heading="Latest from the blog" limit="3" -->
```

Attribute

Required

Values

Description

`heading`

—

—

Section heading

`limit`

—

default: 3

Number of posts to show

`@tldr`

Key takeaways box with corner accents and bullet list. Items are pipe-separated for unlimited entries.

**Key Takeaways**

*   First point
*   Second point
*   Third point

Example

```
<!-- @tldr heading="Key Takeaways" theme="rose" items="First point | Second point | Third point" -->
```

Attribute

Required

Values

Description

`heading`

—

default: Key Takeaways

Box heading

`theme`

—

warm | rose | cool | teal | purple

Accent color

`items`

✓

—

Pipe-separated list of takeaway points

`@process-timeline`

Numbered process timeline with connecting line. Great for showing sequential steps or phases.

1

### AI Crawler Optimisation

llms.txt compliance, AI-accessible APIs, and meta config...

ACCESS

2

### Citation-Ready Content

Modular blocks, fact-based statements, and quotable insights...

CONTENT

3

### Structured Data & Schema

JSON-LD, knowledge graph integration, and entity disambiguation...

STRUCTURE

4

### Brand Authority Signals

E-E-A-T, author credentials, citation networks...

AUTHORITY

Example

```
<!-- @process-timeline
  tstep1-number="1" tstep1-title="AI Crawler Optimisation" tstep1-description="llms.txt compliance, AI-accessible APIs, and meta config..." tstep1-badge="ACCESS"
  tstep2-number="2" tstep2-title="Citation-Ready Content" tstep2-description="Modular blocks, fact-based statements, and quotable insights..." tstep2-badge="CONTENT"
  tstep3-number="3" tstep3-title="Structured Data & Schema" tstep3-description="JSON-LD, knowledge graph integration, and entity disambiguation..." tstep3-badge="STRUCTURE"
  tstep4-number="4" tstep4-title="Brand Authority Signals" tstep4-description="E-E-A-T, author credentials, citation networks..." tstep4-badge="AUTHORITY" -->
```

Attribute

Required

Values

Description

`tstep1-number`

✓

—

—

`tstep1-title`

✓

—

—

`tstep1-description`

✓

—

—

`tstep1-badge`

✓

—

—

`tstep2-number`

—

—

—

`tstep2-title`

—

—

—

`tstep2-description`

—

—

—

`tstep2-badge`

—

—

—

`tstep3-number`

—

—

—

`tstep3-title`

—

—

—

`tstep3-description`

—

—

—

`tstep3-badge`

—

—

—

`tstep4-number`

—

—

—

`tstep4-title`

—

—

—

`tstep4-description`

—

—

—

`tstep4-badge`

—

—

—

`tstep5-number`

—

—

—

`tstep5-title`

—

—

—

`tstep5-description`

—

—

—

`tstep5-badge`

—

—

—