SquareCard
The <SquareCard>
component should generally be used inside of a
<Row className="square-card-group">
component. This allows us to properly
space the columns components when they wrap on mobile.
Example
Small title here
A short body paragraph describing the card could go here.
Small title here
A short body paragraph describing the card could go here.
(Optional text)
Code
Props
property | propType | required | default | description |
---|---|---|---|---|
children | node | Optional pictogram icon to add to bottom left corner cannot be combined with ‘helperText’ | ||
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 cannot be combined with ‘children’ text. This is only meant for a date or a category name | ||
bodyText | string | Optional body text for card description | ||
color | string | light | Set to dark for dark background |