Skip to main contentGatsby theme Carbon

ArticleCard

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

Dark article layout mockup

Explore & Create a longer title example in this space

Dark article layout mockup
subTitle

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_06.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_06.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_06.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_06.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_06.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_06.png)
</ArticleCard>
</Column>
</Row>

Props

propertypropTyperequireddefaultdescription
childrennodeUse 32x32 image as child, will display in bottom left of card
hrefstringSet url for card
titlestringCard title
subTitlestringCard smaller sub title
authorstringAuthor of article
datestringDate article published
readTimestringRead time of article
actionIconstring
launch
Action icon, default is launch, options are
Launch
,
ArrowRight
,
Download
,
Disabled
,
Email
colorstringlightSet to
dark
for dark background
disabledboolfalseSet for disabled card
classNamestringAdd custom class name