Angular Bootstrap panels
While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.
Panels are similar to cards (often they use the same classes), but they don't include media.
Basic example
Panel title
Some quick example text to build on the card title and make up the bulk of the card's content.
<mdb-card>
<mdb-card-body>
<mdb-card-title>
<h4>Panel title</h4>
</mdb-card-title>
<mdb-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</mdb-card-text>
<div class="flex-row">
<a class="card-link">Card link</a>
<a class="card-link">Another link</a>
</div>
</mdb-card-body>
</mdb-card>
Background variants
Panels and cards include their variant classes for quickly changing the background-color
of a card.
Darker colors require the use of .white-text
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<div class="row">
<div class="col-md-6">
<!--Card Primary-->
<div class="card indigo text-center z-depth-2">
<div class="card-body">
<p class="white-text mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
erat a ante.</p>
</div>
</div>
<!--/.Card Primary-->
<br>
<!--Card Danger-->
<div class="card pink lighten-2 text-center z-depth-2">
<div class="card-body">
<p class="white-text mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
erat a ante.</p>
</div>
</div>
<!--/.Card Danger-->
<br>
<!--Card Success-->
<div class="card info-color text-center z-depth-2">
<div class="card-body">
<p class="white-text mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
erat a ante.</p>
</div>
</div>
<!--/.Card Success-->
</div>
<div class="col-md-6">
<!--Card Warning-->
<div class="card red lighten-1 text-center z-depth-2">
<div class="card-body">
<p class="white-text mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
erat a ante.</p>
</div>
</div>
<!--/.Card Warning-->
<br>
<!--Card Info-->
<div class="card success-color text-center z-depth-2">
<div class="card-body">
<p class="white-text mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
erat a ante.</p>
</div>
</div>
<!--/.Card Info-->
<br>
<!--Card Default-->
<div class="card mdb-color lighten-2 text-center z-depth-2">
<div class="card-body">
<p class="white-text mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
erat a ante.</p>
</div>
</div>
<!--/.Card Default-->
</div>
</div>
Jumbotron
A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
It uses utility classes for typography and spacing to space content out within the larger container.
Learn more
<div class="jumbotron">
<h2 class="h1 h1-responsive">Hello, world!</h2>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention
to featured content or information.</p>
<hr class="my-2">
<p>It uses utility classes for typography and spacing to space content out within the larger
container.
</p>
<a class="btn btn-primary btn-lg waves-light" role="button" mdbWavesEffect>Learn more</a>
</div>
API Reference:
In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.
API Reference for MDB Angular Panels:
// For MDB Angular Pro
import { WavesModule, ButtonsModule, CardsFreeModule } from 'ng-uikit-pro-standard'
// For MDB Angular Free
import { WavesModule, ButtonsModule, CardsFreeModule } from 'angular-bootstrap-md'