Back to site

Feature Grid with Image

Two-column section with eyebrow, heading, intro, inline feature list with icons, and a rounded shadowed image.

Deploy faster

A better workflow

Lorem ipsum dolor sit amet, consect adipiscing elit. Consequatur deleniti dolorum, natus nam odit ab voluptas, magni vel architecto totam, voluptas ratione fugiat consequatur.

  • Push to deploy. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.

  • SSL certificates. Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.

  • Database backups. Ac tincidunt sapien vehicula erat auctor tristique ullamcorper nam sociosqu hast massa.

Application dashboard mockup 
---
import FeatureGridWithImage from "@features/feature-grid-with-image/FeatureGridWithImage.astro";
---

<FeatureGridWithImage
backgroundColor="base" colorScheme="inherit" eyebrow="Deploy faster" features={
  [
    {
      "iconName": "arrow-up-tray",
      "title": "Push to deploy.",
      "description": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione."
    },
    {
      "iconName": "lock-closed",
      "title": "SSL certificates.",
      "description": "Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo."
    },
    {
      "iconName": "circle-stack",
      "title": "Database backups.",
      "description": "Ac tincidunt sapien vehicula erat auctor tristique ullamcorper nam sociosqu hast massa."
    }
  ]
} heading="A better workflow" imageAlt="Application dashboard mockup" imageAspectRatio="widescreen" imageSource="/src/assets/images/component-docs/quiet-street.jpg" intro="Lorem ipsum dolor sit amet, consect adipiscing elit. Consequatur deleniti dolorum, natus nam odit ab voluptas, magni vel architecto totam, voluptas ratione fugiat consequatur." paddingVertical="4xl"
/>
---
blocks:
  _component: page-sections/features/feature-grid-with-image
  eyebrow: Deploy faster
  heading: A better workflow
  intro: Lorem ipsum dolor sit amet, consect adipiscing elit. Consequatur deleniti dolorum, natus nam odit ab voluptas, magni vel architecto totam, voluptas ratione fugiat consequatur.
  features:
    - iconName: arrow-up-tray
      title: Push to deploy.
      description: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.
    - iconName: lock-closed
      title: SSL certificates.
      description: Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.
    - iconName: circle-stack
      title: Database backups.
      description: Ac tincidunt sapien vehicula erat auctor tristique ullamcorper nam sociosqu hast massa.
  imageSource: /src/assets/images/component-docs/quiet-street.jpg
  imageAlt: Application dashboard mockup
  imageAspectRatio: widescreen
  reverse: false
  colorScheme: inherit
  backgroundColor: base
  paddingVertical: 4xl
---

Overview

Use this when you want marketing copy and a bullet-style feature list beside a screenshot or hero visual—similar to product landing “workflow” blocks. Editable fields cover the eyebrow, heading, intro, per-row icons with title and description, and the right-hand image with alt text and aspect ratio.

Properties

eyebrow string | default: Deploy faster

Short label above the heading (shown in accent color).

heading string | default: A better workflow

Main section heading.

intro string | default: Lorem ipsum dolor sit amet, consect adipiscing elit. Consequatur deleniti dolorum, natus nam odit ab voluptas, magni vel architecto totam, voluptas ratione fugiat consequatur.

Lead paragraph below the heading (muted body text).

features array | default: array

Icon + inline title and description for each row.

Item Properties:

iconName enum | default: bolt

Icon at the start of the row.

title string | default: Short title.

Bold lead phrase (keep the period if desired).

description string | default: Supporting sentence shown after the title on the same line.

Body copy that follows the title on the same line.

imageSource string | default: /src/assets/images/component-docs/quiet-street.jpg

Large screenshot or illustration for the right column.

imageAlt string | default: Application dashboard showing deployment list

Describes the image for screen readers.

imageAspectRatio enum | default: widescreen

Aspect ratio frame for the image.

Accepted values:
  • landscape
  • widescreen
  • square

reverse boolean | default: false

When enabled, image column appears on the left (desktop).

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