Card
The Card component is a flexible container used to display content in a structured and visually appealing way. It can include various elements such as images, text, and actions, making it ideal for showcasing information in a compact format.
Settings
The Card component accepts the following props:
| Prop | Type | Default | Description |
|---|---|---|---|
padding | TSizes | md | The padding size for the card content, which can be set to one of the predefined size values (e.g., xs, sm, md, lg, xl, etc.). |
borderSize | TBorderWidths | thin | The thickness of the card's border, which can be set to one of the predefined border width values (e.g., none, thin, thick, etc.). |
borderRadius | TSizes | md | The border radius of the card, which can be set to one of the predefined size values (e.g., none, sm, md, lg, xl, etc.). |
borderColour | TColours | TSurfaceColours | border | The color of the card's border, which can be set to one of the predefined color values. Surface colors will automatically use their "surface-" variant. |
contentBackgroundColour | TColours | TSurfaceColours | raised | The background color of the card's content area, which can be set to one of the predefined color values. Surface colors will automatically use their "surface-" variant. |
headerBackgroundColour | TColours | TSurfaceColours | raised | The background color of the card's header area, which can be set to one of the predefined color values. Surface colors will automatically use their "surface-" variant. |
footerBackgroundColour | TColours | TSurfaceColours | raised | The background color of the card's footer area, which can be set to one of the predefined color values. Surface colors will automatically use their "surface-" variant. |
Usage
There are various ways you can use the Card component, as a simple container for content, or with a header and footer to display additional information or actions.
Basic Card
The basic card is a simple container format to hold content and elevate it from the background.
Single Card
This is the main content of the card. It can include text, images, or any other elements you want to display.
Show code
<LxFlex class="lx-padding-y--md">
<LxCard>
<p>This is the main content of the card. It can include text, images, or any other elements you want to display.</p>
</LxCard>
</LxFlex>Multiple Cards
This is the main content of the card. It can include text, images, or any other elements you want to display.
This is the main content of the card. It can include text, images, or any other elements you want to display.
This is the main content of the card. It can include text, images, or any other elements you want to display.
Show code
<LxFlex class="lx-padding-y--md">
<LxCard v-for="index in 3" :key="index">
<p>This is the main content of the card. It can include text, images, or any other elements you want to display.</p>
</LxCard>
</LxFlex>Basic Card (w/ background colours)
Additionally, you can use the contentBackgroundColour prop to set a custom background color for the card's content area.
Theme Colours
primary
secondary
accent
info
success
warning
danger
white
black
transparent
Show code
<LxFlex wrap>
<LxCard v-for="colour in COLOURS" :key="colour" :contentBackgroundColour="colour" style="flex: 0 0 30%;">
<p :style="{ color: `var(--lx-colour-on-${colour})` }">{{ colour }}</p>
</LxCard>
</LxFlex>Surface Colours
base
raised
sunken
overlay
border
Show code
<LxFlex wrap>
<LxCard v-for="colour in SURFACE_COLOURS" :key="colour" :contentBackgroundColour="colour" style="flex: 0 0 30%;">
<p :style="{ color: 'var(--lx-colour-white)' }">{{ colour }}</p>
</LxCard>
</LxFlex>Card (w/ header and footer)
Card Title
This is the main content of the card. It can include text, images, or any other elements you want to display.
Card Title
This is the main content of the card. It can include text, images, or any other elements you want to display.
Show code
<LxFlex class="lx-padding-y--md">
<LxCard v-for="index in 2" :key="index">
<template #header>
<h2>Card Title</h2>
</template>
<template #default>
<p>This is the main content of the card. It can include text, images, or any other elements you want to display.</p>
</template>
<template #footer>
<LxFlex>
<LxButton label="Action 1" variant="primary" />
<LxButton label="Action 2" variant="accent" />
</LxFlex>
</template>
</LxCard>
</LxFlex>Card (w/ header and footer background colours)
Card Title
This is the main content of the card. It can include text, images, or any other elements you want to display.
Show code
<LxFlex class="lx-padding-y--md">
<LxCard
headerBackgroundColour="primary"
contentBackgroundColour="surface"
footerBackgroundColour="success"
>
<template #header>
<h2 style="line-height: 1.1; margin: 0; padding: 0; border: none; color: var(--lx-colour-on-primary);">Card Title</h2>
</template>
<template #default>
<p>This is the main content of the card. It can include text, images, or any other elements you want to display.</p>
</template>
<template #footer>
<LxFlex>
<LxButton label="Action 1" variant="primary" />
<LxButton label="Action 2" variant="accent" />
</LxFlex>
</template>
</LxCard>
</LxFlex>Slots
The Card component provides the following slots for customizing its content:
Slot: header
The header slot is used to define the content that appears in the card's header section. This is typically where you would place a title or any introductory information about the card's content.
Card Title
This is the main content of the card. It can include text, images, or any other elements you want to display.
Show code
<LxFlex class="lx-padding-y--md">
<LxCard>
<template #header>
<h2 style="line-height: 1.1; margin: 0; padding: 0; border: none;">Card Title</h2>
</template>
<p>This is the main content of the card. It can include text, images, or any other elements you want to display.</p>
</LxCard>
</LxFlex>Slot: default
The default slot is used to define the main content of the card. This is where you would place the primary information or elements that you want to display within the card.
This is the main content of the card. It can include text, images, or any other elements you want to display.
Show code
<LxFlex class="lx-padding-y--md">
<LxCard>
<p>This is the main content of the card. It can include text, images, or any other elements you want to display.</p>
<!--
Or you can define it using the default slot, usually when you want to include multiple other slots to make it cleaner
<template #default>
<p>This is the main content of the card. It can include text, images, or any other elements you want to display.</p>
</template>
-->
</LxCard>
</LxFlex>Slot: footer
The footer slot is used to define the content that appears in the card's footer section. This is typically where you would place actions, links, or any additional information related to the card's content.
This is the main content of the card. It can include text, images, or any other elements you want to display.
Show code
<LxFlex class="lx-padding-y--md">
<LxCard>
<p>This is the main content of the card. It can include text, images, or any other elements you want to display.</p>
<template #footer>
<LxFlex>
<LxButton label="Action 1" variant="primary" />
<LxButton label="Action 2" variant="accent" />
</LxFlex>
</template>
</LxCard>
</LxFlex>