Card

A bordered block with an optional head, body and foot. As a link it lifts on hover.

Edit page

Example

Use it

Clone the repository, run two commands and build on a working base.

Installation

Plain card

No head and no foot: a border, a radius and padding.

Example.jsx

<a className='card' href='/docs/installation'>
  <div className='card-head'>
    <PiRocketLaunch className='c-accent' />
    <h3 className='title-card m-b-0'>Use it</h3>
  </div>
  <p className='card-body'>Clone, install, start.</p>
  <span className='card-foot'>Installation <PiArrowRight /></span>
</a>

Parts

Class	What it is
`card`	the block: border, radius, padding, a column of its parts
`card-head`	a row of an icon and a heading, with a gap below
`card-body`	the text, muted, takes the free height
`card-foot`	a row at the bottom, under a hairline

On an a the card gets a hover border and shadow. Cards in one row line up their feet, because the body takes the free height.

Variables

Variable	Default	What it sets
`$card-padding`	`24px`	inner padding
`$card-gap`	`16px`	space between head, body and foot
`$card-radius`	`12px`	corner radius
`$card-line`	`var(--line)`	border colour
`$card-background`	`var(--page)`	background
`$card-hover-line`	`var(--muted)`	border colour of a link card on hover
`$card-shadow`	`0 8px 24px rgba($dark, .06)`	shadow of a link card on hover