EVO React Components

Card Demo

Card component examples and usage guidelines

Card Component
A versatile card component for displaying content in a contained area.
Basic Card
A simple card with header and content.
Basic Card
A simple card with header and content.

This is a basic card example with a title, description, and some content.

Basic Icon Card
A card with an icon header instead of a traditional header.
Case Load

This is a basic card example with a title, description, and some content.

Card with Footer
A card that includes a footer section with action buttons.
Card with Footer
This card includes a footer section that can contain actions or additional information.

The footer section is perfect for placing action buttons or supplementary content.

Interactive Card
A card with interactive elements and hover effects.
Interactive Card
A card with interactive elements and hover effects.

Hover over the button below to see the interaction.

KPI Card Example
A specialized KPI card for displaying key performance indicators.
Appointments
Rio Midlands
2
Last 90 days
Card Grid Layout
A responsive grid layout showcasing multiple cards.
Card One
First card in grid layout

Cards can be arranged in a grid layout for displaying multiple items.

Card Two
Second card in grid layout

Grid layouts are responsive and adjust based on screen size.