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

A small sentence can go here in conjunction with a pictogram

A small sentence can go here with no pictogram

(Optional text)

Short title

A short body paragraph describing the card could go here.

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

components/SquareCard/SquareCard.js
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>
Copy to clipboard

Props

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

Edit this page on GitHub

Components: ResourceCard

Components: Tabs