Data display

Attachment

A static file card with an icon, a name, details and optional actions, in upload states your application sets.

Class name	Type	Description
`attachmentplf:attachment`	Component	A file card
`attachment-groupplf:attachment-group`	Component	A list of attachments
`attachment-mediaplf:attachment-media`	Part	The icon box
`attachment-iconplf:attachment-icon`	Part	An SVG icon; an icon class there doesn't need it
`attachment-contentplf:attachment-content`	Part	The title and description
`attachment-titleplf:attachment-title`	Part	The file name
`attachment-descriptionplf:attachment-description`	Part	Details such as size and status
`attachment-actionsplf:attachment-actions`	Part	Links or buttons after the content
`attachment-smplf:attachment-sm`	Size	Small

Default

Attachment uploads nothing; File Upload builds the same cards from the files a person selects.

report.pdf

240 KB

<div class="attachment">
  <span class="attachment-media"><span class="icon icon-file-text"></span></span>
  <div class="attachment-content">
    <p class="attachment-title">report.pdf</p>
    <p class="attachment-description">240 KB</p>
  </div>
</div>

<div class="plf:attachment">
  <span class="plf:attachment-media"><span class="plf:icon plf:icon-file-text"></span></span>
  <div class="plf:attachment-content">
    <p class="plf:attachment-title">report.pdf</p>
    <p class="plf:attachment-description">240 KB</p>
  </div>
</div>

import { Attachment, AttachmentContent, AttachmentDescription, AttachmentMedia, AttachmentTitle, Icon } from '@pelatform/react';

export function Example() {
  return (
    <Attachment>
      <AttachmentMedia><Icon name="file-text" /></AttachmentMedia>
      <AttachmentContent>
        <AttachmentTitle>report.pdf</AttachmentTitle>
        <AttachmentDescription>240 KB</AttachmentDescription>
      </AttachmentContent>
    </Attachment>
  );
}

import { Attachment, AttachmentContent, AttachmentDescription, AttachmentMedia, AttachmentTitle, Icon } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <Attachment>
      <AttachmentMedia><Icon name="file-text" /></AttachmentMedia>
      <AttachmentContent>
        <AttachmentTitle>report.pdf</AttachmentTitle>
        <AttachmentDescription>240 KB</AttachmentDescription>
      </AttachmentContent>
    </Attachment>
  );
}

States

data-plf-state="idle" dashes the border and "error" colors it; write the state in the description too, and add aria-busy="true" while work is pending.

notes.txt

12 KB · Waiting
photos.zip

4.2 MB · Uploading
45%
report.pdf

240 KB · Uploaded
invoice.pdf

Upload failed

<ul class="attachment-group" role="list">
  <li class="attachment" data-plf-state="idle">
    <span class="attachment-media"><span class="icon icon-file-text"></span></span>
    <div class="attachment-content">
      <p class="attachment-title">notes.txt</p>
      <p class="attachment-description">12 KB · Waiting</p>
    </div>
  </li>
  <li class="attachment" aria-busy="true">
    <span class="attachment-media"><span class="icon icon-file-text"></span></span>
    <div class="attachment-content">
      <p class="attachment-title">photos.zip</p>
      <p class="attachment-description">4.2 MB · Uploading</p>
      <progress class="progress" value="45" max="100" aria-label="photos.zip upload">45%</progress>
    </div>
  </li>
  <li class="attachment">
    <span class="attachment-media"><span class="icon icon-file-text"></span></span>
    <div class="attachment-content">
      <p class="attachment-title">report.pdf</p>
      <p class="attachment-description">240 KB · Uploaded</p>
    </div>
  </li>
  <li class="attachment" data-plf-state="error">
    <span class="attachment-media"><span class="icon icon-file-text"></span></span>
    <div class="attachment-content">
      <p class="attachment-title">invoice.pdf</p>
      <p class="attachment-description">Upload failed</p>
    </div>
  </li>
</ul>

<ul class="plf:attachment-group" role="list">
  <li class="plf:attachment" data-plf-state="idle">
    <span class="plf:attachment-media"><span class="plf:icon plf:icon-file-text"></span></span>
    <div class="plf:attachment-content">
      <p class="plf:attachment-title">notes.txt</p>
      <p class="plf:attachment-description">12 KB · Waiting</p>
    </div>
  </li>
  <li class="plf:attachment" aria-busy="true">
    <span class="plf:attachment-media"><span class="plf:icon plf:icon-file-text"></span></span>
    <div class="plf:attachment-content">
      <p class="plf:attachment-title">photos.zip</p>
      <p class="plf:attachment-description">4.2 MB · Uploading</p>
      <progress class="plf:progress" value="45" max="100" aria-label="photos.zip upload">45%</progress>
    </div>
  </li>
  <li class="plf:attachment">
    <span class="plf:attachment-media"><span class="plf:icon plf:icon-file-text"></span></span>
    <div class="plf:attachment-content">
      <p class="plf:attachment-title">report.pdf</p>
      <p class="plf:attachment-description">240 KB · Uploaded</p>
    </div>
  </li>
  <li class="plf:attachment" data-plf-state="error">
    <span class="plf:attachment-media"><span class="plf:icon plf:icon-file-text"></span></span>
    <div class="plf:attachment-content">
      <p class="plf:attachment-title">invoice.pdf</p>
      <p class="plf:attachment-description">Upload failed</p>
    </div>
  </li>
