---
title: Feature Cards
description: A grid of cards, each with an icon, heading, and short description.

# Default values
heading: Why ZeroPoint?
cards:
  - icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 0a256 256 0 1 1 0 512A256 256 0 1 1 256 0zM232 120l0 136c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.5 33.3-6.5s4.5-25.9-6.5-33.3L280 243.2 280 120c0-13.3-10.7-24-24-24s-24 10.7-24 24z"/></svg>
    heading: Blazing Fast
    description: Pre-rendered HTML means instant page loads. No JavaScript bundles slowing you down.
  - icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z"/></svg>
    heading: Easy to Customize
    description: Familiar HTML, CSS, and Nunjucks templates. No framework lock-in, just the web platform.
  - icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>
    heading: Battle-Tested
    description: Built on Eleventy, one of the most reliable and performant static site generators available.
  - icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M144 144l0-32c0-44.2 35.8-80 80-80s80 35.8 80 80l0 32-160 0zm-48 0l0-32C96 50.1 146.1 0 208 0l32 0c61.9 0 112 50.1 112 112l0 32 48 0c8.8 0 16 7.2 16 16l0 304c0 26.5-21.5 48-48 48L80 512c-26.5 0-48-21.5-48-48L32 160c0-8.8 7.2-16 16-16l48 0zm28 168a28 28 0 1 0 0-56 28 28 0 1 0 0 56z"/></svg>
    heading: Secure by Default
    description: No server, no database, no attack surface. Static files served from a CDN.
background: light
columns: 4

# CMS Fields
cms:
  - name: heading
    label: Section Heading
    widget: string
  - name: cards
    label: Cards
    widget: list
    listItemLabel: Card
    fields:
      - name: icon
        label: Icon (SVG)
        widget: text
      - name: heading
        label: Card Heading
        widget: string
      - name: description
        label: Description
        widget: text
  - name: background
    label: Background Color
    widget: select
    options:
      - { label: "Light", value: "light" }
      - { label: "Dark", value: "dark" }
      - { label: "Primary", value: "primary" }
      - { label: "Secondary", value: "secondary" }
  - name: columns
    label: Columns
    widget: select
    options:
      - { label: "2", value: 2 }
      - { label: "3", value: 3 }
      - { label: "4", value: 4 }
---

{%- componentCss -%}
.block-feature-cards {
  background-color: var(--color-{{ background }});
  color: var(--color-contrast-{{ background }});
  padding: var(--unit);

  .feature-cards-grid {
    list-style: none;
    padding: var(--unit);

    display: grid;
    gap: calc(var(--unit) * 1.5);
    grid-template-columns: 1fr;

    @media (min-width: 992px) {
      grid-template-columns: repeat({{ columns }}, 1fr);
    }
  }

  .feature-card {
    padding: var(--unit);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-primary);

    svg {
      width: 2rem;
      height: 2rem;
      fill: var(--color-primary);
    }
  }
}
{%- endcomponentCss -%}

<section class="block block-{{ title | slugify }}">
  <div class="container">
    {%- if heading -%}
      <h2>{{ heading }}</h2>
    {%- endif -%}
    <ul class="feature-cards-grid">
      {%- for card in cards -%}
        <li class="feature-card">
          {%- if card.icon -%}{{ card.icon | safe }}{%- endif -%}
          <h3>{{ card.heading }}</h3>
          <p>{{ card.description }}</p>
        </li>
      {%- endfor -%}
    </ul>
  </div>
</section>