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>
Copy to clipboard

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

large

ArrowRight

| Action icon, default is no ‘ArrowRight’, options are

Launch

ArrowRight

Download

Disabled

Email

false

light

| Set to

dark

for dark background |

Edit this page on GitHub

Components: ResourceCard

Components: Tabs