mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-31 14:48:49 +01:00
typography stylefix
This commit is contained in:
nixa
parent
89c541f6c6
commit
2603b8a9d0
1 changed files with 180 additions and 176 deletions
|
|
@ -1,41 +1,43 @@
|
|||
<div class="typography-document-samples row-fluid">
|
||||
<div class="col-xlg-3 col-lg-6 col-md-6 col-sm-6 col-xs-12 typography-widget">
|
||||
<div class="widgets">
|
||||
|
||||
<ba-card title="Text Size" baCardClass="with-scroll heading-widget">
|
||||
<div class="typography-document-samples row">
|
||||
<div class="col-xlg-3 col-lg-6 col-md-6 col-sm-6 col-xs-12 typography-widget">
|
||||
|
||||
<div class="section-block">
|
||||
<h1>H1. Heading 1</h1>
|
||||
<ba-card title="Text Size" baCardClass="with-scroll heading-widget">
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
|
||||
vestibulum eleifend pellentesque.</p>
|
||||
</div>
|
||||
<div class="section-block">
|
||||
<h2>H2. Heading 2</h2>
|
||||
<div class="section-block">
|
||||
<h1>H1. Heading 1</h1>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
|
||||
vestibulum eleifend pellentesque.</p>
|
||||
</div>
|
||||
<div class="section-block">
|
||||
<h3>H3. Heading 3</h3>
|
||||
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
|
||||
vestibulum eleifend pellentesque.</p>
|
||||
</div>
|
||||
<div class="section-block">
|
||||
<h2>H2. Heading 2</h2>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
|
||||
vestibulum eleifend pellentesque.</p>
|
||||
</div>
|
||||
<div class="section-block">
|
||||
<h4>H4. Heading 4</h4>
|
||||
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
|
||||
vestibulum eleifend pellentesque.</p>
|
||||
</div>
|
||||
<div class="section-block">
|
||||
<h3>H3. Heading 3</h3>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra,.</p>
|
||||
</div>
|
||||
<div class="section-block">
|
||||
<h5>H5. Heading 5</h5>
|
||||
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
|
||||
vestibulum eleifend pellentesque.</p>
|
||||
</div>
|
||||
<div class="section-block">
|
||||
<h4>H4. Heading 4</h4>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra.</p>
|
||||
</div>
|
||||
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra,.</p>
|
||||
</div>
|
||||
<div class="section-block">
|
||||
<h5>H5. Heading 5</h5>
|
||||
|
||||
</ba-card>
|
||||
</div>
|
||||
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra.</p>
|
||||
</div>
|
||||
|
||||
<div class="col-xlg-3 col-lg-6 col-md-6 col-sm-6 col-xs-12 typography-widget">
|
||||
</ba-card>
|
||||
</div>
|
||||
|
||||
<div class="col-xlg-3 col-lg-6 col-md-6 col-sm-6 col-xs-12 typography-widget">
|
||||
|
||||
<ba-card title="Some more text" baCardClass="with-scroll more-text-widget">
|
||||
|
||||
|
|
@ -69,170 +71,172 @@
|
|||
</p>
|
||||
</div>
|
||||
<div class="section-block small-text">
|
||||
<p>Secondary text. Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar,</p>
|
||||
<p>Secondary text. Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar,</p>
|
||||
|
||||
<p>lacinia scelerisque pharetra, placerat vestibulum eleifend</p>
|
||||
<p>lacinia scelerisque pharetra, placerat vestibulum eleifend</p>
|
||||
|
||||
<p> pellentesque, mi nam.</p>
|
||||
</div>
|
||||
<p> pellentesque, mi nam.</p>
|
||||
</div>
|
||||
|
||||
</ba-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xlg-3 col-lg-6 col-md-6 col-sm-6 col-xs-12 typography-widget">
|
||||
<div class="col-xlg-3 col-lg-6 col-md-6 col-sm-6 col-xs-12 typography-widget">
|
||||
|
||||
<ba-card title="Lists" baCardClass="with-scroll lists-widget">
|
||||
<ba-card title="Lists" baCardClass="with-scroll lists-widget">
|
||||
|
||||
<div class="section-block">
|
||||
<h5 class="list-header">Unordered list:</h5>
|
||||
<ul class="blur">
|
||||
<li>Lorem ipsum dolor sit amet</li>
|
||||
<li>Сlacinia scelerisque pharetra
|
||||
<ul>
|
||||
<li>Dui rhoncus quisque integer lorem
|
||||
<ul>
|
||||
<li>Libero iaculis vestibulum eu vitae</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Nisl lectus nibh habitasse suspendisse ut</li>
|
||||
<li><span>Posuere cursus hac, vestibulum wisi nulla bibendum</span></li>
|
||||
</ul>
|
||||
<h5 class="list-header">Ordered Lists:</h5>
|
||||
<ol class="blur">
|
||||
<li><span>Eu non nec cursus quis mollis, amet quam nec</span></li>
|
||||
<li><span>Et suspendisse, adipiscing fringilla ornare sit ligula sed</span>
|
||||
<ol>
|
||||
<li><span>Interdum et justo nulla</span>
|
||||
<ol>
|
||||
<li><span>Magna amet, suscipit suscipit non amet</span></li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li><span>Metus duis eu non eu ridiculus turpis</span></li>
|
||||
<li>
|
||||
<span>Neque egestas id fringilla consectetuer justo curabitur, wisi magna neque commodo volutpat</span>
|
||||
</li>
|
||||
</ol>
|
||||
<div class="accent">Important text fragment. Lorem ipsum dolor sit amet, id mollis iaculis mi nisl
|
||||
pulvinar,
|
||||
lacinia scelerisque pharetra.
|
||||
</div>
|
||||
</div>
|
||||
</ba-card>
|
||||
</div>
|
||||
|
||||
<div class="col-xlg-3 col-lg-6 col-md-6 col-sm-6 col-xs-12 typography-widget">
|
||||
|
||||
<ba-card title="Text Color" baCardClass="with-scroll color-widget">
|
||||
<div class="section-block red-text ">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis
|
||||
ullamcorper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed
|
||||
ornare
|
||||
nulla. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis
|
||||
dis
|
||||
parturient montes, nascetur ridiculus mus.
|
||||
</p>
|
||||
</div>
|
||||
<div class="section-block yellow-text ">
|
||||
<p>Curabitur bibendum ornare dolor, quis ullamcorper ligula dfgz`zzsodales at. Nullam quis risus eget
|
||||
urna
|
||||
mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
|
||||
ridiculus
|
||||
mus. Nullam id dolor id nibh ultricies vehicula ut id elit. In sed ornare nulla.
|
||||
</p>
|
||||
</div>
|
||||
<div class="section-block links">
|
||||
<p>Lorem ipsum <a href>dolor</a> sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor,
|
||||
quis
|
||||
<a href>ullamcorper</a> ligula sodales at. Nulla tellus elit, varius non commodo eget, <a
|
||||
href>mattis</a> vel eros. In sed ornare
|
||||
nulla.
|
||||
</p>
|
||||
</div>
|
||||
<div class="section-block links">
|
||||
<p><a href>Active link — #209e91</a></p>
|
||||
|
||||
<p class="hovered"><a href>Hover link — #17857a</a></p>
|
||||
</div>
|
||||
</ba-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="col-lg-12 col-sm-12 col-xs-12">
|
||||
|
||||
<ba-card baCardClass="banner-column-panel">
|
||||
<div class="banner">
|
||||
<div class="large-banner-wrapper">
|
||||
<img src="{{ ( 'app/typography/banner.png' | appPicture ) }}" alt=""/>
|
||||
</div>
|
||||
<div class="banner-text-wrapper">
|
||||
<div class="banner-text">
|
||||
<h1>Simple Banner Text</h1>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet</p>
|
||||
|
||||
<p>Odio amet viverra rutrum</p>
|
||||
<div class="section-block">
|
||||
<h5 class="list-header">Unordered list:</h5>
|
||||
<ul class="blur">
|
||||
<li>Lorem ipsum dolor sit amet</li>
|
||||
<li>Сlacinia scelerisque pharetra
|
||||
<ul>
|
||||
<li>Dui rhoncus quisque integer lorem
|
||||
<ul>
|
||||
<li>Libero iaculis vestibulum eu vitae</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Nisl lectus nibh habitasse suspendisse ut</li>
|
||||
<li><span>Posuere cursus hac, vestibulum wisi nulla bibendum</span></li>
|
||||
</ul>
|
||||
<h5 class="list-header">Ordered Lists:</h5>
|
||||
<ol class="blur">
|
||||
<li><span>Eu non nec cursus quis mollis, amet quam nec</span></li>
|
||||
<li><span>Et suspendisse, adipiscing fringilla ornare sit ligula sed</span>
|
||||
<ol>
|
||||
<li><span>Interdum et justo nulla</span>
|
||||
<ol>
|
||||
<li><span>Magna amet, suscipit suscipit non amet</span></li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li><span>Metus duis eu non eu ridiculus turpis</span></li>
|
||||
<li>
|
||||
<span>Neque egestas id fringilla consectetuer justo curabitur, wisi magna neque commodo volutpat</span>
|
||||
</li>
|
||||
</ol>
|
||||
<div class="accent">Important text fragment. Lorem ipsum dolor sit amet, id mollis iaculis mi nisl
|
||||
pulvinar,
|
||||
lacinia scelerisque pharetra.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Columns</h2>
|
||||
</ba-card>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="img-wrapper"><img src="{{ ( 'app/typography/typo03.png' | appPicture ) }}" alt="" title=""/>
|
||||
<div class="col-xlg-3 col-lg-6 col-md-6 col-sm-6 col-xs-12 typography-widget">
|
||||
|
||||
<ba-card title="Text Color" baCardClass="with-scroll color-widget">
|
||||
<div class="section-block red-text ">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis
|
||||
ullamcorper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed
|
||||
ornare
|
||||
nulla. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis
|
||||
dis
|
||||
parturient montes, nascetur ridiculus mus.
|
||||
</p>
|
||||
</div>
|
||||
<div class="section-block yellow-text ">
|
||||
<p>Curabitur bibendum ornare dolor, quis ullamcorper ligula dfgz`zzsodales at. Nullam quis risus eget
|
||||
urna
|
||||
mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
|
||||
ridiculus
|
||||
mus. Nullam id dolor id nibh ultricies vehicula ut id elit. In sed ornare nulla.
|
||||
</p>
|
||||
</div>
|
||||
<div class="section-block links">
|
||||
<p>Lorem ipsum <a href>dolor</a> sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor,
|
||||
quis
|
||||
<a href>ullamcorper</a> ligula sodales at. Nulla tellus elit, varius non commodo eget, <a
|
||||
href>mattis</a> vel eros. In sed ornare
|
||||
nulla.
|
||||
</p>
|
||||
</div>
|
||||
<div class="section-block links">
|
||||
<p><a href>Active link — #209e91</a></p>
|
||||
|
||||
<p class="hovered"><a href>Hover link — #17857a</a></p>
|
||||
</div>
|
||||
</ba-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12 col-sm-12 col-xs-12">
|
||||
|
||||
<ba-card baCardClass="banner-column-panel">
|
||||
<div class="banner">
|
||||
<div class="large-banner-wrapper">
|
||||
<img src="{{ ( 'app/typography/banner.png' | appPicture ) }}" alt=""/>
|
||||
</div>
|
||||
<div class="banner-text-wrapper">
|
||||
<div class="banner-text">
|
||||
<h1>Simple Banner Text</h1>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet</p>
|
||||
|
||||
<p>Odio amet viverra rutrum</p>
|
||||
</div>
|
||||
<p>Vel elit, eros elementum, id lacinia, duis non ut ut tortor blandit. Mauris <a
|
||||
href>dapibus</a> magna rutrum. Ornare neque suspendisse <a
|
||||
href>phasellus wisi</a>, quam cras pede rutrum suspendisse, <a
|
||||
href>felis amet eu</a>. Congue magna elit quisque quia, nullam justo sagittis,
|
||||
ante erat libero placerat, proin condimentum consectetuer lacus. Velit condimentum velit, sed
|
||||
penatibus
|
||||
arcu nulla.</p>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="img-wrapper"><img src="{{ ( 'app/typography/typo01.png' | appPicture ) }}" alt="" title=""/>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Columns</h2>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="img-wrapper"><img src="{{ ( 'app/typography/typo03.png' | appPicture ) }}" alt="" title=""/>
|
||||
</div>
|
||||
<p>Vel elit, eros elementum, id lacinia, duis non ut ut tortor blandit. Mauris <a
|
||||
href>dapibus</a> magna rutrum. Ornare neque suspendisse <a
|
||||
href>phasellus wisi</a>, quam cras pede rutrum suspendisse, <a
|
||||
href>felis amet eu</a>. Congue magna elit quisque quia, nullam justo sagittis,
|
||||
ante erat libero placerat, proin condimentum consectetuer lacus. Velit condimentum velit, sed
|
||||
penatibus
|
||||
arcu nulla.</p>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="img-wrapper"><img src="{{ ( 'app/typography/typo01.png' | appPicture ) }}" alt="" title=""/>
|
||||
</div>
|
||||
<p>Et suspendisse, adipiscing fringilla ornare sit ligula sed, vel nam. Interdum et justo nulla,
|
||||
fermentum
|
||||
lobortis purus ut eu, duis nibh dolor massa tristique elementum, nibh iste potenti risus fusce
|
||||
aliquet
|
||||
fusce, ullamcorper debitis primis arcu tellus vestibulum ac.</p>
|
||||
</div>
|
||||
<p>Et suspendisse, adipiscing fringilla ornare sit ligula sed, vel nam. Interdum et justo nulla,
|
||||
fermentum
|
||||
lobortis purus ut eu, duis nibh dolor massa tristique elementum, nibh iste potenti risus fusce
|
||||
aliquet
|
||||
fusce, ullamcorper debitis primis arcu tellus vestibulum ac.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="separator"></div>
|
||||
<div class="separator"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<h4>Column heading example</h4>
|
||||
<div class="img-wrapper"><img src="{{ ( 'app/typography/typo04.png' | appPicture ) }}" alt=""/></div>
|
||||
<p>Eget augue, lacus erat ante egestas scelerisque aliquam, metus molestie leo in habitasse magna
|
||||
maecenas</p>
|
||||
<a href class="learn-more">Lean more</a>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h4>Yet another column heading example</h4>
|
||||
<div class="img-wrapper"><img src="{{ ( 'app/typography/typo05.png' | appPicture ) }}" alt=""/></div>
|
||||
<p>Augue massa et parturient, suspendisse orci nec scelerisque sit, integer nam mauris pede consequat
|
||||
in
|
||||
velit</p>
|
||||
<a href class="learn-more">Lean more</a>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h4>Third column heading example</h4>
|
||||
<div class="img-wrapper"><img src="{{ ( 'app/typography/typo06.png' | appPicture ) }}" alt=""/></div>
|
||||
<p>Eget turpis, tortor lobortis porttitor, vestibulum nullam vehicula aliquam</p>
|
||||
<a href class="learn-more">Lean more</a>
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<h4>Column heading example</h4>
|
||||
<div class="img-wrapper"><img src="{{ ( 'app/typography/typo04.png' | appPicture ) }}" alt=""/></div>
|
||||
<p>Eget augue, lacus erat ante egestas scelerisque aliquam, metus molestie leo in habitasse magna
|
||||
maecenas</p>
|
||||
<a href class="learn-more">Lean more</a>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h4>Yet another column heading example</h4>
|
||||
<div class="img-wrapper"><img src="{{ ( 'app/typography/typo05.png' | appPicture ) }}" alt=""/></div>
|
||||
<p>Augue massa et parturient, suspendisse orci nec scelerisque sit, integer nam mauris pede consequat
|
||||
in
|
||||
velit</p>
|
||||
<a href class="learn-more">Lean more</a>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h4>Third column heading example</h4>
|
||||
<div class="img-wrapper"><img src="{{ ( 'app/typography/typo06.png' | appPicture ) }}" alt=""/></div>
|
||||
<p>Eget turpis, tortor lobortis porttitor, vestibulum nullam vehicula aliquam</p>
|
||||
<a href class="learn-more">Lean more</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="separator"></div>
|
||||
</div>
|
||||
<div class="separator"></div>
|
||||
</div>
|
||||
</ba-card>
|
||||
</ba-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue