Cards

The Cards component provides a flexible container for displaying content in a clean, organized format. Cards can include headers, content areas, and footers, making them suitable for a wide range of use cases such as product displays, user profiles, or information panels.

Usage

See the Example by Serhii Pimenov on CodePen.

Basic Card

<div class="card">
    <div class="card-header">
        Card Title
    </div>
    <div class="card-content">
        Card content goes here...
    </div>
    <div class="card-footer">
        <button class="button">Action</button>
    </div>
</div>

Card with buttons in Header

<div class="card">
    <div class="card-header">
        Header
        <div class="buttons">
            <button class="button"><span class="mif-rocket"></span></button>
            <button class="button"><span class="mif-share"></span></button>
            <button class="button"><span class="mif-cross"></span></button>
        </div>
    </div>
    <div class="card-content">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <div class="card-footer">
        <button class="button primary">Ok</button>
        <button class="button">Cancel</button>
    </div>
</div>

Card with Image Header

<div class="card image-header">
    <div class="card-header" style="background-image: url('header-image.jpg')">
    </div>
    <div class="card-content">
        Card content goes here...
    </div>
    <div class="card-footer">
        <button class="button">Action</button>
    </div>
</div>

Features

• Clean, bordered container with rounded corners
• Flexible structure with header, content, and footer sections
• Support for avatars and dates in headers
• Image header option with avatar overlay
• Header buttons for actions
• Customizable through CSS variables
• Flexible card option for dynamic height content

Styling with CSS Variables

The Cards component can be styled using the following CSS variables:

Variable	Default (Light)	Dark Mode	Description
--card-header-background	#fbfbfb	#282c35	Background color of the card header
--card-header-color	#191919	#fbfbfb	Text color of the card header
--card-footer-background	#fbfbfb	#282c35	Background color of the card footer
--card-footer-color	#191919	#fbfbfb	Text color of the card footer
--card-background	#ffffff	#2b2d30	Background color of the card content
--card-color	#191919	#dbdfe7	Text color of the card content
--card-avatar-border-color	#ffffff	#414245	Border color for avatars in image headers
--card-border-radius	6px	6px	Border radius of the card
--card-button-border-color	var(--border-color)	var(--border-color)	Border color for buttons in the card header

Example of Custom Styling

/* Custom styling for a specific card */
.custom-card {
    --card-header-background: #1976D2;
    --card-header-color: #ffffff;
    --card-background: #E3F2FD;
    --card-color: #0D47A1;
    --card-border-radius: 12px;
}

Available CSS Classes

Base Classes

• .card - The main container for the card component
• .card-header - The header section of the card (optional)
• .card-content - The main content area of the card
• .card-footer - The footer section of the card (optional)

Header Elements

• .buttons - Container for header action buttons

Special Card Types

• .flex-card - Creates a card that can expand to fill available space
• .image-header - Creates a card with a background image in the header

Structure

The Cards component includes the following elements:

• .card - The main container
• .card-header - The header section (optional)
• .buttons - Container for header action buttons
• .card-content - The main content area
• .card-footer - The footer section (optional)

Special Card Types

Flexible Card

Add the .flex-card class to create a card that can expand to fill available space:

<div class="card flex-card">
    <!-- Card content -->
</div>

Image Header Card

Add the .image-header class to create a card with a background image in the header:

<div class="card image-header">
    <!-- Card content -->
</div>

Spacing

• Cards have a default margin of 8px auto
• Multiple cards are automatically spaced with a 1rem margin between them
• Card headers and footers have padding of 0.5rem 1rem
• Card content has padding of 1rem

Best Practices

1. Use appropriate content hierarchy within cards
2. Keep card content concise and focused
3. Use consistent card styles throughout your application
4. Consider using flex-card for cards that need to fill available space
5. Ensure sufficient contrast between text and background colors
6. Use image headers sparingly and ensure images are optimized for web