</ul>

import { AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, Icon, Progress } from '@pelatform/react';

export function Example() {
  return (
    <AttachmentGroup>
      <li className="attachment" data-plf-state="idle">
        <AttachmentMedia><Icon name="file-text" /></AttachmentMedia>
        <AttachmentContent>
          <AttachmentTitle>notes.txt</AttachmentTitle>
          <AttachmentDescription>12 KB · Waiting</AttachmentDescription>
        </AttachmentContent>
      </li>
      <li className="attachment" aria-busy="true">
        <AttachmentMedia><Icon name="file-text" /></AttachmentMedia>
        <AttachmentContent>
          <AttachmentTitle>photos.zip</AttachmentTitle>
          <AttachmentDescription>4.2 MB · Uploading</AttachmentDescription>
          <Progress value={45} max={100} aria-label="photos.zip upload">45%</Progress>
        </AttachmentContent>
      </li>
      <li className="attachment">
        <AttachmentMedia><Icon name="file-text" /></AttachmentMedia>
        <AttachmentContent>
          <AttachmentTitle>report.pdf</AttachmentTitle>
          <AttachmentDescription>240 KB · Uploaded</AttachmentDescription>
        </AttachmentContent>
      </li>
      <li className="attachment" data-plf-state="error">
        <AttachmentMedia><Icon name="file-text" /></AttachmentMedia>
        <AttachmentContent>
          <AttachmentTitle>invoice.pdf</AttachmentTitle>
          <AttachmentDescription>Upload failed</AttachmentDescription>
        </AttachmentContent>
      </li>
    </AttachmentGroup>
  );
}

import { AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, Icon, Progress } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <AttachmentGroup>
      <li className="plf:attachment" data-plf-state="idle">
        <AttachmentMedia><Icon name="file-text" /></AttachmentMedia>
        <AttachmentContent>
          <AttachmentTitle>notes.txt</AttachmentTitle>
          <AttachmentDescription>12 KB · Waiting</AttachmentDescription>
        </AttachmentContent>
      </li>
      <li className="plf:attachment" aria-busy="true">
        <AttachmentMedia><Icon name="file-text" /></AttachmentMedia>
        <AttachmentContent>
          <AttachmentTitle>photos.zip</AttachmentTitle>
          <AttachmentDescription>4.2 MB · Uploading</AttachmentDescription>
          <Progress value={45} max={100} aria-label="photos.zip upload">45%</Progress>
        </AttachmentContent>
      </li>
      <li className="plf:attachment">
        <AttachmentMedia><Icon name="file-text" /></AttachmentMedia>
        <AttachmentContent>
          <AttachmentTitle>report.pdf</AttachmentTitle>
          <AttachmentDescription>240 KB · Uploaded</AttachmentDescription>
        </AttachmentContent>
      </li>
      <li className="plf:attachment" data-plf-state="error">
        <AttachmentMedia><Icon name="file-text" /></AttachmentMedia>
        <AttachmentContent>
          <AttachmentTitle>invoice.pdf</AttachmentTitle>
          <AttachmentDescription>Upload failed</AttachmentDescription>
        </AttachmentContent>
      </li>
    </AttachmentGroup>
  );
}

Actions

report.pdf

240 KB

Download

<div class="attachment">
  <span class="attachment-media"><span class="icon icon-file-text"></span></span>
  <div class="attachment-content">
    <p class="attachment-title">report.pdf</p>
    <p class="attachment-description">240 KB</p>
  </div>
  <div class="attachment-actions">
    <a class="btn btn-outline btn-sm" href="#">Download</a>
    <button class="btn btn-ghost btn-sm">Remove</button>
  </div>
</div>

<div class="plf:attachment">
  <span class="plf:attachment-media"><span class="plf:icon plf:icon-file-text"></span></span>
  <div class="plf:attachment-content">
    <p class="plf:attachment-title">report.pdf</p>
    <p class="plf:attachment-description">240 KB</p>
  </div>
  <div class="plf:attachment-actions">
    <a class="plf:btn plf:btn-outline plf:btn-sm" href="#">Download</a>
    <button class="plf:btn plf:btn-ghost plf:btn-sm">Remove</button>
  </div>
</div>

import { Attachment, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentMedia, AttachmentTitle, Button, buttonClass, Icon } from '@pelatform/react';

export function Example() {
  return (
    <Attachment>
      <AttachmentMedia><Icon name="file-text" /></AttachmentMedia>
      <AttachmentContent>
        <AttachmentTitle>report.pdf</AttachmentTitle>
        <AttachmentDescription>240 KB</AttachmentDescription>
      </AttachmentContent>
      <AttachmentActions>
        <a className={buttonClass({ variant: 'outline', size: 'sm' })} href="#">Download</a>
        <Button variant="ghost" size="sm">Remove</Button>
      </AttachmentActions>
    </Attachment>
  );
}

