Gatsby Theme Carbon

The <ArticleCard> component should generally be used inside of a <Row> and <Column> with a noGutterMdLeft prop on the <Column> to allow it to “hang” to the left.

Example

subTitle

Title

Josh Black

April 29, 2019

Read time: 5 min

Explore & Create

Josh Black

Explore & Create a longer title example in this space

Explore & Create

Josh Black

Read time: 5 min

Explore & Create

Josh Black

April 29, 2019

Read time: 5 min

Code

<Row>
  <Column colMd={4} colLg={4} noGutterMdLeft>
    <ArticleCard
      subTitle="subTitle"
      title="Title"
      author="Josh Black"
      date="April 29, 2019"
      readTime="Read time: 5 min"
      href="/"
    >
      ![Dark article layout mockup](/images/Article_05.png)
    </ArticleCard>
  </Column>
  <Column colMd={4} colLg={4} noGutterMdLeft>
    <ArticleCard
      title="Explore & Create"
      author="Josh Black"
      href="https://www.ibm.com"
      actionIcon="arrowRight"
    >
      ![Dark article layout mockup](/images/Article_05.png)
    </ArticleCard>
  </Column>
  <Column colMd={4} colLg={4} noGutterMdLeft>
    <ArticleCard
      title="Explore & Create a longer title example in this space"
      href="https://www.ibm.com"
      disabled
    >
      ![Dark article layout mockup](/images/Article_05.png)
    </ArticleCard>
  </Column>
  <Column colMd={4} colLg={4} noGutterMdLeft>
    <ArticleCard
      title="Explore & Create"
      color="dark"
      href="https://www.ibm.com"
      actionIcon="download"
    >
      ![Dark article layout mockup](/images/Article_05.png)
    </ArticleCard>
  </Column>
  <Column colMd={4} colLg={4} noGutterMdLeft>
    <ArticleCard
      title="Explore & Create"
      author="Josh Black"
      readTime="Read time: 5 min"
      color="dark"
      href="https://www.ibm.com"
      actionIcon="email"
    >
      ![Dark article layout mockup](/images/Article_05.png)
    </ArticleCard>
  </Column>
  <Column colMd={4} colLg={4} noGutterMdLeft>
    <ArticleCard
      title="Explore & Create"
      author="Josh Black"
      date="April 29, 2019"
      readTime="Read time: 5 min"
      color="dark"
      disabled
    >
      ![Dark article layout mockup](/images/Article_05.png)
    </ArticleCard>
  </Column>
</Row>

Props

property	propType	default	description
children	node		Use 32x32 image as child, will display in bottom left of card
href	string		Set url for card
title	string		Card title
subTitle	string		Card smaller sub title
author	string		Author of article
date	string		Date article published
readTime	string		Read time of article
actionIcon	string	`launch`	Action icon, default is launch, options are `Launch`, `ArrowRight`, `Download`, `Disabled`, `Email`
color	string	light	Set to `dark` for dark background
disabled	bool	false	Set for disabled card
className	string		Add custom class name

Edit this page on GitHub

Components: ResourceCard

Components: FeatureCard