CardTitle

Card title component A brief, introductory couple of sentences about the component. This is a second sentence just so that there’s a second line in this document. Think of this a teaser for the When/How to Use section.

Examples #

With a subtitle #

In addition to a title, a Card can display a subtitle. Text to explain what’s special about this example.

Card title

Card subtitle

Light years star stuff harvesting star light citizens of distant epochs encyclopaedia galactica vastness is bearable only through love, shores of the cosmic ocean!
<DemoLayout>
	<Card>
		<CardTitle subtitle="Card subtitle">Card title</CardTitle>
		<CardBlock>
			Light years star stuff harvesting star light citizens of distant
			epochs encyclopaedia galactica vastness is bearable only through love,
			shores of the cosmic ocean!
		</CardBlock>
	</Card>
</DemoLayout>

Complex title and subtitle #

Both the title and subtitle can contain a simple string or any HTML/React elements. Text to explain what’s special about this example.

Card title
Status label

Subtitle

Light years star stuff harvesting star light citizens of distant epochs encyclopaedia galactica vastness is bearable only through love, shores of the cosmic ocean!
() => {
	const Status = createStyledComponent('span', {
		color: 'red',
		fontSize: '0.6em',

		'&:before': {
			backgroundColor: 'red',
			borderRadius: '0.8em',
			content: '""',
			display: 'inline-block',
			height: '0.8em',
			marginRight: '0.5em',
			position: 'relative',
			top: '0.1em',
			width: '0.8em'
		}
	});

	return (
		<DemoLayout>
			<Card>
				<CardTitle subtitle={<em>Subtitle</em>}>
					Card title<br />
					<Status>Status label</Status>
				</CardTitle>
				<CardBlock>
					Light years star stuff harvesting star light citizens of distant
					epochs encyclopaedia galactica vastness is bearable only through love,
					shores of the cosmic ocean!
				</CardBlock>
			</Card>
		</DemoLayout>
	);
}

Minor title #

The Card title can be rendered in a minor style. Use this style whenever placing a CardTitle immediately after a CardImage. Text to explain what’s special about this example.

Bill Murray

Card title

Light years star stuff harvesting star light citizens of distant epochs encyclopaedia galactica vastness is bearable only through love, shores of the cosmic ocean!
<DemoLayout>
	<Card>
		<CardImage src="http://fillmurray.com/1000/563" alt="Bill Murray" />
		<CardTitle minor>Card title</CardTitle>
		<CardBlock>
			Light years star stuff harvesting star light citizens of distant
			epochs encyclopaedia galactica vastness is bearable only through love,
			shores of the cosmic ocean!
		</CardBlock>
	</Card>
</DemoLayout>

With meta information #

If you provide meta information, such as a date or category, it will display above the title, which will automatically display in the minor style. Text to explain what’s special about this example.

July 24, 2017

Card title

Light years star stuff harvesting star light citizens of distant epochs encyclopaedia galactica vastness is bearable only through love, shores of the cosmic ocean!
<DemoLayout>
	<Card>
		<CardTitle meta="July 24, 2017">Card title</CardTitle>
		<CardBlock>
			Light years star stuff harvesting star light citizens of distant
			epochs encyclopaedia galactica vastness is bearable only through love,
			shores of the cosmic ocean!
		</CardBlock>
	</Card>
</DemoLayout>

CardTitle Props #

NameTypeDefaultDescription
childrenMnrlReactNoderequired

Title of the card

metastring

Information displayed above the title

minorboolean

Displays the title in a less important style

subtitleMnrlReactNode

Subtitle displayed under the title

Undocumented properties will be applied to the root element.

CardTitle Theme Variables #

These variables can be used as hooks to override this component’s style at either a global or local level. The theme referenced below is whatever theme is available from props to the instance of this component.

VariableValue
CardTitle_fontSizetheme.fontSize_h3
CardTitle_fontSize_minortheme.fontSize_h4
CardTitle_fontWeighttheme.fontWeight_semiBold
CardTitle_fontWeight_minortheme.fontWeight_bold
CardTitle_marginToptheme.spacing_single
CardSubtitle_colortheme.color_gray_80
CardSubtitle_fontSizetheme.fontSize_h5
CardSubtitle_fontWeighttheme.fontWeight_semiBold
CardSubtitle_marginToptheme.spacing_single

When/How to Use #

An explanation of when to use this component and basics about how to use it. Could also include when not to use this component, and which component should be used instead. More detailed how-to-use info is under Best Practices, below. It might be a couple of short sentences, or it could be a full paragraph or two.

Best Practices #

DO this practice

Example Link Component

Some text to explain why you should do this and when.

DON’T do this other practice

Example Link Component

Some text to explain why you should not do this.

DO this other practice

Some text to explain why you should do this and when.

DO this third practice

Example Link Component

Some text to explain why you should do this and when.

Copyright © 2017 CA
We welcome feedback and contributions on GitHub