import { Attachment, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentMedia, AttachmentTitle, Button, buttonClass, Icon } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <Attachment>
      <AttachmentMedia><Icon name="file-text" /></AttachmentMedia>
      <AttachmentContent>
        <AttachmentTitle>report.pdf</AttachmentTitle>
        <AttachmentDescription>240 KB</AttachmentDescription>
      </AttachmentContent>
      <AttachmentActions>
        <a className={buttonClass({ variant: 'outline', size: 'sm' })} href="#">Download</a>
        <Button variant="ghost" size="sm">Remove</Button>
      </AttachmentActions>
    </Attachment>
  );
}

Sizes

report.pdf

240 KB

report.pdf

240 KB

<div class="attachment">
  <span class="attachment-media"><span class="icon icon-file-text"></span></span>
  <div class="attachment-content">
    <p class="attachment-title">report.pdf</p>
    <p class="attachment-description">240 KB</p>
  </div>
</div>
<div class="attachment attachment-sm">
  <span class="attachment-media"><span class="icon icon-file-text"></span></span>
  <div class="attachment-content">
    <p class="attachment-title">report.pdf</p>
    <p class="attachment-description">240 KB</p>
  </div>
</div>

<div class="plf:attachment">
  <span class="plf:attachment-media"><span class="plf:icon plf:icon-file-text"></span></span>
  <div class="plf:attachment-content">
    <p class="plf:attachment-title">report.pdf</p>
    <p class="plf:attachment-description">240 KB</p>
  </div>
</div>
<div class="plf:attachment plf:attachment-sm">
  <span class="plf:attachment-media"><span class="plf:icon plf:icon-file-text"></span></span>
  <div class="plf:attachment-content">
    <p class="plf:attachment-title">report.pdf</p>
    <p class="plf:attachment-description">240 KB</p>
  </div>
</div>

import { Attachment, AttachmentContent, AttachmentDescription, AttachmentMedia, AttachmentTitle, Icon } from '@pelatform/react';

export function Example() {
  return (
    <>
      <Attachment>
        <AttachmentMedia><Icon name="file-text" /></AttachmentMedia>
        <AttachmentContent>
          <AttachmentTitle>report.pdf</AttachmentTitle>
          <AttachmentDescription>240 KB</AttachmentDescription>
        </AttachmentContent>
      </Attachment>
      <Attachment size="sm">
        <AttachmentMedia><Icon name="file-text" /></AttachmentMedia>
        <AttachmentContent>
          <AttachmentTitle>report.pdf</AttachmentTitle>
          <AttachmentDescription>240 KB</AttachmentDescription>
        </AttachmentContent>
      </Attachment>
    </>
  );
}

import { Attachment, AttachmentContent, AttachmentDescription, AttachmentMedia, AttachmentTitle, Icon } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <>
      <Attachment>
        <AttachmentMedia><Icon name="file-text" /></AttachmentMedia>
        <AttachmentContent>
          <AttachmentTitle>report.pdf</AttachmentTitle>
          <AttachmentDescription>240 KB</AttachmentDescription>
        </AttachmentContent>
      </Attachment>
      <Attachment size="sm">
        <AttachmentMedia><Icon name="file-text" /></AttachmentMedia>
        <AttachmentContent>
          <AttachmentTitle>report.pdf</AttachmentTitle>
          <AttachmentDescription>240 KB</AttachmentDescription>
        </AttachmentContent>
      </Attachment>
    </>
  );
}

React

Attachment from @pelatform/react renders this card from its props, and each part is a component of its own.

Prop	Values	Default
`size`	`sm`	The default size
`state`	`idle` or `error`, written as `data-plf-state`	None

Part	Element
`AttachmentMedia`	A `span` with `attachment-media`, around an `Icon` or your SVG with `attachment-icon`
`AttachmentContent`	A `div` with `attachment-content`
`AttachmentTitle`	A `p` with `attachment-title`
`AttachmentDescription`	A `p` with `attachment-description`
`AttachmentActions`	A `div` with `attachment-actions`
`AttachmentGroup`	A `ul` with `attachment-group` and `role="list"`, whose attachments are `li` elements with the `attachment` class, as in States

The other props are the element’s own, className and ref included.

CSS variables

Override on a root or on a single attachment.

Variable	Default
`--plf-attachment-gap`	Space 3 (12px)
`--plf-attachment-padding`	Space 3 (12px); space 2 (8px) with `attachment-sm`
`--plf-attachment-radius`	Large radius (8px)
`--plf-attachment-bg`	Transparent
`--plf-attachment-color`	Text
`--plf-attachment-border`	`--plf-color-border-subtle`, or `--plf-color-danger` in the `error` state; also the icon box’s border
`--plf-attachment-description-color`	Muted text
`--plf-attachment-media-size`	`2.5rem` (40px)
`--plf-attachment-icon-size`	`1.25rem` (20px)

#Default

#States

#Actions

#Sizes

#React

#CSS variables

Default

States

Actions

Sizes

React

CSS variables