Feature two-by-two centered

Centered eyebrow, heading, and intro with a responsive two-column grid of icon+title+description feature cells using site color 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.

  • arrow-up-tray

    Push to deploy

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

  • lock-closed

    SSL certificates

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

  • arrow-path

    Simple queues

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

  • finger-print

    Advanced security

    Arcu egestas dolor vel iaculis in ipsum mauris. Tincidunt mattis aliquet hac quis. Id hac maecenas ac donec pharetra eget.

---
import FeatureTwoByTwoCentered from "@features/feature-two-by-two-centered/FeatureTwoByTwoCentered.astro";
---

<FeatureTwoByTwoCentered
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."
    },
    {
      "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."
    },
    {
      "iconName": "arrow-path",
      "title": "Simple queues",
      "description": "Quisque est vel vulputate cursus. Risus proin diam nunc commodo. Lobortis auctor congue commodo diam neque."
    },
    {
      "iconName": "finger-print",
      "title": "Advanced security",
      "description": "Arcu egestas dolor vel iaculis in ipsum mauris. Tincidunt mattis aliquet hac quis. Id hac maecenas ac donec pharetra eget."
    }
  ]
} 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-two-by-two-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.
    - 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.
    - iconName: arrow-path
      title: Simple queues
      description: Quisque est vel vulputate cursus. Risus proin diam nunc commodo. Lobortis auctor congue commodo diam neque.
    - iconName: finger-print
      title: Advanced security
      description: Arcu egestas dolor vel iaculis in ipsum mauris. Tincidunt mattis aliquet hac quis. Id hac maecenas ac donec pharetra eget.
  colorScheme: inherit
  backgroundColor: base
  paddingVertical: 4xl
---

Overview

Use this section for a focused “capabilities” block with a strong headline and a compact 2×2-style grid (the grid is responsive and will wrap additional items). Icon tiles use the site’s blue accent (--blue-dark) with white glyphs; typography follows muted body and strong title tokens.

Properties

eyebrow string | default: Deploy faster

Short centered label above the heading (uses the site accent 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

Rows in a responsive 2-column grid (stacks to one column on small screens). Typically four items for a 2×2 layout.

Item Properties:

iconName enum | default: bolt

White icon shown on the blue tile (uses site blue token).

title string | default: Feature title

Bold feature title beside the icon tile.

description string | default: Supporting paragraph shown under the title.

Body copy below the title.

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