Skip to main contentGatsby theme Carbon

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

import { Tools } from '@carbon/pictograms-react';
<Row className="square-card-group">
<SquareCard
title="A small sentence can go here in conjunction with a pictogram"
href="/"
>
<Tools aria-label="Tools" className="my-custom-class" />
</SquareCard>
<SquareCard
title="A small sentence can go here with no pictogram"
href="/"
helperText="(Optional text)"
/>
<SquareCard
title="Short title"
href="/"
bodyText="A short body paragraph describing the card could go here."
/>
<SquareCard
title="Small title here"
smallTitle
href="/"
bodyText="A short body paragraph describing the card could go here."
disabled>
<Tools aria-label="Tools" className="my-custom-class" />
</SquareCard>
<SquareCard
title="Small title here"
smallTitle
href="/"
bodyText="A short body paragraph describing the card could go here."
helperText="(Optional text)"
disabled
/>
</Row>

Props

propertypropTyperequireddefaultdescription
childrennodeOptional pictogram icon to add to bottom left corner cannot be combined with ‘helperText’
hrefstringSet url for card
smallTitlebool
false
Set to true to display smaller title
titlestringCard title - default is
large
actionIconstring
ArrowRight
Action icon, default is no ‘ArrowRight’, options are
Launch
,
ArrowRight
,
Download
,
Disabled
,
Email
disabledbool
false
Set for disabled card
classNamestringAdd custom class name
helperTextstringOptional 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
bodyTextstringOptional body text for card description
colorstring
light
Set to
dark
for dark background