Item

Input Group
Kbd

Item

Basic Item

A simple item with title and description.

Your profile has been verified.

Usage

Include CSS

Import Tailwind and one full Basecoat style bundle.

@import "tailwindcss";
@import "basecoat-css/vega.css";

Or import only the base CSS, the component CSS files it composes, and one style pack.

@import "tailwindcss";
@import "basecoat-css/base.css";
@import "basecoat-css/components/item.css";
@import "basecoat-css/components/button.css";
@import "basecoat-css/styles/vega.css";

Item composes Button styles when actions are rendered as buttons.

Using CDN or bundler imports? See the Installation page.

Add your item HTML

Add class="item" to a semantic element such as <article> or <a>. Use class="item-group" when listing multiple items.

<article class="item" data-variant="outline">
  <section>
    <h3>Basic Item</h3>
    <p>A simple item with title and description.</p>
  </section>
  <aside>
    <button class="btn" data-variant="outline" data-size="sm">Action</button>
  </aside>
</article>

HTML structure

<article class=“item”> or <a class=“item”>

The item root. Use data-variant=“outline|muted” and data-size=“sm|xs” when needed.

<figure> Optional
Media: icon, avatar, or image.
<section>

Primary content. Headings and paragraphs are styled automatically.

<h2>, <h3>, or <h4>
The item title.
<p> Optional
The item description.
<aside> Optional
Actions or trailing metadata.
<header>, <footer> Optional
Full-width item regions.
<div class=“item-group” role=“list”> Optional
Groups related items. Use role=“listitem” on child items when they are not native list items.

Item vs Field

Use field for form controls and validation. Use item for display content, actions, and navigation rows.

Variant

Default Variant

Transparent background with no border.

Outline Variant

Outlined style with a visible border.

Muted Variant

Muted background for secondary content.

Size

Default Size

The standard size for most use cases.

Small Size

A compact size for dense layouts.

Extra Small Size

The most compact size available.

Examples

Icon

Security Alert

New login detected from unknown device.

Avatar

Evil Rabbit

Evil Rabbit

Last seen 5 months ago

@evilrabbit

No Team Members

Invite your team to collaborate on this project.

Image

Midnight City Lights

Midnight City Lights - Electric Nights

Neon Dreams

3:45

Coffee Shop Conversations

Coffee Shop Conversations - Urban Stories

The Morning Brew

4:05

Digital Rain

Digital Rain - Binary Beats

Cyber Symphony

3:30

Group

v0-1.5-sm

v0-1.5-sm

Everyday tasks and UI generation.

v0-1.5-lg

v0-1.5-lg

Advanced thinking or reasoning.

v0-2.0-mini

v0-2.0-mini

Open Source model for everyone.

Visit our documentation

Learn how to get started with our components.

External resource

Opens in a new tab with security attributes.

RTL

عنصر أساسي

عنصر بسيط يحتوي على عنوان ووصف.

تم التحقق من ملفك الشخصي.