Logo

Item

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

Preview

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

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>

Examples

Basic

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

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

Group

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

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

Variants

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

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.

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.

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.

JDJulia DesignerProduct designer, FrameUIsOnline

Actions

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

Notification settingsChoose how this workspace keeps you updated.

RTL support

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

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

Custom Styling

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

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

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.

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;