CardTitle displays a Card title and an optional subtitle. You can put CardTitle in any order in relation to other root components of Card.
Examples #
Import Syntax #
import Card, { CardTitle } from 'mineral-ui/Card';Note
Cards normally occupy the full available width of their container. The Cards here are width-constrained for illustration purposes.
Displaying Titles #
In addition to a title, a Card can display a subtitle.
Card Title
Card Subtitle
<DemoLayout> <Card> <CardTitle subtitle="Card Subtitle">Card Title</CardTitle> <CardBlock>{loremIpsum}</CardBlock> </Card> </DemoLayout>
With an Avatar #
To help communicate ownership or categorization of a Card, add
an avatar to CardTitle. The Avatar will automatically size
itself correctly whether a subtitle is also provided or not.
Card Title
Card Title
Card Subtitle
() => { const avatar = ( <Avatar> <img src="/images/avatar.svg" alt="Alt text" /> </Avatar> ); return ( <DemoLayout> <Card> <CardTitle avatar={avatar}>Card Title</CardTitle> <CardBlock>{loremIpsum}</CardBlock> </Card> <Card> <CardTitle avatar={avatar} subtitle="Card Subtitle"> Card Title </CardTitle> <CardBlock>{loremIpsum}</CardBlock> </Card> </DemoLayout> ); }
With an Actions Menu #
To display a menu of actions in CardTitle, pass a CardTitleMenu
or Dropdown to the actions prop.
Note
To help with styling and using the correct Icon, Card provides a CardTitleMenu component, as used in the example below. In addition to accepting any prop accepted by Dropdown, it also accepts triggerTitle, which is used for the Icon's title. You can import it like so:
import { CardTitleMenu } from 'mineral-ui/Card';Card Title
() => { const menuData = [ { onClick: () => { console.log('Clicked 1') }, text: 'MenuItem 1' }, { onClick: () => { console.log('Clicked 2') }, text: 'MenuItem 2' }, { divider: true }, { onClick: () => { console.log('Clicked 3') }, text: 'MenuItem 3' } ]; return ( <DemoLayout> <Card> <CardTitle actions={<CardTitleMenu data={menuData} />}>Card Title</CardTitle> <CardBlock>{loremIpsum}</CardBlock> </Card> </DemoLayout> ); }
With Secondary Text #
When you must provide information that doesn't belong to every
Card in a set, supply it as secondaryText information. The information will
display beside the title. If information is in every card in the set, or if the
secondaryText information is not brief, consider using the subtitle
prop. Note that if actions is provided, it will take
precedence.
Card Title
Secondary infoCard Title
Longer secondary info will be truncated<DemoLayout> <Card> <CardTitle secondaryText="Secondary info">Card Title</CardTitle> <CardBlock>{loremIpsum}</CardBlock> </Card> <Card> <CardTitle secondaryText="Longer secondary info will be truncated">Card Title</CardTitle> <CardBlock>{loremIpsum}</CardBlock> </Card> </DemoLayout>
Variants #
CardTitle is available in a few variants. Be sure to use the appropriate variant for your intent.
Danger Card Title
Success Card Title
Warning Card Title
Card Subtitle
<DemoLayout> <Card> <CardTitle variant="danger">Danger Card Title</CardTitle> <CardBlock>{loremIpsum}</CardBlock> </Card> <Card> <CardTitle variant="success">Success Card Title</CardTitle> <CardBlock>{loremIpsum}</CardBlock> </Card> <Card> <CardTitle variant="warning" subtitle="Card Subtitle">Warning Card Title</CardTitle> <CardBlock>{loremIpsum}</CardBlock> </Card> </DemoLayout>
Bidirectionality #
CardTitle reverses its alignment when the direction theme
variable is set to rtl (right-to-left).
عنوان البطاقة
الترجمة هنا
عنوان البطاقة
نص ثانوي<div dir="rtl"> <ThemeProvider theme={{ direction: 'rtl' }}> <DemoLayout> <Card> <CardTitle avatar={<Avatar><img src="/images/avatar.svg" alt="نص بديل" /></Avatar>} subtitle="الترجمة هنا"> عنوان البطاقة </CardTitle> <CardBlock>{loremIpsum}</CardBlock> </Card> <Card> <CardTitle secondaryText="نص ثانوي"> عنوان البطاقة </CardTitle> <CardBlock>{loremIpsum}</CardBlock> </Card> </DemoLayout> </ThemeProvider> </div>
API & Theme #
CardTitle Props #
The CardTitle component takes the following React props.
| Name | Type | Default | Description |
|---|---|---|---|
| actions | React$Node | See the Actions Menu example (will take precedence over | |
| avatar | string | React$Element<*> | Avatar image displayed beside the title | |
| children | React$Node | required | Title of Card |
| secondaryText | string | React$Element<*> | Information displayed beside the title ( | |
| subtitle | React$Node | Subtitle displayed under the title | |
| variant | 'danger' | 'success' | 'warning' | Available variants |
CardTitle Theme Variables #
These variables can be used as hooks to override this component's
style at either a
local
or global
level. The theme referenced below is whatever theme is available
from props to the instance of this component.
| Variable | Value |
|---|---|
| CardTitle_color | theme.h4_color |
| CardTitle_fontSize | theme.h4_fontSize |
| CardTitle_fontWeight | theme.h4_fontWeight |
| CardTitleAvatar_margin | theme.space_inline_sm |
| CardTitleAvatarSize | theme.size_small |
| CardTitleAvatarSize_large | theme.size_large |
| CardTitleIcon_margin | theme.space_inline_sm |
| CardTitleSecondaryText_color | theme.color_mouse |
| CardTitleSecondaryText_fontSize | theme.fontSize_mouse |
| CardTitleSecondaryText_fontWeight | theme.fontWeight_regular |
| CardSubtitle_color | theme.color_mouse |
| CardSubtitle_fontSize | theme.fontSize_mouse |
| CardSubtitle_fontWeight | theme.fontWeight_regular |
| CardSubtitle_marginTop | theme.space_stack_sm |
Usage #
Best Practices #
Use "Title Case" within Card titles and subtitles.
Title Here
Subtitle Here
Use secondaryText for brief information that doesn't
belong to every Card in a set. If information is in every Card in the set, or
if the secondaryText information is not brief, consider using the
subtitle prop instead.
Card Title
12 KbUse actions to provide non-primary actions for a Card.
If you need to provide 2–3 primary actions, use CardActions.
Card Title
Don't use CardTitle outside of Card, for which it was designed.