Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Item with Header for Ark UI

Three outline cards in a grid. Each has a picture, then a model name such as v0-1.5-sm and a one-line description.

Three outline cards in a row. Each picture sits in the header. Under it: v0-1.5-sm, v0-1.5-lg or v0-2.0-mini, plus a one-line description.

Put the picture in the header when the image is the point, as with a model pick. A Card fits the same layout with a footer action. Ark UI in React does not crop the pictures.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Item anatomy: root, media, title, description, actions

Usage

<div className="flex w-full max-w-xl flex-col gap-6">
  <ItemGroup className="grid grid-cols-3 gap-4">
    {MODELS.map((model) => (
      <Item
        className="bg-background"
        key={model.name}
        role="listitem"
        variant="outline"
      >
        <ItemHeader>
          <img
            alt=""
            className="aspect-3/2 w-full rounded-sm object-cover"
            height={480}
            src={model.image}
            width={640}
          />
        </ItemHeader>
        <ItemContent>
          <ItemTitle>{model.name}</ItemTitle>
          <ItemDescription>{model.description}</ItemDescription>
        </ItemContent>
      </Item>
    ))}
  </ItemGroup>
</div>

FAQ

When should I use ItemHeader instead of ItemMedia?

Use ItemHeader when the visual should sit above the text at full width, as in this tile grid. Use ItemMedia for a small icon, avatar, or thumbnail beside the title. ItemHeader is basis-full, so it takes the whole row.

How do the header images keep their shape?

The image has aspect-3/2, w-full and object-cover, so it fills the tile's width at a fixed ratio and crops instead of stretching. The width and height attributes give the browser that ratio before the image loads, so the grid doesn't jump.

How does ItemGroup become a grid?

ItemGroup is a flex column by default; the example adds grid grid-cols-3 gap-4 to turn it into three columns. Use responsive classes, such as one column on small screens and three from md up, if the tiles get too narrow.

What should the header image's attributes be?

Set width and height to the source's ratio, and an alt text that says what the picture shows when it carries meaning. Here the pictures are decorative and the title names the model, so alt is empty. Add loading="lazy" for grids below the fold.

Should header images have rounded corners?

A small radius, rounded-sm here, keeps the image from looking pasted onto the tile's border. Match it to the Item's own corners, which come from your style, so the two curves look related.

Are Items with headers accessible?

Each tile sets role="listitem" inside the group's list, and is read as its name and description. The images have an empty alt, so they are skipped. Render the Item as a link when the whole tile should open a page.

API Reference

Item

Sets role="listitem" and variant="outline". The rest is on the Item page.

All 10 item examples