SquareCard

The <SquareCard> component should generally be used inside of a <Row className="square-card-group"> and <Column> component. This allows us to properly space the <Column> components when they wrap on mobile.

Example

Title

im body text that is super long maybe a link goes here

helper text

Title

im body text

Title

im body text

Title

im body text

Code

components/ImageCard/ImageCard.js
<Row className="square-card-group">
  <Column colMd={4} colLg={4} noGutterSm>
    <SquareCard
      title="Title"
      href="/"
      bodyText="im body text that is super long maybe a link goes here"
      helperText="helper text"
      />
  </Column>

Props

property	propType	default	description
children	node		Optional pictogram icon
href	string		Set url for card
smallTitle	bool	`false`	Set to true to display smaller title
title	string		Card title - default is large
actionIcon	string	`ArrowRight`	Action icon, default is no ‘ArrowRight’, options are `Launch`, `ArrowRight`, `Download`, `Disabled`, `Email`
disabled	bool	`false`	Set for disabled card
className	string		Add custom class name
helperText	string		Optional helper text that appears at the bottom left corner
bodyText	string		Optional body text for card description

Edit this page on GitHub

Components: ResourceCard

Components: Tabs