roobie
Version:
A collection of CSS classes to keep you writing business logic in your HTML. Easily build maintainable web & mobile applications with 100s of pre-built CSS classes at your fingertips.
65 lines (61 loc) • 1.83 kB
Markdown
# Card
Container of styled content.
## Basic
<div class="card" style="width: 250px; height: 250px;">
<h2 class="card-title">Title</h2>
<span class="card-subtitle">Subtitle</span>
<div class="card-content">
This is the content.
</div>
</div>
```html
<div class="card" style="width: 250px; height: 250px;">
<h2 class="card-title">Title</h2>
<span class="card-subtitle">Subtitle</span>
<div class="card-content">
This is the content.
</div>
</div>
```
## Image
<div class="card" style="width: 350px;">
<h2 class="card-title">Image</h2>
<span class="card-subtitle">By Artist Name</span>
<div class="card-content">
<img class="br bg2" width="400" height="200">
</div>
</div>
```html
<div class="card" style="width: 350px;">
<h2 class="card-title">Image</h2>
<span class="card-subtitle">By Artist Name</span>
<div class="card-content">
<img class="br bg2" width="400" height="200">
</div>
</div>
```
## Actions
<div class="card" style="width: 350px; height: 250px;">
<h2 class="card-title">Title</h2>
<span class="card-subtitle">Subtitle</span>
<div class="card-content">
This is the content.
</div>
<div class="card-actions">
<button type="button" class="btn btn-secondary">Purchase</button>
<button type="button" class="btn btn-primary">Share</button>
</div>
</div>
```html
<div class="card" style="width: 350px; height: 250px;">
<h2 class="card-title">Title</h2>
<span class="card-subtitle">Subtitle</span>
<div class="card-content">
This is the content.
</div>
<div class="card-actions">
<button type="button" class="btn btn-secondary">Purchase</button>
<button type="button" class="btn btn-primary">Share</button>
</div>
</div>
```