Article Preview v3
Blog post excerpt, containing a link to the article page and a preview image animated on hover.
All components are based on CodyFrame.
This component includes variations. All variations share the same SCSS/JS code. They only differ in their HTML.
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
- 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="[email protected]">
<!-- ... -->