Data display

Item

A compact row for a file, a person or a destination, with optional media and actions.

Class name	Type	Description
`itemplf:item`	Component	A row of content
`item-mediaplf:item-media`	Part	An icon or avatar before the content
`item-iconplf:item-icon`	Part	An SVG icon; an icon class there doesn't need it
`item-contentplf:item-content`	Part	The title and description
`item-titleplf:item-title`	Part	The title
`item-descriptionplf:item-description`	Part	The description
`item-actionsplf:item-actions`	Part	Controls after the content
`item-groupplf:item-group`	Part	A list of items
`item-outlineplf:item-outline`	Style	A border
`item-mutedplf:item-muted`	Style	A raised background
`item-smplf:item-sm`	Size	Compact

Default

Project brief

Updated just now.

Draft

<div class="item">
  <div class="item-media">
    <span class="icon icon-file-text"></span>
  </div>
  <div class="item-content">
    <div class="item-title">Project brief</div>
    <p class="item-description">Updated just now.</p>
  </div>
  <div class="item-actions">
    <span class="badge badge-soft">Draft</span>
  </div>
</div>

<div class="plf:item">
  <div class="plf:item-media">
    <span class="plf:icon plf:icon-file-text"></span>
  </div>
  <div class="plf:item-content">
    <div class="plf:item-title">Project brief</div>
    <p class="plf:item-description">Updated just now.</p>
  </div>
  <div class="plf:item-actions">
    <span class="plf:badge plf:badge-soft">Draft</span>
  </div>
</div>

import { Badge, Icon, Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from '@pelatform/react';

export function Example() {
  return (
    <Item>
      <ItemMedia>
        <Icon name="file-text" />
      </ItemMedia>
      <ItemContent>
        <ItemTitle>Project brief</ItemTitle>
        <ItemDescription>Updated just now.</ItemDescription>
      </ItemContent>
      <ItemActions>
        <Badge variant="soft">Draft</Badge>
      </ItemActions>
    </Item>
  );
}

import { Badge, Icon, Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <Item>
      <ItemMedia>
        <Icon name="file-text" />
      </ItemMedia>
      <ItemContent>
        <ItemTitle>Project brief</ItemTitle>
        <ItemDescription>Updated just now.</ItemDescription>
      </ItemContent>
      <ItemActions>
        <Badge variant="soft">Draft</Badge>
      </ItemActions>
    </Item>
  );
}

Styles

Project brief

Updated just now.

Draft

Shared workspace Keep your team in one place.

Review reminder

Two notes are ready for review.

2 notes

<div class="item">
  <span class="item-media"><span class="icon icon-file-text"></span></span>
  <div class="item-content">
    <div class="item-title">Project brief</div>
    <p class="item-description">Updated just now.</p>
  </div>
  <div class="item-actions">
    <span class="badge badge-soft">Draft</span>
  </div>
</div>
<a class="item item-outline" href="#">
  <span class="item-media"><span class="icon icon-folder"></span></span>
  <span class="item-content">
    <span class="item-title">Shared workspace</span>
    <span class="item-description">Keep your team in one place.</span>
  </span>
  <span class="item-actions"><span class="icon icon-chevron-right"></span></span>
</a>
<div class="item item-muted">
  <span class="item-media"><span class="icon icon-clock"></span></span>
  <div class="item-content">
    <div class="item-title">Review reminder</div>
    <p class="item-description">Two notes are ready for review.</p>
  </div>
  <div class="item-actions">
    <span class="badge badge-primary badge-soft">2 notes</span>
  </div>
</div>

<div class="plf:item">
  <span class="plf:item-media"><span class="plf:icon plf:icon-file-text"></span></span>
  <div class="plf:item-content">
    <div class="plf:item-title">Project brief</div>
    <p class="plf:item-description">Updated just now.</p>
  </div>
  <div class="plf:item-actions">
    <span class="plf:badge plf:badge-soft">Draft</span>
  </div>
</div>
<a class="plf:item plf:item-outline" href="#">
  <span class="plf:item-media"><span class="plf:icon plf:icon-folder"></span></span>
  <span class="plf:item-content">
    <span class="plf:item-title">Shared workspace</span>
    <span class="plf:item-description">Keep your team in one place.</span>
  </span>
  <span class="plf:item-actions"><span class="plf:icon plf:icon-chevron-right"></span></span>
