Go to homepage

Projects /

Article Preview v3

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

View Demo

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">
  <!-- ... -->


Bug report & feedback

Component Github page ↗

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.