mn-card

a card component to display content

Usage no npm install needed!

<script type="module">
  import mnCard from 'https://cdn.skypack.dev/mn-card';
</script>

A card component with a minimalist design

See the demo

npm install --save mn-card

And bundle dependencies and main files in dist/ with your preferred tool.

Just use the class .mn-card in a element. To has padding, use the class .padding

<div class="mn-card padding">
  <h2>Title</h2>
  <p>lorem ipsum</p>
</div>

If you want padding only in header, and not in content, use the class .padding-title

<div class="mn-card padding-title">
  <h2>Title</h2>
  <p>lorem ipsum</p>
</div>

Too works if you use a <header> wraping the tags h2, h3, etc.