Card #

import Card from '@fuzdev/fuz_ui/Card.svelte';

<Card>
  just<br />
  a card
</Card>

just
a card

With an icon
#

A card has no icon unless given one. icon takes a string, like an emoji or a glyph:

<Card icon="📖">
  with<br />
  icon
</Card>

with
icon

or a snippet, for anything else, like an Svg:

<Card>
  with a<br />
  snippet icon
  {#snippet icon()}<Svg data={logo_github} size="var(--icon_size_lg)" />{/snippet}
</Card>

with a
snippet icon

The icon is decorative, so it is hidden from assistive technology.

As a link
#

<Card href="/">
  a<br />
  link
</Card>

a
link

As the selected link
#

A link card is marked selected while its href leads to the current page, ignoring a trailing slash, the query, and the hash:

<Card href="/docs/Card">
  href is<br />
  selected
</Card>

href is
selected

With a custom HTML tag
#

<Card tag="button">
  custom<br />
  tag
</Card>

A button card defaults to type="button", so it doesn't submit a form around it; pass type to change that.

With custom alignment
#

align sets the layout: the icon at the inline start (the default) or end beside the content, or at the top or bottom above or below it. The content aligns away from the icon, toward the end for end and centered for top and bottom.

<Card align="end" icon="📖">
  icon at<br />
  the end
</Card>

icon at
the end

<Card align="top" icon="📖">
  icon on top
</Card>

icon on top

<Card align="bottom" icon="📖">
  icon on the bottom
</Card>

icon on the bottom

Sizing
#

A card is as wide as --card_width, or as its container when that is unset. Its text is --font_size_xl2, stepping down on narrow screens, and a font-size in style overrides it. The icon is --icon_size with --icon_margin between it and the content:

<Card icon="📖" style="--card_width: 100%; --icon_size: var(--icon_size_md)">
  full width,<br />
  small icon
</Card>

full width,
small icon