Horizontal card

This is a horizontal card design template.

Basic

When the entire card is a link

TITLE

YYYY-MM-DD TAG1 TAG2

texttexttexttexttexttexttexttexttexttexttexttexttext...

HTML

<ul class="horizontal-card">
  <li class="item">
    <a class="link" href="">
      <picture class="img-box">
        <source srcset="/img/project/noknow_web_design/beach_1.webp" type="image/webp">
        <img class="img" src="/img/project/noknow_web_design/beach_1.png" alt="" loading="lazy">
      </picture>
      <div class="content-box">
        <h3 class="title">TITLE</h3>
        <div class="attr-box">
          <time class="date" datetime="yyyy-mm-dd">YYYY-MM-DD</time>
          <span class="tag">TAG1</span>
          <span class="tag">TAG2</span>
        </div>
        <p class="excerpt">texttexttexttexttexttexttexttexttexttexttexttexttext...</p>
      </div>
    </a>
  </li>
</ul>

When only the card title is a link

TITLE

YYYY-MM-DD TAG1 TAG2

texttexttexttexttexttexttexttexttexttexttexttexttext...

HTML

<ul class="horizontal-card">
  <li class="item">
      <picture class="img-box">
        <source srcset="/img/project/noknow_web_design/beach_1.webp" type="image/webp">
        <img class="img" src="/img/project/noknow_web_design/beach_1.png" alt="" loading="lazy">
      </picture>
      <div class="content-box">
        <a class="link" href="">
          <h3 class="title">TITLE</h3>
        </a>
      <div class="attr-box">
        <time class="date" datetime="yyyy-mm-dd">YYYY-MM-DD</time>
        <span class="tag">TAG1</span>
        <span class="tag">TAG2</span>
      </div>
      <p class="excerpt">texttexttexttexttexttexttexttexttexttexttexttexttext...</p>
    </div>
  </li>
</ul>

Install

npm

Console

> npm i @noknow/web-design-horizontal-card

Import

CSS

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