Card

Documentation of the <Card /> component. Learn how to use it and its available props.

Installation#

To get started, install @exponentialeducation/betomic via yarn:

# Yarn
yarn add @exponentialeducation/betomic

Basic example#

A card is used to display content related to a single subject or topic. The content can consist of multiple elements that may vary in type and size.

import { Card } from "@exponentialeducation/betomic";

function IndexPage() {

  return (
    <main>
      {/* ... */}

      <Card>
        <Card.Body>
          I'm a card!
        </Card.Body>
      </Card>

      {/* ... */}
    </main>
  )
}

Card structure#

Children content must be included within the <Card /> component. In order to allow the user to have more control and structure over a card, the component comes with three child components out of the box; Card.Header, Card.Body, and Card.Footer. Those are handy when it comes to style and organize the context of information that is presented in the card.

import { Card } from "@exponentialeducation/betomic";

function IndexPage() {

  return (
    <main>
      {/* ... */}

      <Card className="divide-y divide-surface-200">
        <Card.Header>
          Card header here
        </Card.Header>
        <Card.Body>
          Card body here
        </Card.Body>
        <Card.Footer>
          Card footer here
        </Card.Footer>
      </Card>

      {/* ... */}
    </main>
  )
}

Card styling#

The Card is a flexible component that allows the user to style according to different use cases, like so in the following example. Notice that it is not mandatory to use all three children components.

Nombre del curso

CursoActivo

---

MNE_M0N1C_000

989

Nombre del autor. 22/Ene/21

import { Card, /* other components */ } from "@exponentialeducation/betomic";
{/* import Betomic icons */}

function IndexPage() {

  return (
    <main>
      {/* ... */}

      <Card>
        <Card.Body className="flex flex-col gap-4">
          <div className="flex items-start gap-4">
            <img src="img-url-here" />
            <div className="flex flex-col gap-2 mr-auto">
              <p className="font-display font-bold text-xl leading-6">
                Nombre del curso
              </p>
              <div className="flex gap-2 flex-wrap">
                <Badge content="Curso" className="bg-surface-500 text-white" />
                <Badge content="Activo" intent="success" />
              </div>
            </div>
            <button className="rounded">
              <KebabIcon className="w-5 h-5" />
            </button>
          </div>
          <hr className="text-surface-100 m-0" />
          <div className="flex flex-wrap gap-y-2 gap-x-5">
            <div className="flex items-center">
              <div className="text-primary-500 mr-1">
                <BarcodeIcon className="w-4 h-4" />
              </div>
              <span className="font-base text-sm text-surface-500 leading-6 truncate">
                MNE_M0N1C_000
              </span>
            </div>
            <div className="flex items-center">
              <div className="text-primary-500 mr-1">
                <IdIcon className="w-4 h-4" />
              </div>
              <span className="font-base text-sm text-surface-500 leading-6 truncate">
                989
              </span>
            </div>
            <div className="flex items-center">
              <div className="text-primary-500 mr-1">
                <UpdateIcon className="w-4 h-4" />
              </div>
              <span className="font-base text-sm text-surface-500 leading-6 truncate">
                Nombre del autor. 22/Ene/21
              </span>
            </div>
          </div>
        </Card.Body>
      </Card>

      {/* ... */}
    </main>
  )
}

Props#

Card#

<Card /> is the main component, children content must be provided in order for it to render properly. Card comes with three children components out of the box; Card.Header, Card.Body, and Card.Footer to allow the user to have more control over the structure of the card.

Card.Header, Card.Body & Card.Footer#

The three main child-components of the <Card /> component share the same props.