Profile card

This is a profile card design template.

Basic

Setting profile card horizontally by the window width (media query).

data-horizontal-min-width="600": When the width >= 600px, dispaly horizontally
data-horizontal-min-width="768": When the width >= 768px, dispaly horizontally
data-horizontal-min-width="896": When the width >= 896px, dispaly horizontally
data-horizontal-min-width="1024": When the width >= 1024px, dispaly horizontally
data-horizontal-min-width="1200": When the width >= 1200px, dispaly horizontally

When set data-horizontal-min-width="768".

HTML

<div class="profile-card" data-horizontal-min-width="768">
  <picture class="header-img">
    <source srcset="/img/kakeru_profile_header_1.webp" type="image/webp">
    <img src="/img/kakeru_profile_header_1.jpg" alt="Kakeru profile" height="150" width="150" loading="lazy">
  </picture>
  <div class="content">
    <p class="name">Kakeru Sato</p>
    <p class="profession">Software Developer</p>
    <p class="bio">Full stack engineer</p>
    <div class="sns">
      <a class="icon-link color-sns-twitter" href="https://twitter.com/noknow80094321" target="_blank">
        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><use xlink:href="/img/icon/icons.svg#twitter"/></svg>
      </a>
      <a class="icon-link color-sns-instagram" href="https://www.instagram.com/noknow.info/" target="_blank">
        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><use xlink:href="/img/icon/icons.svg#instagram"/></svg>
      </a>
    </div>
  </div>
</div>

Install

npm

Console

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

Import

CSS

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