Usage
Card component is a wrapper around Paper component with context styles for Card.Section
component:
Norway Fjord Adventures
On Sale
With Fjord Tours you can explore more of the magical fjord landscapes with tours and activities on and around the fjords of Norway
Card.Section
Card.Section is a special component that is used to remove Card padding from its children while other elements still have horizontal spacing. Card.Section works the following way:
- If component is a first child in Card then it has negative top, left and right margins
- If it is a last child in Card then it has negative bottom, left and right margins
- If it is in the middle then only left and right margins will be negative
Note that Card relies on mapping direct children and you cannot use fragments or others wrappers for Card.Section
:
Polymorphic Card.Section
Card.Section
is a polymorphic component component, you can change root element:
withBorder and inheritPadding props
withBorder
prop will add top and bottom border toCard.Section
depending on its position relative to other content and sectionsinheritPadding
prop will add the same left and right padding toCard.Section
as set inCard
component
Review pictures
200+ images uploaded since last visit, review them to select which one should be added to your gallery
Polymorphic component
Card is a polymorphic component component, you can change root element:
Card component props
Name | Type | Description |
---|---|---|
children * | ReactNode | Card content |
padding | number | "xs" | "sm" | "md" | "lg" | "xl" | Card padding used to offset Card.Section, use it instead of p prop |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default |
shadow | MantineShadow | Predefined box-shadow from theme.shadows (xs, sm, md, lg, xl) or any valid css box-shadow property |
withBorder | boolean | Adds border styles |