Octri

Card and CardGroup

A card turns a block of text into a destination: an icon, a title, a sentence, and, with an href, a link the whole card carries. Put cards in a CardGroup to lay them out in a grid.

Example

Quickstart

Make your first request in five minutes.
Authentication

Create a key and send it.
mdx
<CardGroup cols={2}>
  <Card title="Quickstart" icon="rocket" href="/guides/quickstart">
    Make your first request in five minutes.
  </Card>
  <Card title="Authentication" icon="key" href="/guides/authentication">
    Create a key and send it.
  </Card>
</CardGroup>

Card props

titlestring

The heading.

iconstring

A glyph above the title, by icon name.

hrefstring

Makes the whole card a link, to a page on your site or any URL. A corner mark says where it goes: a link mark for a page on your site, an external mark for anywhere else. External links open in a new tab. Without an href, the card is a static block.

childrenMarkdown

The text under the title, between the tags. Leave a blank line after the opening tag and before the closing one.

CardGroup props

colsnumberdefault: 2

How many columns, from 1 to 6. Anything else falls back to 2. On a phone the cards reflow into a single column whatever you set.

childrenCard

The cards.

With a link

The whole card is clickable.
Without a link

A static block, for a list of facts.

External

Opens in a new tab, with its own mark.
mdx
<CardGroup cols={3}>
  <Card title="With a link" icon="link" href="/guides/quickstart">
    The whole card is clickable.
  </Card>
  <Card title="Without a link" icon="book">
    A static block, for a list of facts.
  </Card>
  <Card title="External" icon="globe" href="https://www.openapis.org">
    Opens in a new tab, with its own mark.
  </Card>
</CardGroup>
  • Icon: every icon name.
  • Banner: one wide block for the top of a page.
  • Button: a single call to action.