The flex alignment of the card
Card
v2.4Card is a flexible component used to group and display content in a clear and concise format.
Props#
alignRequired
alignRequiredDescription
Type
ResponsiveValue<AlignItems>directionRequired
directionRequiredDescription
The flex direction of the card
Type
ResponsiveValue<FlexDirection>justifyRequired
justifyRequiredDescription
The flex distribution of the card
Type
ResponsiveValue<JustifyContent>colorScheme
colorSchemeDescription
The visual color appearance of the component
Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"size
sizeDescription
The size of the Card
Type
"sm" | "md" | "lg"Default
mdvariant
variantDescription
The variant of the Card
Type
"elevated" | "outline" | "filled" | "unstyled"Default
elevatedProps#
alignRequired
alignRequiredDescription
The flex alignment of the card
Type
ResponsiveValue<AlignItems>directionRequired
directionRequiredDescription
The flex direction of the card
Type
ResponsiveValue<FlexDirection>justifyRequired
justifyRequiredDescription
The flex distribution of the card
Type
ResponsiveValue<JustifyContent>colorScheme
colorSchemeDescription
The visual color appearance of the component
Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"size
sizeDescription
The size of the Card
Type
"sm" | "md" | "lg"Default
mdvariant
variantDescription
The variant of the Card
Type
"elevated" | "outline" | "filled" | "unstyled"Default
elevatedThe Card component gets its style from the default Chakra UI theme. However, in some scenarios, you might need to customize its theming to match your design requirements.
To customize the theme for Card, you would need to modify the base or default
styles and modifier styles that alter its size or visual style. You would then
need to apply specific styles to each part, size or variant of the Card.
Anatomy#
The Card component is a multipart component and consists of the following
parts:
- A:
container - B:
header - C:
body - D:
footer
Theming properties#
The properties that affect the theming of the Card component are:
variant: The visual variant of the card. It defaults toelevated.size: The size of the card. It defaults tomd.
Theming utilities#
Theming utilities are functions that are required to create the style configs and style objects during theming.
createMultiStyleConfigHelpers: a function that returns a set of utilities for creating style configs for a multipart component (definePartsStyleanddefineMultiStyleConfig).definePartsStyle: a function used to create multipart style objects.defineMultiStyleConfig: a function used to define the style configuration for a multipart component.
Customizing the default theme#
Let's say we want to customize the default card theme by changing the styles of
the container, header, body and footer. Here's what that will look like:
import { cardAnatomy } from '@chakra-ui/anatomy'import { createMultiStyleConfigHelpers } from '@fluidtruck/core'const { definePartsStyle, defineMultiStyleConfig } =createMultiStyleConfigHelpers(cardAnatomy.keys)const baseStyle = definePartsStyle({// define the part you're going to stylecontainer: {backgroundColor: '#e7e7e7',},header: {paddingBottom: '2px',},body: {paddingTop: '2px',},footer: {paddingTop: '2px',},})const sizes = {md: definePartsStyle({container: {borderRadius: '0px',},}),}export const cardTheme = defineMultiStyleConfig({ baseStyle, sizes })
After customizing the card theme, we then import it into our theme file and add
it in the components property:
import { extendTheme } from '@fluidtruck/core'import { cardTheme } from './components/Card'const theme = extendTheme({components: {Card: cardTheme,},})export default theme
This is a crucial step to make sure that any changes we make to the card theme are applied.
Adding a custom size#
Card comes in sm, md and lg sizes but let's assume we want to include an
extra large card size. Here's how we can do that:
import { cardAnatomy } from '@chakra-ui/anatomy'import { createMultiStyleConfigHelpers, defineStyle } from '@fluidtruck/core'const { definePartsStyle, defineMultiStyleConfig } =createMultiStyleConfigHelpers(cardAnatomy.keys)// define custom styles for xl sizeconst sizes = {xl: definePartsStyle({container: {borderRadius: "36px",padding: "40px"}})};// export sizes in the component themeexport const cardTheme = defineMultiStyleConfig({ sizes });// now we can use the new `xl` size<Card size="xl" ... />
Adding a custom variant#
You can add a custom variant to Card by specifying the name of your variant
and giving specific styles to the necessary parts.
import { cardAnatomy } from '@chakra-ui/anatomy'import { createMultiStyleConfigHelpers } from '@fluidtruck/core'const { definePartsStyle, defineMultiStyleConfig } =createMultiStyleConfigHelpers(cardAnatomy.keys)// define custom styles for funky variantconst variants = {funky: definePartsStyle({container: {borderColor: "red",borderWidth: "3px"}})};// export variants in the component themeexport const cardTheme = defineMultiStyleConfig({ variants });// now we can use the new funky variant<Card variant="funky" ... />
Changing the default properties#
To set the default size and variant of every card in our app, we define the defaultProps and set the default size and variant.
import { cardAnatomy } from '@chakra-ui/anatomy'import { createMultiStyleConfigHelpers, defineStyle } from '@fluidtruck/core'const { definePartsStyle, defineMultiStyleConfig } =createMultiStyleConfigHelpers(cardAnatomy.keys)// define which sizes and variants are applied by defaultconst defaultProps = {// in this example, we will set the default size and variantsize: 'xl',variant: 'funky',}// export the default properties in the component themeexport const cardTheme = defineMultiStyleConfig({ defaultProps })
Every time you add anything new to the theme, you need to run the CLI command to get proper autocomplete in your IDE. You can learn more about the CLI tool here.