Back to site

Feature three-by-one centered

Centered eyebrow, heading, and intro with three columns of icon, title, body copy, and an accent “learn more” link—using site design tokens.

Deploy faster

Everything you need to deploy your app

Quis tellus eget odio sagittis blandit faucibus etiam malesuada. Nunc vel risus commodo viverra maecenas accumsan lacus vel. Sem sodales gravida quam turpis enim lacus amet.

  • Push to deploy

    Morbi viverra dui mi arcu sed. Tellus semper adipiscing suspendisse semper morbi. Odio urna massa nunc massa.

    Learn more

  • SSL certificates

    Sit quis amet rutrum tellus ullamcorper ultricies libero dolor eget. Sem sodales gravida quam turpis enim lacus amet.

    Learn more

  • Simple queues

    Quisque est vel vulputate cursus. Risus proin diam nunc commodo. Lobortis auctor congue commodo diam neque.

    Learn more 
---
import FeatureThreeByOneCentered from "@features/feature-three-by-one-centered/FeatureThreeByOneCentered.astro";
---

<FeatureThreeByOneCentered
backgroundColor="base" colorScheme="inherit" eyebrow="Deploy faster" features={
  [
    {
      "iconName": "arrow-up-tray",
      "title": "Push to deploy",
      "description": "Morbi viverra dui mi arcu sed. Tellus semper adipiscing suspendisse semper morbi. Odio urna massa nunc massa.",
      "linkText": "Learn more",
      "linkUrl": "/component-docs/"
    },
    {
      "iconName": "lock-closed",
      "title": "SSL certificates",
      "description": "Sit quis amet rutrum tellus ullamcorper ultricies libero dolor eget. Sem sodales gravida quam turpis enim lacus amet.",
      "linkText": "Learn more",
      "linkUrl": "/component-docs/"
    },
    {
      "iconName": "arrow-path",
      "title": "Simple queues",
      "description": "Quisque est vel vulputate cursus. Risus proin diam nunc commodo. Lobortis auctor congue commodo diam neque.",
      "linkText": "Learn more",
      "linkUrl": "/component-docs/"
    }
  ]
} heading="Everything you need to deploy your app" intro="Quis tellus eget odio sagittis blandit faucibus etiam malesuada. Nunc vel risus commodo viverra maecenas accumsan lacus vel. Sem sodales gravida quam turpis enim lacus amet." paddingVertical="4xl"
/>
---
blocks:
  _component: page-sections/features/feature-three-by-one-centered
  eyebrow: Deploy faster
  heading: Everything you need to deploy your app
  intro: Quis tellus eget odio sagittis blandit faucibus etiam malesuada. Nunc vel risus commodo viverra maecenas accumsan lacus vel. Sem sodales gravida quam turpis enim lacus amet.
  features:
    - iconName: arrow-up-tray
      title: Push to deploy
      description: Morbi viverra dui mi arcu sed. Tellus semper adipiscing suspendisse semper morbi. Odio urna massa nunc massa.
      linkText: Learn more
      linkUrl: /component-docs/
    - iconName: lock-closed
      title: SSL certificates
      description: Sit quis amet rutrum tellus ullamcorper ultricies libero dolor eget. Sem sodales gravida quam turpis enim lacus amet.
      linkText: Learn more
      linkUrl: /component-docs/
    - iconName: arrow-path
      title: Simple queues
      description: Quisque est vel vulputate cursus. Risus proin diam nunc commodo. Lobortis auctor congue commodo diam neque.
      linkText: Learn more
      linkUrl: /component-docs/
  colorScheme: inherit
  backgroundColor: base
  paddingVertical: 4xl
---

Overview

Ideal for a compact “three pillars” row under a single headline. The header is centered; each column is left-aligned with accent-colored icons and links driven by --blue-dark, with body text using muted foreground tokens. Extra array items wrap to another row on wide screens.

Properties

eyebrow string | default: Deploy faster

Short centered label above the heading (site blue token).

heading string | default: Everything you need to deploy your app

Main section heading (centered).

intro string | default: Quis tellus eget odio sagittis blandit faucibus etiam malesuada. Nunc vel risus commodo viverra maecenas accumsan lacus vel. Sem sodales gravida quam turpis enim lacus amet.

Centered lead paragraph below the heading.

features array | default: array

Up to three feature blocks in one row on large screens (stacks on small). Each has icon + title, description, and a call-to-action link.

Item Properties:

iconName enum | default: bolt

Icon beside the title (accent color).

title string | default: Feature title

Feature title next to the icon.

description string | default: Supporting paragraph.

Body copy below the title.

linkText string | default: Learn more

Label for the link (default “Learn more”).

linkUrl string

Destination URL for the link.

colorScheme enum | default: inherit

Color scheme theme for this section.

Accepted values:
  • inherit
  • light
  • dark

backgroundColor enum | default: base

Section background color.

Accepted values:
  • none
  • base
  • surface
  • accent
  • highlight

paddingVertical enum | default: 4xl

Vertical padding for this section.

Accepted values:
  • none
  • xs
  • sm
  • md
  • lg
  • xl
  • 2xl
  • 3xl
  • 4xl