Components

CardBlock

CardBlock is used to normalize font sizes for content and to provide consistent margins and padding.

Examples #

Import Syntax #

import Card, { CardBlock } from 'mineral-ui/Card';

Note

Cards normally occupy the full available width of their container. The Cards here are width-constrained for illustration purposes.

Provide Consistent Spacing #

CardBlock provides uniform spacing (highlighted here in light blue), relative to the other Card components, around its content.

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi. 
<DemoLayout>
  <Card>
    <CardTitle>Card Title</CardTitle>
    <CardBlock>{loremIpsum}</CardBlock>
  </Card>
</DemoLayout>

Arbitrary Children #

A CardBlock will render any children.

Card Title

<DemoLayout>
  <Card>
    <CardTitle>Card Title</CardTitle>
    <CardBlock>{customContent}</CardBlock>
  </Card>
</DemoLayout>

API & Theme #

CardBlock Props #

The CardBlock component takes the following React props.

NameTypeDefaultDescription
childrenReact$Noderequired

Contents of CardBlock

Undocumented properties, including as and css, will be applied to the root element.

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

VariableValue
CardBlock_fontSizetheme.fontSize_ui
CardBlock_lineHeighttheme.lineHeight_prose

Usage #

When/How to Use #

CardBlock is used to help lay out content that's not a title or an image in the body of the Card.

Try not to put inline links in your content. Create purposeful calls to action with Buttons using CardActions.

Best Practices #

Don't use CardBlock outside of Card, for which it was designed.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.