One large accent tile, three light tiles and a dark closer. Built for five features, with optional figures.
FeaturesSection1 dependency Original, MIT
2 days
Send any pack back. We patch, re-stitch or replace the part and return it fast.
Forty runs a year, each inspected by hand.
Weights and ratings measured by us.
Guides carry every prototype for a season.
Trade in, we refurbish, someone else heads out.
Using Claude Code? Give it the agent prompt and skip these steps.
foundation.css holds the tokens every component reads.
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
------
import FeatureBento from "../components/viewership/feature-bento/FeatureBento.astro";
---
<FeatureBento />| Prop | Type | Default | Description |
|---|---|---|---|
title | string | · | Section headline. |
accent | string | · | Closing words of the headline, drawn in the theme's accent style. |
intro | string | · | Supporting paragraph. |
items | { title: string; body: string; icon?: IconName; stat?: string }[] | · | Five features; the first leads. |
as | "h2" | "h3" | "h2" | Heading element. |
---
/**
* FeatureBento: one large accent tile and four smaller ones. Built for five
* items; the first leads. Icons are optional.
*
* @example
* <FeatureBento title="Built to" accent="outlast the trend." items={[
* { title: "Repairs for life", body: "...", icon: "shield" },
* ]} />
*/
import Icon from "../icon/Icon.astro";
import type { IconName } from "../icon/icons";
interface Item {
title: string;
body: string;
icon?: IconName;
/** A figure set large in the tile, e.g. "2 days". */
stat?: string;
}
interface Props {
title: string;
accent?: string;
intro?: string;
items: Item[];
as?: "h2" | "h3";
class?: string;
}
const { title, accent, intro, items, as: Heading = "h2", class: className } = Astro.props;
---
<section class:list={["vs-feature-bento", className]}>
<div class="vs-feature-bento__inner">
<header>
<Heading class="vs-display vs-feature-bento__title">{title}{accent && <> <em>{accent}</em></>}</Heading>
{intro && <p class="vs-feature-bento__intro">{intro}</p>}
</header>
<ul class="vs-feature-bento__grid">
{
items.map((item) => (
<li class="vs-feature-bento__tile">
{item.icon && (
<span class="vs-feature-bento__icon">
<Icon name={item.icon} size={20} />
</span>
)}
<div class="vs-feature-bento__text">
{item.stat && <p class="vs-display vs-feature-bento__stat">{item.stat}</p>}
<h3 class="vs-feature-bento__name">{item.title}</h3>
<p class="vs-feature-bento__body">{item.body}</p>
</div>
</li>
))
}
</ul>
</div>
</section>
<style>
.vs-feature-bento {
container-type: inline-size;
background: var(--vs-page);
color: var(--vs-ink);
font-family: var(--vs-font-sans);
font-stretch: var(--vs-font-stretch);
}
.vs-feature-bento__inner {
max-width: var(--vs-container);
margin-inline: auto;
padding: var(--vs-section-y) var(--vs-gutter);
}
.vs-feature-bento__title {
font-size: clamp(2rem, 6.5cqi, 4.25rem);
}
.vs-feature-bento__intro {
max-width: 32rem;
margin: 1.25rem 0 0;
font-size: 1.0625rem;
line-height: 1.55;
color: var(--vs-ink-2);
}
.vs-feature-bento__grid {
display: grid;
gap: 12px;
margin: clamp(32px, 6cqi, 64px) 0 0;
padding: 0;
list-style: none;
}
.vs-feature-bento__tile {
display: flex;
min-height: 180px;
flex-direction: column;
justify-content: space-between;
gap: 24px;
padding: 24px;
border: var(--vs-border-w) solid var(--vs-line);
border-radius: var(--vs-radius-card);
background: var(--vs-surface);
box-shadow: var(--vs-shadow-sm);
}
.vs-feature-bento__icon {
display: inline-flex;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
border: 1px solid var(--vs-line-strong);
border-radius: var(--vs-radius-pill);
color: var(--vs-ink);
}
.vs-feature-bento__stat {
margin-bottom: 12px;
font-size: clamp(2.5rem, 6cqi, 4rem);
line-height: 0.95;
}
.vs-feature-bento__name {
margin: 0;
font-size: 1.125rem;
font-weight: 600;
letter-spacing: -0.01em;
}
.vs-feature-bento__body {
margin: 8px 0 0;
font-size: 0.9375rem;
line-height: 1.55;
color: var(--vs-ink-2);
}
/* The lead tile */
.vs-feature-bento__tile:first-child {
min-height: 300px;
border-color: var(--vs-accent);
background: var(--vs-accent);
color: var(--vs-on-accent);
box-shadow: var(--vs-pop-shadow, var(--vs-shadow-sm));
}
.vs-feature-bento__tile:first-child .vs-feature-bento__body {
color: inherit;
opacity: 0.85;
}
.vs-feature-bento__tile:first-child .vs-feature-bento__name {
font-size: 1.5rem;
}
.vs-feature-bento__tile:first-child .vs-feature-bento__icon {
border-color: color-mix(in srgb, var(--vs-on-accent) 40%, transparent);
color: inherit;
}
/* The last tile goes dark for rhythm */
.vs-feature-bento__tile:last-child:not(:first-child) {
border-color: var(--vs-ink);
background: var(--vs-ink);
color: var(--vs-ink-inverse);
}
.vs-feature-bento__tile:last-child:not(:first-child) .vs-feature-bento__body {
color: inherit;
opacity: 0.7;
}
.vs-feature-bento__tile:last-child:not(:first-child) .vs-feature-bento__icon {
border-color: color-mix(in srgb, var(--vs-ink-inverse) 35%, transparent);
color: inherit;
}
@container (min-width: 620px) {
.vs-feature-bento__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vs-feature-bento__tile:first-child {
grid-row: span 2;
}
}
@container (min-width: 900px) {
.vs-feature-bento__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.vs-feature-bento__tile:first-child {
grid-column: span 2;
}
}
</style>Original, MIT.