@buuug7/simplify-card

simplify card

Install

install @buuug7/simplify-card package via npm, and then import from @buuug7/simplify-card/index.css file.

npm install @buuug7/simplify-card

Demo examples

Usage

default

<div class="card" style="width: 20rem; margin-bottom: 2rem">
  <div class="header">Lorem ipsum dolor sit amet</div>
  <div class="body">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium
    architecto at dolores illum maiores nam nobis repudiandae suscipit veniam?
    Beatae blanditiis dicta error impedit nam porro quod sint, ullam?
  </div>
</div>

with header

<div class="card" style="width: 20rem; margin-bottom: 2rem">
  <div class="header">Lorem ipsum dolor sit amet</div>
  <div class="body">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium
    architecto at dolores illum maiores nam nobis repudiandae suscipit veniam?
    Beatae blanditiis dicta error impedit nam porro quod sint, ullam?
  </div>
  <div class="footer">2 days ago</div>
</div>

with img

<div class="card" style="width: 20rem; margin-bottom: 2rem">
  <div class="header with-img">
    <img src="./with-img.jpg" alt="" />
  </div>
  <div class="body">
    <h4>Lorem ipsum dolor sit amet.</h4>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium
      architecto at dolores illum maiores nam nobis repudiandae suscipit veniam?
      Beatae blanditiis dicta error impedit nam porro quod sint, ullam?
    </p>
    <div>
      <button class="btn">View</button>
    </div>
  </div>
</div>