Feature section design: three cards, one ground

Feature section design is the row of cards under the hero. They read as one surface when cut from one ground: a left crop, a mirror and a closer zoom. Words, crops and a CSS grid follow. The page around the row is landing page design, and the screen above is hero section design.

What a features section has to do

The features section has one job. The visitor accepted a promise in the hero. Now they want the few things the product will actually do, in an order they can scan. It is not a second hero, and it is not the place for prices, logos or quotes.

Four parts: an eyebrow such as Features, a headline for the whole outcome, one supporting sentence, then the cards. The headline holds the row together. The cards divide it. Without that headline, three true lines still look like a menu.

Separate pictures, colours and buttons make three ads. Nothing repeats, so nothing is remembered. One ground is one material through three windows. Keep the hero's colour, type and corner radius. That is brand consistency between two sections, not a new theme halfway down the page.

Three windows on one ground

Start with one wide image and no words in it: a gradient, a material or a quiet photograph. Show three regions of that file. If it is only as wide as a card, the left and the right are the same picture.

The left card crops to the left edge. The middle card pins the right edge, then mirrors the image only, never the type. The third card scales the image larger than the card and centres it, so the colour under the words can shift.

Pinning is background-position. 0% 50% is the left edge. 100% 50% is the right edge, the one you mirror. The zoom is a background taller than the card, centred, not a second file.

The cards show Northnote, a fictional notes product. The headline above them is "From call to recap, without the chase." Each card divides that line into one sentence.

In Gradiently the ground is a Mark. Explore shows a feature section scene: three cards cut from one Mark, cropped, mirrored or zoomed. It is a preview, not an editable design. Export a still for your page. You can export a Mark only when it is yours.

Frost on every card washes the ground toward grey, so the windows stop matching. If you use glass, use it on one layer. Glassmorphism covers when blur still leaves type readable. A hairline is enough on a white page, and a CSS gradient border draws it without a second background.

What to write on each card

Read the three cards aloud as one list. Same grammar, same length, same kind of promise. Northnote's lines are outcomes. A slogan you could move to another site is not finished. Gradient cards feel like one set when the sentences match as well as the colour.

• One eyebrow or one icon, not both
• A title of about four to seven words
• One sentence, about twelve to twenty words
• The same padding, type and radius on every card
• No button or price unless every card has one

Put the words on the calm part of that crop, as real text, not letters baked into the image. Change the ink after the mirror and the zoom. Check every card, not only the first.

A CSS grid that keeps one surface

At a 16 px root, 70rem is 1120 px wide and a 1.25rem gap is 20 px, so three columns are 360 px. min-height: 30rem is 480 px: label at the top, title at the bottom. Keep the gap between 16 and 24 px. Wider reads as three posters. Tighter makes the corner radii collide.

Keep the headline outside .features, or nth-child steals the left crop. minmax(0, 1fr) contains a long word. isolation: isolate holds the ::before behind the type, overflow: hidden clips the radius, and margin-top: auto on .copy sinks the title.

.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  max-width: 70rem;
  margin-inline: auto;
}

.feature {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 30rem;
  padding: 1.5rem;
  border-radius: 1.25rem;
  display: flex;
  flex-direction: column;
  color: #14151a;
}

.feature .eyebrow {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
}

.feature .copy {
  margin-top: auto;
}

.feature h3,
.feature .copy p {
  margin: 0;
}

.feature h3 {
  font-size: 1.5rem;
  line-height: 1.2;
}

.feature .copy p {
  margin-top: 0.5rem;
  font-size: 1rem;
  line-height: 1.45;
}

.feature::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("/brand/ground.webp");
  background-repeat: no-repeat;
  background-size: cover;
}

.feature:nth-child(1)::before {
  background-position: 0% 50%;
}

.feature:nth-child(2)::before {
  background-position: 100% 50%;
  transform: scaleX(-1);
}

.feature:nth-child(3)::before {
  background-size: auto 180%;
  background-position: 50% 40%;
}

@media (max-width: 50rem) {
  .features {
    grid-template-columns: 1fr;
  }
}

Bento grid design fits when one capability is the product. The lead spans two columns and two rows, 740×480 on this row, and the other two stack at 360×230. Same image, type and radius. A different colour on the lead is a collage, not a features section.

Under 50rem (800 px at that 16 px root) the row stacks. Keep the crops. Ordinary text needs at least 4.5 to 1, and large text (18 point or 14 point bold) needs at least 3 to 1, the WCAG contrast minimum. In Gradiently, Auto ink sets light or dark type per line from the Mark. Check every crop: the mirror and the zoom move the colour.

Build the section in order

1. 1

   Name the whole outcome

   Write the headline before any card. It says what the product does in total. Northnote's line is "From call to recap, without the chase." The cards only divide it.

2. 2

   Choose one ground

   Match the hero's background family so the scroll stays one site. One wide gradient, material or photograph, with no words in the file.

3. 3

   Cut three windows

   Left crop, mirrored far edge, closer zoom. Flip the image, not the title. Check the zoom is calm enough for type.

4. 4

   Write parallel lines

   One title and one sentence each, same grammar, similar length. A second sentence belongs on a feature page, not on the card.

5. 5

   Lay out the grid and test the ink

   Three columns, a 20 px gap, one column under 50rem. Set the text colour per crop and check 4.5 to 1, including at phone width.

6. 6

   Leave the ask to the page

   Keep the action in the hero and at the end of the page. No per-card button, price or logo strip. Pause a moving ground when reduced motion is on.