Article Preview v3

Blog post excerpt, containing a link to the article page and a preview image animated on hover.

How to

The Article Preview v3 component is used to display an article excerpt (metadata + title + introduction) and a preview image animated on hover. It links to the main article page.

The animated preview image can be customized by adding the following data- attributes to the .js-story-v3 element:

• data-story-img-src: set the image src value
• data-story-img-align: [left/right] set the image alignment
• data-story-img-offset-x: set the (horizontal) gap between the image and the article border (use px or %)
• data-story-img-width: set the image width (use px or %)
• data-story-img-class: use to pass a list of classes to the element

<a class="story-v3 padding-y-md js-story-v3" href="#0" data-story-img-src="assets/img/article-preview-v3-img-1.jpg" data-story-img-align="right" data-story-img-offset-x="60px" data-story-img-width="30%" data-story-img-class="display@lg">
  <!-- ... -->
</a>

Categories

• Blog > Card
• Effects > Text
• Typography

Bug report & feedback

Component Github page ↗