</a>
<div class="plf:item plf:item-muted">
  <span class="plf:item-media"><span class="plf:icon plf:icon-clock"></span></span>
  <div class="plf:item-content">
    <div class="plf:item-title">Review reminder</div>
    <p class="plf:item-description">Two notes are ready for review.</p>
  </div>
  <div class="plf:item-actions">
    <span class="plf:badge plf:badge-primary plf:badge-soft">2 notes</span>
  </div>
</div>

import { Badge, Icon, Item, ItemActions, itemClass, ItemContent, ItemDescription, ItemTitle } from '@pelatform/react';

export function Example() {
  return (
    <>
      <Item>
        <span className="item-media"><Icon name="file-text" /></span>
        <ItemContent>
          <ItemTitle>Project brief</ItemTitle>
          <ItemDescription>Updated just now.</ItemDescription>
        </ItemContent>
        <ItemActions>
          <Badge variant="soft">Draft</Badge>
        </ItemActions>
      </Item>
      <a className={itemClass({ variant: 'outline' })} href="#">
        <span className="item-media"><Icon name="folder" /></span>
        <span className="item-content">
          <span className="item-title">Shared workspace</span>
          <span className="item-description">Keep your team in one place.</span>
        </span>
        <span className="item-actions"><Icon name="chevron-right" /></span>
      </a>
      <Item variant="muted">
        <span className="item-media"><Icon name="clock" /></span>
        <ItemContent>
          <ItemTitle>Review reminder</ItemTitle>
          <ItemDescription>Two notes are ready for review.</ItemDescription>
        </ItemContent>
        <ItemActions>
          <Badge color="primary" variant="soft">2 notes</Badge>
        </ItemActions>
      </Item>
    </>
  );
}

import { Badge, Icon, Item, ItemActions, itemClass, ItemContent, ItemDescription, ItemTitle } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <>
      <Item>
        <span className="plf:item-media"><Icon name="file-text" /></span>
        <ItemContent>
          <ItemTitle>Project brief</ItemTitle>
          <ItemDescription>Updated just now.</ItemDescription>
        </ItemContent>
        <ItemActions>
          <Badge variant="soft">Draft</Badge>
        </ItemActions>
      </Item>
      <a className={itemClass({ variant: 'outline' })} href="#">
        <span className="plf:item-media"><Icon name="folder" /></span>
        <span className="plf:item-content">
          <span className="plf:item-title">Shared workspace</span>
          <span className="plf:item-description">Keep your team in one place.</span>
        </span>
        <span className="plf:item-actions"><Icon name="chevron-right" /></span>
      </a>
      <Item variant="muted">
        <span className="plf:item-media"><Icon name="clock" /></span>
        <ItemContent>
          <ItemTitle>Review reminder</ItemTitle>
          <ItemDescription>Two notes are ready for review.</ItemDescription>
        </ItemContent>
        <ItemActions>
          <Badge color="primary" variant="soft">2 notes</Badge>
        </ItemActions>
      </Item>
    </>
  );
}

Sizes

Jordan Rivera

Workspace administrator

Jordan Rivera

Workspace administrator

<div class="item item-outline">
  <span class="item-media"><span class="avatar avatar-lg" aria-hidden="true">JR</span></span>
  <div class="item-content">
    <div class="item-title">Jordan Rivera</div>
    <p class="item-description">Workspace administrator</p>
  </div>
  <div class="item-actions">
    <button class="btn btn-outline btn-sm">Invite</button>
  </div>
</div>
<div class="item item-outline item-sm">
  <span class="item-media"><span class="avatar avatar-lg" aria-hidden="true">JR</span></span>
  <div class="item-content">
    <div class="item-title">Jordan Rivera</div>
    <p class="item-description">Workspace administrator</p>
  </div>
  <div class="item-actions">
    <button class="btn btn-outline btn-sm">Invite</button>
  </div>
</div>

<div class="plf:item plf:item-outline">
  <span class="plf:item-media"><span class="plf:avatar plf:avatar-lg" aria-hidden="true">JR</span></span>
  <div class="plf:item-content">
    <div class="plf:item-title">Jordan Rivera</div>
    <p class="plf:item-description">Workspace administrator</p>
  </div>
  <div class="plf:item-actions">
    <button class="plf:btn plf:btn-outline plf:btn-sm">Invite</button>
  </div>
