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.
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.
-
inherit -
light -
dark
backgroundColor enum | default: base
Section background color.
-
none -
base -
surface -
accent -
highlight
paddingVertical enum | default: 4xl
Vertical padding for this section.
-
none -
xs -
sm -
md -
lg -
xl -
2xl -
3xl -
4xl