Card

A raised surface: neutral, info, warning and error.

Neutral

A raised surface.

Info

The build runs on every push.

Features

  • Neutral, info, warning and error.

Use it for

  • Grouping, callouts.

Installation

  1. Get runets.
    git clone https://github.com/ziyam-khan/runets
  2. Copy these files into your project, keeping their folders.
  3. Install what they use.
    pnpm add react
  4. Load the styles once. Bring your own base tokens, or use runets’ default theme.
    import 'runets/styles/theme.css'
    import 'runets/styles/kit.css'

Usage

import { Card } from 'runets'

<Card tone="warning" title="Warning">Two gates are slow.</Card>

API

PropTypeWhat it does
tonestringColour.
titlestringHeading.

Accessibility

Source

The code is in src/kit/surfaces.tsx in runets, MIT licensed.