Back to site

Feature offset list

Left-aligned eyebrow, heading, and intro with a two-column feature grid—accent check-style icons, titles, and muted descriptions—using site design tokens.

Everything you need

All-in-one platform

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.

  • Invite team members

    Morbi viverra dui mi arcu sed. Tellus semper adipiscing suspendisse semper morbi.

  • List view

    Sit quis amet rutrum tellus ullamcorper ultricies libero dolor eget.

  • Keyboard shortcuts

    Quisque est vel vulputate cursus. Risus proin diam nunc commodo.

  • Calendars

    Arcu egestas dolor vel iaculis in ipsum mauris. Tincidunt mattis aliquet hac quis.

  • Notifications

    Lobortis auctor congue commodo diam neque. Id hac maecenas ac donec pharetra.

  • Boards

    Sem sodales gravida quam turpis enim lacus amet. Odio urna massa nunc massa.

  • Reporting

    Tellus semper adipiscing suspendisse semper morbi. Odio urna massa nunc massa.

  • Mobile app

    Nunc vel risus commodo viverra maecenas accumsan lacus vel facilisis. 

---
import FeatureOffsetList from "@features/feature-offset-list/FeatureOffsetList.astro";
---

<FeatureOffsetList
backgroundColor="base" colorScheme="inherit" eyebrow="Everything you need" features={
  [
    {
      "iconName": "check",
      "title": "Invite team members",
      "description": "Morbi viverra dui mi arcu sed. Tellus semper adipiscing suspendisse semper morbi."
    },
    {
      "iconName": "check",
      "title": "List view",
      "description": "Sit quis amet rutrum tellus ullamcorper ultricies libero dolor eget."
    },
    {
      "iconName": "check",
      "title": "Keyboard shortcuts",
      "description": "Quisque est vel vulputate cursus. Risus proin diam nunc commodo."
    },
    {
      "iconName": "check",
      "title": "Calendars",
      "description": "Arcu egestas dolor vel iaculis in ipsum mauris. Tincidunt mattis aliquet hac quis."
    },
    {
      "iconName": "check",
      "title": "Notifications",
      "description": "Lobortis auctor congue commodo diam neque. Id hac maecenas ac donec pharetra."
    },
    {
      "iconName": "check",
      "title": "Boards",
      "description": "Sem sodales gravida quam turpis enim lacus amet. Odio urna massa nunc massa."
    },
    {
      "iconName": "check",
      "title": "Reporting",
      "description": "Tellus semper adipiscing suspendisse semper morbi. Odio urna massa nunc massa."
    },
    {
      "iconName": "check",
      "title": "Mobile app",
      "description": "Nunc vel risus commodo viverra maecenas accumsan lacus vel facilisis."
    }
  ]
} heading="All-in-one platform" 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-offset-list
  eyebrow: Everything you need
  heading: All-in-one platform
  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: check
      title: Invite team members
      description: Morbi viverra dui mi arcu sed. Tellus semper adipiscing suspendisse semper morbi.
    - iconName: check
      title: List view
      description: Sit quis amet rutrum tellus ullamcorper ultricies libero dolor eget.
    - iconName: check
      title: Keyboard shortcuts
      description: Quisque est vel vulputate cursus. Risus proin diam nunc commodo.
    - iconName: check
      title: Calendars
      description: Arcu egestas dolor vel iaculis in ipsum mauris. Tincidunt mattis aliquet hac quis.
    - iconName: check
      title: Notifications
      description: Lobortis auctor congue commodo diam neque. Id hac maecenas ac donec pharetra.
    - iconName: check
      title: Boards
      description: Sem sodales gravida quam turpis enim lacus amet. Odio urna massa nunc massa.
    - iconName: check
      title: Reporting
      description: Tellus semper adipiscing suspendisse semper morbi. Odio urna massa nunc massa.
    - iconName: check
      title: Mobile app
      description: Nunc vel risus commodo viverra maecenas accumsan lacus vel facilisis.
  colorScheme: inherit
  backgroundColor: base
  paddingVertical: 4xl
---

Overview

Use this section when you want a narrative header beside a dense matrix of capabilities. On large screens the intro uses roughly one third of the width and the grid two thirds; the grid becomes a single column on small screens. Icons and the eyebrow use the site accent blue (--blue-dark); titles and body copy follow strong and muted text tokens.

Properties

eyebrow string | default: Everything you need

Short label above the heading in the left column (uses the site accent blue token).

heading string | default: All-in-one platform

Main section heading (aligned start in the left column).

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.

Lead paragraph beside the feature grid (left column, below the heading).

features array | default: array

Two-column grid on medium+ screens (one column on small). Typically eight items in four rows; each row has an accent icon, bold title, and muted description with body text offset under the title.

Item Properties:

iconName enum | default: check

Icon beside the title (accent color); defaults to check when unset in content.

title string | default: Feature title

Bold feature title beside the icon.

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

Muted body copy below the title (indented with the title, not under the icon only).

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