Partial Component

CTAs (Call-to-Actions)

The CTAs partial manages groups of call-to-action elements, providing consistent spacing and alignment for multiple buttons or links. It uses the Button partial internally for each CTA element.

Manifest

{
  "name": "ctas",
  "type": "_partials",
  "styles": ["ctas.css"],
  "scripts": [],
  "requires": []
}

Configuration

ctas:
  - url: '/'
    label: 'Get Started'
    isButton: true
    buttonStyle: 'primary'
  - url: '/learn-more'
    label: 'Learn More'
    isButton: true
    buttonStyle: 'secondary'
  - url: '/docs'
    label: 'View Documentation'
    isButton: false

Configuration Options

The CTAs partial accepts an array of CTA objects with the following properties:

Property	Type	Required	Default	Description
`url`	string	Yes	-	Link destination
`label`	string	Yes	-	Button/link text
`isButton`	boolean	No	false	Render as button or link
`buttonStyle`	string	No	'primary'	Button style variant (primary, secondary, tertiary)
`isSmall`	boolean	No	false	Render as small button

Example

Additional CTA Examples

Small Primary Small Secondary Tertiary Button or learn more about features

Usage in Templates

{% from "components/_partials/ctas/ctas.njk" import ctas %}

{% if section.ctas | hasCtas %}
  {{ ctas(section.ctas) }}
{% endif %}

The hasCtas filter checks if a valid CTAs array exists before rendering.

Features

Multiple Button Styles: Primary, secondary, and tertiary button variants
Mixed Content: Combines buttons and text links in same group
Size Variants: Regular and small button options
Flexible Layout: Automatic spacing and alignment for multiple CTAs
Helper Integration: Uses Button partial for consistent styling
Accessibility: Full keyboard navigation and screen reader support