</div>
<div class="plf:item plf:item-outline plf:item-sm">
  <span class="plf:item-media"><span class="plf:avatar plf:avatar-lg" aria-hidden="true">JR</span></span>
  <div class="plf:item-content">
    <div class="plf:item-title">Jordan Rivera</div>
    <p class="plf:item-description">Workspace administrator</p>
  </div>
  <div class="plf:item-actions">
    <button class="plf:btn plf:btn-outline plf:btn-sm">Invite</button>
  </div>
</div>

import { Avatar, Button, Item, ItemActions, ItemContent, ItemDescription, ItemTitle } from '@pelatform/react';

export function Example() {
  return (
    <>
      <Item variant="outline">
        <span className="item-media"><Avatar size="lg" aria-hidden="true">JR</Avatar></span>
        <ItemContent>
          <ItemTitle>Jordan Rivera</ItemTitle>
          <ItemDescription>Workspace administrator</ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button variant="outline" size="sm">Invite</Button>
        </ItemActions>
      </Item>
      <Item variant="outline" size="sm">
        <span className="item-media"><Avatar size="lg" aria-hidden="true">JR</Avatar></span>
        <ItemContent>
          <ItemTitle>Jordan Rivera</ItemTitle>
          <ItemDescription>Workspace administrator</ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button variant="outline" size="sm">Invite</Button>
        </ItemActions>
      </Item>
    </>
  );
}

import { Avatar, Button, Item, ItemActions, ItemContent, ItemDescription, ItemTitle } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <>
      <Item variant="outline">
        <span className="plf:item-media"><Avatar size="lg" aria-hidden="true">JR</Avatar></span>
        <ItemContent>
          <ItemTitle>Jordan Rivera</ItemTitle>
          <ItemDescription>Workspace administrator</ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button variant="outline" size="sm">Invite</Button>
        </ItemActions>
      </Item>
      <Item variant="outline" size="sm">
        <span className="plf:item-media"><Avatar size="lg" aria-hidden="true">JR</Avatar></span>
        <ItemContent>
          <ItemTitle>Jordan Rivera</ItemTitle>
          <ItemDescription>Workspace administrator</ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button variant="outline" size="sm">Invite</Button>
        </ItemActions>
      </Item>
    </>
  );
}

Links

Shared workspace Keep your team in one place.

<a class="item item-outline" href="#">
  <span class="item-media"><span class="icon icon-folder"></span></span>
  <span class="item-content">
    <span class="item-title">Shared workspace</span>
    <span class="item-description">Keep your team in one place.</span>
  </span>
  <span class="item-actions"><span class="icon icon-chevron-right"></span></span>
</a>

<a class="plf:item plf:item-outline" href="#">
  <span class="plf:item-media"><span class="plf:icon plf:icon-folder"></span></span>
  <span class="plf:item-content">
    <span class="plf:item-title">Shared workspace</span>
    <span class="plf:item-description">Keep your team in one place.</span>
  </span>
  <span class="plf:item-actions"><span class="plf:icon plf:icon-chevron-right"></span></span>
</a>

import { Icon, itemClass } from '@pelatform/react';

export function Example() {
  return (
    <a className={itemClass({ variant: 'outline' })} href="#">
      <span className="item-media"><Icon name="folder" /></span>
      <span className="item-content">
        <span className="item-title">Shared workspace</span>
        <span className="item-description">Keep your team in one place.</span>
      </span>
      <span className="item-actions"><Icon name="chevron-right" /></span>
    </a>
  );
}

import { Icon, itemClass } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <a className={itemClass({ variant: 'outline' })} href="#">
      <span className="plf:item-media"><Icon name="folder" /></span>
      <span className="plf:item-content">
        <span className="plf:item-title">Shared workspace</span>
        <span className="plf:item-description">Keep your team in one place.</span>
      </span>
      <span className="plf:item-actions"><Icon name="chevron-right" /></span>
    </a>
  );
}

A linked item cannot hold a link, button or input; for several actions, put the controls in a static item’s item-actions.

Groups

role="list" keeps the list’s semantics without markers.

Design notes

Edited today.

Shared
Archive

Read-only reference files.

<ul class="item-group" role="list" aria-label="Project files">
  <li class="flex flex-col gap-2">
    <div class="item item-sm">
      <div class="item-content">
        <div class="item-title"><a href="#">Design notes</a></div>
        <p class="item-description">Edited today.</p>
      </div>
      <div class="item-actions">
        <span class="badge badge-soft">Shared</span>
      </div>
    </div>
    <div class="divider"></div>
  </li>
  <li>
    <div class="item item-sm">
      <div class="item-content">
        <div class="item-title">Archive</div>
        <p class="item-description">Read-only reference files.</p>
      </div>
      <div class="item-actions">
        <button class="btn btn-outline btn-sm" disabled>Locked</button>
      </div>
    </div>
  </li>
