feat(typography): complete typography

This commit is contained in:
Dmitry Nehaychik 2017-07-13 16:34:06 +03:00
parent fe96d074ef
commit c86e92a9a9
2 changed files with 94 additions and 8 deletions

View file

@ -46,7 +46,7 @@
<div class="row">
<div class="col-lg-3">
<nga-card size="small">
<nga-card size="xsmall">
<nga-card-header>Solar Energy Consumption</nga-card-header>
<nga-card-body></nga-card-body>
</nga-card>
@ -55,7 +55,7 @@
</div>
<div class="col-lg-3">
<nga-card size="small">
<nga-card size="xsmall">
<nga-card-header>Traffic Consumption</nga-card-header>
<nga-card-body></nga-card-body>
</nga-card>

View file

@ -1,9 +1,8 @@
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-md-7">
<nga-card size="large">
<nga-card size="medium">
<nga-card-header>
Used Fonts
</nga-card-header>
@ -46,7 +45,7 @@
</nga-card>
</div>
<div class="col-md-5">
<nga-card size="large">
<nga-card size="medium">
<nga-card-header>
Headings
</nga-card-header>
@ -111,7 +110,7 @@
</div>
<div class="col-md-7">
<nga-card size="medium">
<nga-card size="small">
<nga-card-header>
Article Example
</nga-card-header>
@ -137,9 +136,8 @@
<nga-card-footer></nga-card-footer>
</nga-card>
</div>
<div class="col-md-5">
<nga-card size="medium">
<nga-card size="small">
<nga-card-header>
Blockquotes
</nga-card-header>
@ -230,3 +228,91 @@
</nga-card>
</div>
</div>
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-md-7">
<nga-card size="large">
<nga-card-header>
Alerts
</nga-card-header>
<nga-card-body>
<div class="alert alert-primary" role="alert">
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
</div>
<div class="alert alert-hint" role="alert">
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
</div>
<div class="alert alert-success" role="alert">
<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
</div>
<div class="alert alert-info" role="alert">
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
</div>
<div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
</div>
</nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card>
</div>
<div class="col-md-5">
<nga-card size="large">
<nga-card-header>
Text Types
</nga-card-header>
<nga-card-body>
<h4>Highlighted text</h4>
<p class="mb-5">
Far far away, behind the word mountains, far from the countries
Vokalia and <mark>Consonantia, there live the blind texts.</mark>
</p>
<h4>Bold Text</h4>
<p class="mb-5">
Far far away, behind the word mountains, far from the countries
Vokalia and <strong>Consonantia, there live the blind texts.</strong>
</p>
<h4>Link Text</h4>
<p class="mb-5">
Far far away, behind the word mountains, far from the countries
Vokalia and <a href="http://google.com" target="_blank">Consonantia, there live the blind texts.</a>
</p>
</nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card>
</div>
</div>
</div>
<div class="col-md-3">
<nga-card size="large">
<nga-card-header>
Lists
</nga-card-header>
<nga-card-body>
<h4>Ordered List</h4>
<ol class="mb-5">
<li>Far far away, behind the word mountains</li>
<li>Far from the countries Vokalia and Consonantia</li>
<li>There live the blind texts.</li>
<li>Right at the coast of the Semantics.</li>
<li>A small river named Duden flows</li>
</ol>
<h4>Unordered List</h4>
<ul class="mb-5">
<li>Far far away, behind the word mountains</li>
<li>Far from the countries Vokalia and Consonantia</li>
<li>There live the blind texts.</li>
<li>Right at the coast of the Semantics.</li>
<li>A small river named Duden flows</li>
</ul>
</nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card>
</div>
</div>