The page header above is a simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components.

emmet:
.page-header>h1{Typography }>small{building on top of bootstrap}
Headings

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading
emmet:
h${H$ Heading}*6
Paragraphs

Leading: Lorem ipsum dolor sit amet

Longer text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis aliquet sapien, quis tincidunt justo. Proin convallis leo lorem, et iaculis purus molestie sed.

Lorem ipsum dolor sit amet

Danger: Lorem ipsum dolor sit amet

Succes: Lorem ipsum dolor sit amet

Muted: Lorem ipsum dolor sit amet

Info: Lorem ipsum dolor sit amet

emmets:
p.lead{Leading text}
p.text-danger{Danger text}
p.text-success{Success text}
p.text-muted{Muted text}
p.text-info{Info text}
Unordered lists
  • Lorem ipsum dolor sit amet
  • Nulla aliquam velit
    • Phasellus iaculis
    • Ac tristique libero
  • Faucibus porta lacus
  • Eget porttitor
emmet:
ul>li{Random text $}*4+(li>ul>li{subitem}*2)+li{last item}
Ordered lists
  1. Lorem ipsum dolor sit amet
  2. Nulla aliquam velit
  3. Phasellus iaculis
  4. Ac tristique libero
  5. Faucibus porta lacus
  6. Eget porttitor
emmet:
ol>li{Random text $}*6
Alignments

Left align text

Center align text

Right align text

emmet:
p.text-left{left}+p.text-center{center}+p.text-right{right}
Labels
Default
Primary
Success
Info
Warning
Danger

Example heading New

Example heading New

Example heading New

emmets:
.label.label-default{default}+.label.label-primary{primary}+.label.label-success{success}+.label.label-info{info}+.label.label-warning{warning}+.label.label-danger{danger}
(h${Example heading }>span.label.label-default{New})*3
Wells
This is a well
This is a larger well
This is a smaller well
emmets:
.well{This is a well}}
.well.well-lg{This is a larger well}}
.well.well-sm{This is a smaller well}}