“Article Card” Component

Design: zeplin.

The article card features the hero image of the UX Daily article, with the article title laid over the image. The hero image is cropped and centered to fit the card’s size.

Small Card

Small Card take full width in small screen, 4 columns in medium screen and 3 in large screen. Title is in kilo type font.

Large Card

Large Card take full width in small screen, 8 columns in medium screen and 6 in large screen. Title is in mega type font.

Usage

@include('components.cards.article', ['article' => $article])
@include('components.cards.article', ['article' => $article, 'large' => true])

Props

• article (required)
  App\Models\Publication\Article

  Article instance to display.

• large
  bool

  Becomes large card if true is passed.

  Default Value: false