Card

The Card component is used to create a boxed section around content with a white background and padding. Cards are ideal for grouping related information, making it visually distinct from the surrounding content.

Basic card example

To create a card, simply wrap your content inside a <div> element with the class card. Here’s a basic example:

<div class="card">
  <p>This is content inside a card.</p>
</div>

This will render a white box with 20px padding around the text, helping it stand out on the page.

Using cards with other components

Cards can be combined with other components, such as lists, forms, or tables, to group related content together. Here’s an example of a card containing a list of items:

<div class="card">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

In this example, the card wraps the list, making it visually distinct from the rest of the page.

Cards with headings

You can also add headings inside a card to provide context for the content it contains. Here’s an example of a card with a heading and paragraph:

<div class="card">
  <h3>Card Title</h3>
  <p>This is some information inside the card.</p>
</div>

This layout makes the content more structured and readable, especially when displaying grouped data or sections on the page.