Card

A surface for one thing: an image, a title, a body and a footer.

Rounds, GGR and RTP by game and market.

Certified

card.example.svelte

<script lang="ts">
  import { Badge, Button, Card } from '@onlywin/ui-svelte';
</script>

<div class="example-grid example-grid--3">
  <Card title="Fish on!" description="Lines collect · 5×3" href="#fish-on" />
  <Card
    title="Weekly report"
    description="Every Monday at 09:00 UTC."
    variant="raised"
  >
    <p class="example-note">Rounds, GGR and RTP by game and market.</p>
    {#snippet footer()}
      <Button size="sm">Download</Button>
    {/snippet}
  </Card>
  <Card title="Certification">
    <Badge tone="success">Certified</Badge>
  </Card>
</div>

Usage

Do

Make the whole card a link with href; keep one action per card.

Don’t

Do not nest cards.

Accessibility

An article; with href the title is the one link of the card.

Keyboard

Card keyboard interactions
Keys	Action
`Tab, Shift+Tab`	Move focus in and out

Props

The same props in both frameworks. In React, class is className, events are camelCase (onClick), content passed as Svelte snippets is a ReactNode prop, every bindable value has a default… twin for uncontrolled use, and elementRef reaches the DOM element.

Card props
Prop	Type	Default	Description
`actions`	`Snippet`	—	Header actions, right of the title.
`children`	`Snippet`	—
`class`	`string`	—
`description`	`string`	—
`footer`	`Snippet`	—
`href`	`string`	—	Makes the whole card one link to `href` (through its title).
`media`	`{ readonly alt: string; readonly src: string }`	—
`title`	`string`	—
`variant`	`'flat' \| 'raised'`	`'raised'`