Card

Group information visually with an optional header

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

---
import { Card } from 'webcoreui/astro'
---

<Card title="Preview" compact={true}>
    <p>This is a card with a paragraph</p>
</Card>

<script>
    import { Card } from 'webcoreui/svelte'
</script>

<Card title="Preview" compact={true}>
    <p>This is a card with a paragraph</p>
</Card>

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'>

Prop	Purpose
`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.

<- Button Carousel ->

Request improvement for this page