c66ab85940
- updated docs assets - added yarn install info - overhauled color parts in layout.md - added components/main-sidebar, /control-sidebar & /cards - updated title in components/main-header - created blank pages javascript/control-sidebar& /push-menu to ensure docs generation - renamed Sidebar to Main Sidebar
7.4 KiB
7.4 KiB
layout, title
| layout | title |
|---|---|
| page | Cards Component |
The card component is the most widely used component through out this template. You can use it for anything from displaying charts to just blocks of text. It comes in many different styles that we will explore below.
Default Card Markup
{: .text-bold .text-dark .mt-5}
Default Card Example
Label
The body of the card
The footer of the card
<div class="card">
<div class="card-header">
<h3 class="card-title">Default Card Example</h3>
<div class="card-tools">
<!-- Buttons, labels, and many other things can be placed here! -->
<!-- Here is a label for example -->
<span class="badge badge-primary">Label</span>
</div>
<!-- /.card-tools -->
</div>
<!-- /.card-header -->
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
<div class="card-footer">
The footer of the card
</div>
<!-- /.card-footer -->
</div>
<!-- /.card -->
{: .max-height-300}
Card Variants
{: .text-bold .text-dark .mt-5} You can change the style of the box by adding any of the contextual classes.
Default Card Example
The body of the card
The footer of the card
Primary Card Example
The body of the card
The footer of the card
Secondary Card Example
The body of the card
The footer of the card
Success Card Example
The body of the card
The footer of the card
Info Card Example
The body of the card
The footer of the card
Warning Card Example
The body of the card
The footer of the card
Danger Card Example
The body of the card
The footer of the card
Dark Card Example
The body of the card
The footer of the card
<div class="card">...</div>
<div class="card card-primary">...</div>
<div class="card card-secondary">...</div>
<div class="card card-success">...</div>
<div class="card card-info">...</div>
<div class="card card-warning">...</div>
<div class="card card-danger">...</div>
<div class="card card-dark">...</div>
Default Card Example
The body of the card
The footer of the card
Primary Card Example
The body of the card
The footer of the card
Secondary Card Example
The body of the card
The footer of the card
Success Card Example
The body of the card
The footer of the card
Info Card Example
The body of the card
The footer of the card
Warning Card Example
The body of the card
The footer of the card
Danger Card Example
The body of the card
The footer of the card
Dark Card Example
The body of the card
The footer of the card
<div class="card card-outline card-primary">...</div>
<div class="card card-outline card-secondary">...</div>
<div class="card card-outline card-success">...</div>
<div class="card card-outline card-info">...</div>
<div class="card card-outline card-warning">...</div>
<div class="card card-outline card-danger">...</div>
<div class="card card-outline card-dark">...</div>