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

components/ArticleCard/ArticleCard.js
<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="/"

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