Logo

Component Blueprint

X: 1280 · Y: 720 · Grid: 8px

Item

Composable row primitive with media, content, descriptions, actions, grouping, links, sizing, and RTL support.

01 Hero Preview

Grid: 8px · Scale: 1:1

Component documentation Build rows with media, content, descriptions, and actions.

02 Usage

TS 

import { FrItemModule } from '@frame-ui-ng/components/item';
import { FrButtonModule } from '@frame-ui-ng/components/button';

HTML 

<div frItem variant="outline">
  <span frItemMedia variant="icon">
    <ng-icon name="tablerFileText" />
  </span>
  <span frItemContent>
    <span frItemTitle>Component documentation</span>
    <span frItemDescription>
      Build rows with media, content, descriptions, and actions.
    </span>
  </span>
  <span frItemActions>
    <button frButton appearance="outline" size="sm" type="button">Open</button>
  </span>
</div>

03 Examples

Basic

Use an item to align media, content, descriptions, and trailing actions.

Component Sheet

Grid: 8px · Scale: 1:1

Component documentation Build rows with media, content, descriptions, and actions.

Group

Wrap related rows in an item group and separate them with item separators.

Component Sheet

Grid: 8px · Scale: 1:1

DocumentationRead setup guides and API reference.
ExamplesCopy working patterns into your app.

Variants

Use default, outline, or muted variants depending on row emphasis.

Component Sheet

Grid: 8px · Scale: 1:1

DefaultTransparent by default for quiet layouts.
OutlineAdds a border for standalone rows.
MutedUses a soft background for subtle emphasis.

Sizes

Use default, sm, or xs sizes for different row densities.

Component Sheet

Grid: 8px · Scale: 1:1

DefaultUse this density for default item layouts.
SMUse this density for sm item layouts.
XSUse this density for xs item layouts.

Media

Use media variants for icons, images, and other leading visuals.

Component Sheet

Grid: 8px · Scale: 1:1

Icon mediaUse icons for compact semantic hints.
Abstract gradientImage mediaUse images for visual previews.

Avatar

Pair item media with Avatar for people, teams, and account rows.

Component Sheet

Grid: 8px · Scale: 1:1

JDJulia DesignerProduct designer, FrameUIsOnline

Actions

Use actions for controls, badges, shortcuts, or row-level metadata.

Component Sheet

Grid: 8px · Scale: 1:1

Notification settingsChoose how this workspace keeps you updated.

RTL support

Items use logical spacing, so media and actions adapt when direction changes.

Component Sheet

Grid: 8px · Scale: 1:1

ملف المستخدمالعناصر تستخدم خصائص منطقية لدعم الاتجاه.

04 Custom Styling

Override item tokens locally to tune row density, media treatment, hover states, and grouped surfaces without changing the markup.

Component Sheet

Grid: 8px · Scale: 1:1

Component documentation Build rows with media, content, descriptions, and actions.

05 Token Inspector

Inspect the item root, grouped surface, media, content, text, actions, footer, and separator tokens.

Design tokens Inspect the root, media, content, title, description, and actions. Updated todayStable
Secondary rowGrouped items share the same surface.

06 Design Tokens

Use these CSS custom properties to customize item spacing, variants, media, typography, actions, and compact sizes.

SCSS 


  --frame-item-gap: 0.875rem;
  --frame-item-padding: 1rem;
  --frame-item-radius: var(--frame-radius-lg);
  --frame-item-bg: transparent;
  --frame-item-color: var(--frame-foreground);
  --frame-item-border: transparent;
  --frame-item-outline-border: var(--frame-border);
  --frame-item-muted-bg: var(--frame-muted);
  --frame-item-hover-bg: var(--frame-accent);
  --frame-item-hover-color: var(--frame-accent-foreground);
  --frame-item-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-ring) 24%, transparent);
  --frame-item-disabled-opacity: 0.5;
  --frame-item-content-gap: 0.25rem;
  --frame-item-header-gap: 0.625rem;
  --frame-item-footer-gap: 0.5rem;
  --frame-item-actions-gap: 0.5rem;
  --frame-item-media-size: 2.5rem;
  --frame-item-media-radius: var(--frame-radius-md);
  --frame-item-media-bg: var(--frame-muted);
  --frame-item-media-color: var(--frame-muted-foreground);
  --frame-item-media-icon-size: 1.25rem;
  --frame-item-title-color: var(--frame-foreground);
  --frame-item-title-font-size: 0.9375rem;
  --frame-item-title-font-weight: 600;
  --frame-item-description-color: var(--frame-muted-foreground);
  --frame-item-description-font-size: 0.875rem;
  --frame-item-sm-padding: 0.75rem;
  --frame-item-sm-media-size: 2rem;
  --frame-item-sm-title-font-size: 0.875rem;
  --frame-item-xs-padding: 0.5rem;
  --frame-item-xs-media-size: 1.75rem;
  --frame-item-xs-title-font-size: 0.8125rem;