We are living as nomad in Mexico !!

Article card

This is an article card design template.

Example

Basic


HTML 
<ul class="article-card">
  <li class="item">
    <a class="link" href="">
      <picture class="img-box">
        <source srcset="/img/project/noknow_web_design/beach_1.webp">
        <img class="img" src="/img/project/noknow_web_design/beach_1.jpg" loading="lazy">
      </picture>
      <div class="content-box">
        <h3 class="title">TITLE</h3>
        <p class="excerpt">EXCERPT</p>
        <time class="date" datetime="YYYY-MM-DD">YYYY-MM-DD</time>
      </div>
    </a>
  </li>
  <li class="item">
    <a class="link" href="">
      <picture class="img-box">
        <source srcset="/img/project/noknow_web_design/beach_2.webp">
        <img class="img" src="/img/project/noknow_web_design/beach_2.jpg" loading="lazy">
      </picture>
      <div class="content-box">
        <h3 class="title">TITLETITLETITLETITLETITLE</h3>
        <p class="excerpt">EXCERPTEXCERPTEXCERPTEXCERPTEXCERPT</p>
        <time class="date" datetime="YYYY-MM-DD">YYYY-MM-DD</time>
      </div>
    </a>
  </li>
  <li class="item">
    <a class="link" href="">
      <picture class="img-box">
        <source srcset="/img/project/noknow_web_design/beach_3.webp">
        <img class="img" src="/img/project/noknow_web_design/beach_3.jpg" loading="lazy">
      </picture>
      <div class="content-box">
        <h3 class="title">TITLE</h3>
        <p class="excerpt">EXCERPT</p>
        <time class="date" datetime="YYYY-MM-DD">YYYY-MM-DD</time>
      </div>
    </a>
  </li>
  <li class="item">
    <a class="link" href="">
      <picture class="img-box">
        <source srcset="/img/project/noknow_web_design/beach_4.webp">
        <img class="img" src="/img/project/noknow_web_design/beach_4.jpg" loading="lazy">
      </picture>
      <div class="content-box">
        <h3 class="title">TITLE</h3>
        <p class="excerpt">EXCERPT</p>
        <time class="date" datetime="YYYY-MM-DD">YYYY-MM-DD</time>
      </div>
    </a>
  </li>
</ul>

Omission after n line

Add the data attribute as below.

  • title: data-max-line-in-title="n"
  • excerpt: data-max-line-in-excerpt="n"

When omitting after line 2


HTML 
<ul class="article-card important" data-max-line-in-title="2" data-max-line-in-excerpt="2">
  ...
</ul>

Specify number of columns by window width (media query)

You can add the following data attributes.

  • When more than 600px, the column would be 1: data-max-cols-min-width-600="1"
  • When more than 896px, the column would be 2: data-max-cols-min-width-896="2"
  • When more than 1200px, the column would be 3: data-max-cols-min-width-1200="3"
  • When more than 1200px, the column would be 2: data-max-cols-min-width-1200="2"

When setting data-max-cols-min-width-600="1"


HTML 
<ul class="article-card important" data-max-line-in-title="2" data-max-cols-min-width-600="1">
  ...
</ul>

Install

npm

Console 
> npm i @noknow/web-design-article-card

Import

CSS 
@import '/YOUR_PROJECT/node_modules/@noknow/web-design-article-card/style.css';

JavaScript 
import { ArticleCard } from '/YOUR_PROJECT/node_modules/@noknow/web-design-article-card/index.js';