Features
Feature sections that explain what your product does, as a bento, grid, spotlight, steps or tabs.
Installation & usage
npx @youj/cli add marketing-feature-bentoAlso installs avatar-stack, badge, counter, icon-check, icon-command, icon-engine, icon-gauge, icon-git-pull-request, icon-globe, icon-layers, icon-lock, icon-message, icon-search, kbd, progress, reveal, sparkline, spinner, stagger, switch, use-visible, youj-core, youj-presets, youj-ui-core.
The CLI copies the block to blocks/marketing/feature-bento.tsx with every component it uses, so it’s yours to edit.
Every prop is optional and falls back to the demo, so it renders as you see it until you pass your own. Give it your data, rewrite or translate its strings through copy, and connect its actions:
'use client'
import { FeatureBento, type FeatureBentoProps } from '@/blocks/marketing/feature-bento'
export function FeatureBentoView({ features }: Pick<FeatureBentoProps, 'features'>) {
return (
<FeatureBento
features={features}
copy={{ eyebrow: 'Platform' }}
/>
)
}Description
Show what your product does with a grid of varied tiles and small working demos. Each tile spans the columns and rows you give it.
List your features in a ruled grid, each read off a live instrument that takes a new reading when it is pointed at.
Show your features in action with alternating text and interactive demos, each with a link to learn more.
Explain how your product works as a release visitors can watch: a lens rides the track from step to step, its ring running down while each step’s picture plays its moment, and anyone can pick a step to jump there.
Let visitors explore your features in tabs with a large demo for each choice. The tabs tour themselves until someone picks one.
Code
Feature Bento, the Bento story: the files youj add writes.
blocks/marketing
Reference
Props5 props, 1 types
Props
| Prop | Type | |
|---|---|---|
theme | ThemeInputDefault: the theme around it. The showcase passes the chosen preset here. | – |
embedded | booleanA section inside another page: the host lays it out (no page background, section padding or max width). default false | false |
copy | Partial<FeatureBentoCopy>Any of the block's strings, to rewrite or translate. | – |
features | FeatureBentoFeature[]The tiles, in order. default the demo's six, each with a live demo | the demo's six, each with a live demo |
headingLevel | 1 | 2 | 3The heading's level. default 2 | 2 |
FeatureBentoFeature
| Prop | Type | |
|---|---|---|
iconRequired | ComponentType<IconProps> | – |
titleRequired | string | – |
descriptionRequired | string | – |
className | stringThe tile's grid span, for example | – |
media | ReactNodeThe tile's demo or picture, under its text. | – |
Strings3 keys for copy
Strings
copy takes any of these keys; the rest keep their defaults. A key whose text holds a value (a count, a name) takes a function.
eyebrowtitledescriptionAccessibilitylandmarks, headings, images, keyboard
Accessibility
Every section in this family is a <section> named by its own heading (aria-labelledby), so it shows up as a labelled region. The heading is an h2 by default; set headingLevel to 1 or 3 where the page around it needs another. Feature spotlight sets its items’ headings one level deeper.
The pictures beside the text are decorative in Feature grid, Feature steps and Feature tabs: they are aria-hidden and inert, and a feature’s title and description carry the meaning, so say in the text whatever a media shows. Feature bento and Feature spotlight pass media through as you give it, so what you put there is read: give an image its alt, and keep a demo’s controls labelled. Feature steps is a named ordered list, so a screen reader announces the count; each number is a button named for its step (“Step 2 of 4: Push a branch”), with aria-current="step" on the step in play. Its tour has a Play and Pause button beside the call to action, holds while keyboard focus is in the steps, off screen or in a hidden tab, and never runs under reduced motion, where every step shows its finished picture.
Feature tabs is built on Tabs: the tab list is named (copy.listLabel), Left and Right Arrow move between tabs, Home and End jump to the ends, and the panel follows the selected tab. It tours itself until someone picks a tab, and pauses while the pointer or focus is inside it, while the page is hidden or the section is out of view; it never tours under reduced motion.
Everything animated stands still under reduced motion, and the links and buttons are real a and button elements with the kit’s focus ring.