</ul>

<ul class="plf:item-group" role="list" aria-label="Project files">
  <li class="plf:flex plf:flex-col plf:gap-2">
    <div class="plf:item plf:item-sm">
      <div class="plf:item-content">
        <div class="plf:item-title"><a href="#">Design notes</a></div>
        <p class="plf:item-description">Edited today.</p>
      </div>
      <div class="plf:item-actions">
        <span class="plf:badge plf:badge-soft">Shared</span>
      </div>
    </div>
    <div class="plf:divider"></div>
  </li>
  <li>
    <div class="plf:item plf:item-sm">
      <div class="plf:item-content">
        <div class="plf:item-title">Archive</div>
        <p class="plf:item-description">Read-only reference files.</p>
      </div>
      <div class="plf:item-actions">
        <button class="plf:btn plf:btn-outline plf:btn-sm" disabled>Locked</button>
      </div>
    </div>
  </li>
</ul>

import { Badge, Button, Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemTitle } from '@pelatform/react';

export function Example() {
  return (
    <ItemGroup aria-label="Project files">
      <li className="flex flex-col gap-2">
        <Item size="sm">
          <ItemContent>
            <ItemTitle><a href="#">Design notes</a></ItemTitle>
            <ItemDescription>Edited today.</ItemDescription>
          </ItemContent>
          <ItemActions>
            <Badge variant="soft">Shared</Badge>
          </ItemActions>
        </Item>
        <div className="divider" />
      </li>
      <li>
        <Item size="sm">
          <ItemContent>
            <ItemTitle>Archive</ItemTitle>
            <ItemDescription>Read-only reference files.</ItemDescription>
          </ItemContent>
          <ItemActions>
            <Button variant="outline" size="sm" disabled>Locked</Button>
          </ItemActions>
        </Item>
      </li>
    </ItemGroup>
  );
}

import { Badge, Button, Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemTitle } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <ItemGroup aria-label="Project files">
      <li className="plf:flex plf:flex-col plf:gap-2">
        <Item size="sm">
          <ItemContent>
            <ItemTitle><a href="#">Design notes</a></ItemTitle>
            <ItemDescription>Edited today.</ItemDescription>
          </ItemContent>
          <ItemActions>
            <Badge variant="soft">Shared</Badge>
          </ItemActions>
        </Item>
        <div className="plf:divider" />
      </li>
      <li>
        <Item size="sm">
          <ItemContent>
            <ItemTitle>Archive</ItemTitle>
            <ItemDescription>Read-only reference files.</ItemDescription>
          </ItemContent>
          <ItemActions>
            <Button variant="outline" size="sm" disabled>Locked</Button>
          </ItemActions>
        </Item>
      </li>
    </ItemGroup>
  );
}

React

Item from @pelatform/react renders this markup from its props, and itemClass() gives a link or a router’s Link the same classes.

Prop	Values	Default
`variant`	`outline`, `muted`	Transparent
`size`	`sm`	The default size

The parts:

Part	Element
`ItemMedia`	A `div` with `item-media`
`ItemContent`	A `div` with `item-content`
`ItemTitle`	A `div` with `item-title`
`ItemDescription`	A `p` with `item-description`
`ItemActions`	A `div` with `item-actions`
`ItemGroup`	A `ul` with `item-group` and `role="list"`

Other props are the element’s own, className and ref included; itemClass() takes variant and size, and a linked item’s parts are spans with their classes.

CSS variables

Override on a root or on a single item.

Variable	Default
`--plf-item-padding`	Space 4 (16px); space 3 (12px) with `item-sm`
`--plf-item-gap`	Space 3 (12px); space 2 (8px) with `item-sm`
`--plf-item-radius`	Large radius (8px)
`--plf-item-bg`	Transparent; `--plf-color-surface-hover` with `item-muted`
`--plf-item-color`	Text
`--plf-item-border`	Transparent; `--plf-color-border-subtle` with `item-outline`
`--plf-item-description-color`	Muted text
`--plf-item-hover-bg`	Muted surface, on linked items
`--plf-item-icon-size`	Control icon size (16px)

#Default

#Styles

#Sizes

#Links

#Groups

#React

#CSS variables