mielui
Blocks

Folder Card

Presents a collection as a folder: a cover, a tab with its name, and a footer with an index and item count.

Installation

pnpm dlx @mielui/svelte add folder-card

Usage

Root renders a link when you pass href, a button when you pass onclick on its own, and an article otherwise. Cover, Tab, and Footer place themselves in the folder layout, so you can omit or restyle any of them. The tab grows with its title and wraps before it reaches the folder edge.

Cover shows a soft wash of the chart color picked by tone, from 1 to 5. Pass src for an image, or children for custom content. Count formats value for the reader's locale, follows it with files (file for one), and animates when the value changes. Pass labels.count on Root to write that text yourself; it receives the number and its formatted form, so a translation can place the number and choose the plural. Every key in labels is optional and English is the fallback.

Cover clips its children to the folder shape, so content anchored to its bottom edge appears to come out of the folder. Mark decorative cover content aria-hidden. A linked or clickable card darkens its border on hover; nothing inside it moves.

<script lang="ts">
    import * as FolderCard from '@mielui/svelte/components/folder-card';
</script>

<FolderCard.Root href="/projects" tone={2}>
    <FolderCard.Cover />
    <FolderCard.Tab>
        <FolderCard.Title>Client projects</FolderCard.Title>
        <FolderCard.Description>Brand, web, and product</FolderCard.Description>
    </FolderCard.Tab>
    <FolderCard.Footer>
        <FolderCard.Index>001</FolderCard.Index>
        <FolderCard.Count value={3957} />
    </FolderCard.Footer>
</FolderCard.Root>

Examples

Custom cover

Paper sheets drawn inside Cover sit above the tone wash.

Image cover

Pass src to replace the wash. The image is decorative by default because the title names the folder; set alt when it adds information. This card omits Index, so Count stays on the right, and its labels.count counts images instead of files.

Folder grid

Lay cards out in your own list and grid. Each tone maps to the next chart color, and the columns follow the container width.

Changing count

Count rolls to a new value with the theme's motion settings and settles immediately when reduced motion is on. This card has no href or onclick, so it is a static article.

Heading level

Title renders a heading. level picks 2, 3 or 4 so the card fits the outline of the page around it, and defaults to 3. The size on screen does not change.

Click action

Pass onclick without href to make the whole card a button. It answers a click, Enter and Space, shows the same hover and focus treatment as the link form, and takes its accessible name from the Title. Use it for a card that opens a dialog or selects something in place of going to a page.

disabled blocks the action and dims the card. With href, onclick is passed to the link and runs before the browser follows it. A card with neither stays a static article.

API reference

FolderCard.Root

Provides the folder frame, tone, and link.

  • labels
    FolderCardLabels

    Overrides the built-in text and accessible names. Every key is optional and English is the fallback.

  • tone
    FolderCardTone

    Chart palette color, --chart-1 to --chart-5, used by the default cover wash.

    Default 1

  • class
    string

    Classes added to the element.

  • children Required
    Snippet<[]>

    Content rendered inside.

  • href
    string

    Renders the card as a link.

  • disabled
    boolean

    Blocks the click action and dims the card. Only the button form takes it.

    Default false

  • onclick
    MouseEventHandler<HTMLAnchorElement> | null | (event: MouseEvent) => void

    Called when it is clicked or activated.

FolderCard.Count

Renders an animated, formatted item count.

  • value Required
    number

    Number to format and show.

  • class
    string

    Classes added to the element.

FolderCard.Cover

Renders the tone wash, image, or custom cover.

  • src
    string

    Image rendered in place of the tone wash.

  • alt
    string

    Image description. Defaults to empty because the title already names the folder.

    Default ''

  • class
    string

    Classes added to the element.

  • children
    Snippet<[]>

    Custom cover content, layered above the image or tone wash.

FolderCard.Description

Renders supporting tab text.

  • class
    string

    Classes added to the element.

  • children Required
    Snippet<[]>

    Content rendered inside.

FolderCard.Footer

Aligns the index and count at the bottom.

  • class
    string

    Classes added to the element.

  • children Required
    Snippet<[]>

    Content rendered inside.

FolderCard.Index

Renders the large folder identifier.

  • class
    string

    Classes added to the element.

  • children Required
    Snippet<[]>

    Content rendered inside.

FolderCard.Tab

Renders the raised tab above the body.

  • class
    string

    Classes added to the element.

  • children Required
    Snippet<[]>

    Content rendered inside.

FolderCard.Title

Renders the folder heading.

  • level
    2 | 3 | 4

    Heading level in the surrounding document.

    Default 3

  • class
    string

    Classes added to the element.

  • children Required
    Snippet<[]>

    Content rendered inside.