Card Component

Philosophy: Semantic Structure

Axiom01 cards use semantic HTML elements instead of multiple classes. Style child elements with descendant selectors like .card header and .card footer.

<article class="card">
    <header>
        <h3>Card Title</h3>
    </header>
    <p>Some example content to demonstrate the card structure. Notice how we use semantic HTML elements instead of utility classes.</p>
    <footer>
        <button class="primary">Primary Action</button>
        <button class="secondary">Secondary</button>
    </footer>
</article>

Card with Image

Add images directly to cards using semantic <img> elements. Axiom automatically styles images within cards.

Image Card

Cards with images use semantic structure for better accessibility and cleaner markup.

<article class="card">
    <img src="image.jpg" alt="Descriptive alt text">
    <header>
        <h3>Image Card</h3>
    </header>
    <p>Cards with images use semantic structure for better accessibility and cleaner markup.</p>
    <footer>
        <button class="primary">Learn More</button>
    </footer>
</article>

Card Variants

Use single modifier classes to create card variations following Axiom's minimal class philosophy.

<article class="card">Default Card</article>
<article class="card elevated">Elevated Card</article>
<article class="card bordered">Bordered Card</article>

CSS Styling Approach

Axiom cards are styled using descendant selectors, not utility classes:

/* ✅ Axiom01 Way - Descendant Selectors */
.card {
    padding: var(--a-space-l);
    border-radius: var(--a-border-radius-medium);
    background: var(--a-color-surface);
}

.card header {
    margin-bottom: var(--a-space-m);
    border-bottom: 1px solid var(--a-color-outline);
}

.card footer {
    margin-top: var(--a-space-m);
    display: flex;
    gap: var(--a-space-s);
}

.card img {
    width: 100%;
    border-radius: var(--a-border-radius-medium);
}

Accessibility Features

Best Practices