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

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

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