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

subTitle

Explore & Create

Josh Black

Read time: 5 min

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="/">
Copy to clipboard

Props

| property | propType | required | 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

dark

Edit this page on GitHub

Components: ArtDirection

Components: Aside