## Card Use Card component to hold anything from images to headlines, supporting text, buttons, lists, etc. in a contained unit. Category: Data Display ### Simple Example Card component is a wrapper around Paper component with styles for CardSection component. ```python import dash_mantine_components as dmc component = dmc.Card( children=[ dmc.CardSection( dmc.Image( src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-8.png", h=160, alt="Norway", ) ), dmc.Group( [ dmc.Text("Norway Fjord Adventures", fw=500), dmc.Badge("On Sale", color="pink"), ], justify="space-between", mt="md", mb="xs", ), dmc.Text( "With Fjord Tours you can explore more of the magical fjord landscapes with tours and activities on and " "around the fjords of Norway", size="sm", c="dimmed", ), dmc.Button( "Book classic tour now", color="blue", fullWidth=True, mt="md", radius="md", ), ], withBorder=True, shadow="sm", radius="md", w=350, ) ``` ### Card Section CardSection is a special component that is used to remove Card padding from its children while other elements still have horizontal spacing. CardSection works the following way: 1. If component is a first child in Card then it has negative top, left and right margins. 2. If it is a last child in Card then it has negative bottom, left and right margins. 3. If it is in the middle then only left and right margins will be negative. ##### Border and Padding in CardSection `withBorder` property will add top and bottom border to CardSection depending on its position relative to other content and sections. `inheritPadding` property will add the same left and right padding to CardSection as set in Card component. ```python import dash_mantine_components as dmc from dash_iconify import DashIconify urls = [ "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-1.png", "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-2.png", "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-3.png", ] images = [dmc.Image(radius="sm", src=url) for url in urls] component = dmc.Card( children=[ dmc.CardSection( dmc.Group( children=[ dmc.Text("Review Pictures", fw=500), dmc.ActionIcon( DashIconify(icon="carbon:overflow-menu-horizontal"), color="gray", variant="transparent", ), ], justify="space-between", ), withBorder=True, inheritPadding=True, py="xs", ), dmc.Text( children=[ dmc.Text( "200+ images uploaded", c="blue", style={"display": "inline"}, ), " since last visit, review them to select which one should be added to your gallery", ], mt="sm", c="dimmed", size="sm", ), dmc.CardSection( dmc.Image( src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-4.png", mt="sm", ), ), dmc.CardSection( children=[ dmc.SimpleGrid(cols=3, children=[i for i in images]), ], inheritPadding=True, mt="sm", pb="md", ), ], withBorder=True, shadow="sm", radius="md", w=350, ) ``` ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. | Name | Static selector | Description | |:--------|:----------------------|:----------------------------| | root | .mantine-Card-root | Root element | | section | .mantine-Card-section | `Card.Section` root element | ### Keyword Arguments #### Card - children (a list of or a singular dash component, string or number; optional): Card content. - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - padding (number; optional): Controls `padding`, key of `theme.spacing` or any valid CSS value, `'md'` by default. - radius (number; optional): Key of `theme.radius` or any valid CSS value to set border-radius, numbers are converted to rem, `theme.defaultRadius` by default. - shadow (optional): Key of `theme.shadows` or any valid CSS value to set `box-shadow`, `none` by default. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. - withBorder (boolean; optional): Determines whether the card should have border, border color depends on color scheme, `False` by default. #### CardSection - children (a list of or a singular dash component, string or number; optional): Content. - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - inheritPadding (boolean; optional): Determines whether the section should inherit padding from the parent `Card`, `False` by default. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. - withBorder (boolean; optional): Determines whether the section should have a border, `False` by default.