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

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