Card

Card 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 #

Basic card #

Note: Cards normally occupy the full available width of their container. The Cards here are width-constrained for illustration purposes. Text to explain what’s special about this example. Text to explain what’s special about this example. Text to explain what’s special about this example.

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>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>

Arbitrary children #

A Card will render any children. For best results, please make sure your content matches the top/bottom margin and left/right padding of the other Card* components. Text to explain what’s special about this example.

Card title

<DemoLayout>
	<Card>
		<CardTitle>Card title</CardTitle>
		<CustomContent>
			<Button fullWidth>Button</Button>
		</CustomContent>
	</Card>
</DemoLayout>

Clickable #

If an onClick function is provided, the entire card becomes clickable and keyboard actionable. Text to explain what’s special about this example. Text to explain what’s special about this example. Text to explain what’s special about this example.

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 onClick={event => console.log(event)}>
		<CardTitle>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>

Order of sections #

The sections of Card are designed to work in any order. Text to explain what’s special about this example.

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!

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!

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>

	<Card>
		<CardTitle>Card title</CardTitle>
		<CardImage src="http://fillmurray.com/1001/563" alt="Bill Murray" />
		<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>

	<Card>
		<CardTitle>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>
		<CardImage src="http://fillmurray.com/1002/563" alt="Bill Murray" />
	</Card>
</DemoLayout>

Card Props #

Name	Type	Default	Description
children	MnrlReactNode	required	Content of the card. Can be anything, but see CardBlock, CardImage, and CardTitle.
onClick	(event: Object) => void		Called with the click event

Undocumented properties will be applied to the root element.

Card 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.

Variable	Value
Card_backgroundColor	theme.color_white
Card_borderRadius	theme.borderRadius_1
Card_boxShadow	theme.shadow_1
Card_boxShadow_focus	0 0 0 2px color_theme_100, shadow_1
Card_paddingBottom	theme.spacing_double
CardRow_margin	theme.spacing_double
CardRow_padding	theme.spacing_triple

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.

We welcome feedback and contributions on GitHub