Search documentation v0.6.1

Card

Group information visually with an optional header

Source ↗️ Report Issue ↗️

Improve visual hierarchy of your pages with the help of Card components. Group related information together, label sections, or create layouts.

Preview

This is a card with a paragraph

How to use Cards in Astro
---
import { Card } from 'webcoreui/astro'
---
<Card title="Preview" compact={true}>
<p>This is a card with a paragraph</p>
</Card>
How to use Cards in Svelte
<script>
import { Card } from 'webcoreui/svelte'
</script>
<Card title="Preview" compact={true}>
<p>This is a card with a paragraph</p>
</Card>
How to use Cards in React
import React from 'react'
import { Card } from 'webcoreui/react'
const Component = () => (
<Card title="Preview" compact={true}>
<p>This is a card with a paragraph</p>
</Card>
)
export default Component

Card Types

Cards come in different shapes and sizes. You can create them with or without title using the title prop, and change visual appearance with the compact and secondary props:

Card without title
Titled card
Card with title
Compact card without title
Compact
Compact card with title
Secondary card without title
Secondary
Secondary card with title
<Card>Card without title</Card>
<Card title="Titled card">Card with title</Card>
<Card compact={true}>Compact card without title</Card>
<Card compact={true} title="Compact">Compact card with title</Card>
<Card secondary={true}>Secondary card without title</Card>
<Card secondary={true} title="Secondary">Secondary card with title</Card>

API

type CardProps = {
element?: string
title?: string
titleTag?: string
compact?: boolean
secondary?: boolean
className?: string
bodyClassName?: string
}
type ReactCardProps = {
Element?: keyof JSX.IntrinsicElements
TitleTag?: keyof JSX.IntrinsicElements
} & Omit<CardProps, 'titleTag' | 'element'>
PropPurpose
element Set the HTML tag used for the card. Defaults to section. Use Element in React.
title Sets a title for the card.
titleTag Sets the HTML tag of the title. Defaults to span. Use TitleTag in React.
compact Style the card as compact. Defaults to false.
secondary Style the card as secondary with a background color. Defaults to false.
className Pass additional CSS classes for the card.
bodyClassName Pass additional CSS classes for the body of the card.

Request improvement for this page