# mn-card

> a card component to display content

Latest version **0.0.3** (published 2017-01-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install mn-card
pnpm add mn-card
yarn add mn-card
bun add mn-card
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2017-01-31 |
| First published | 2017-01-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Darlan Mendonça |
| Maintainers | darlanmendonca |
| Keywords | minimalist, webcomponent, card, flat |

## Links

- npm: https://www.npmjs.com/package/mn-card
- Repository: https://github.com/minimalist-components/mn-card
- Homepage: https://minimalist-components.github.io/mn-card/
- Issues: https://github.com/minimalist-components/mn-card/issues
- npm.io page: https://npm.io/package/mn-card

## Recent versions

- 0.0.3 (latest) — 2017-01-31
- 0.0.1 — 2017-01-31

## README

[![npm version](https://badge.fury.io/js/mn-card.svg)](https://badge.fury.io/js/mn-card)
[![Dependency Status](https://gemnasium.com/badges/github.com/minimalist-components/mn-card.svg)](https://gemnasium.com/github.com/minimalist-components/mn-card)
[![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg?v=103)](https://opensource.org/licenses/mit-license.php)   

# mn-card

A card component with a minimalist design

<a href="https://minimalist-components.github.io/mn-card/">
<img src="https://raw.githubusercontent.com/minimalist-components/mn-card/master/preview.png">
</a>

See the [demo](https://minimalist-components.github.io/mn-card/)

### Install

```sh
npm install --save mn-card
```

And bundle dependencies and main files in [dist/](https://github.com/minimalist-components/mn-card/tree/master/dist) with your preferred tool.


### Usage

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

```html
<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`

```html
<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.

---
_Source: https://npm.io/package/mn-card · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._