🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Article Preview v3

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

Copy: View demo

Dependencies

All components are based on CodyFrame.

This component includes variations. All variations share the same SCSS/JS code. They only differ in their HTML.

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="[email protected]">
  <!-- ... -->
</a>

✅ Project duplicated

✅ Project created

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