typography.html

<!--
Copyright 2014 Hippo B.V. (http://www.onehippo.com)

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<div class="row">
  <div class="col-xs-12">
    <h2>Typography</h2>
    <div class="panel panel-info">
      <div class="panel-heading">
        Headings
      </div>
      <div class="panel-body">
        <div class="row">
          <div class="col-sm-6">
            <p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code>, are available. <code>.h1</code> through <code>.h6</code> classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.</p>
            <h1>h1. Bootstrap heading</h1>
            <h2>h2. Bootstrap heading</h2>
            <h3>h3. Bootstrap heading</h3>
            <h4>h4. Bootstrap heading</h4>
            <h5>h5. Bootstrap heading</h5>
            <h6>h6. Bootstrap heading</h6>
          </div>
          <div class="col-sm-6">

<pre>
&lt;h1&gt;h1. Bootstrap heading&lt;/h1&gt;
&lt;h2&gt;h2. Bootstrap heading&lt;/h2&gt;
&lt;h3&gt;h3. Bootstrap heading&lt;/h3&gt;
&lt;h4&gt;h4. Bootstrap heading&lt;/h4&gt;
&lt;h5&gt;h5. Bootstrap heading&lt;/h5&gt;
&lt;h6&gt;h6. Bootstrap heading&lt;/h6&gt;
</pre>
          </div>
        </div>
        <hr>
        <div class="row">
          <div class="col-sm-6">
            <p>Create lighter, secondary text in any heading with a generic <code>&lt;small&gt;</code> tag or the <code>.small</code> class.</p>
            <h1>h1. Bootstrap heading <small>Secondary text</small></h1>
          </div>
          <div class="col-sm-6">
<pre>
&lt;h1&gt;h1. Bootstrap heading &lt;small&gt;Secondary text&lt;/small&gt;&lt;/h1&gt;
</pre>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-xs-12">
    <div class="panel panel-info">
      <div class="panel-heading">
        Body Text
      </div>
      <div class="panel-body">
        <div class="row">
          <div class="col-sm-6">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            <p class="lead">This is a leading paragraph, bigger then usual</p>
            <p>This text has <mark>a highlighted</mark> piece.</p>
            <p><del>This text is deleted</del>, differend semantics then strikethrough</p>
            <p><s>This text is strikethrough text</s>, differend semantics then deleted</p>
            <p><ins>This text is inserted</ins>, different semantics then underlined</p>
            <p><u>This text is underlined</u>, different semantics then inserted</p>
            <p><small>This text is small</small></p>
            <p><strong>This text is bold</strong></p>
            <p><em>This text is in italics</em></p>
            <p class="text-left">Left aligned text.</p>
            <p class="text-center">Center aligned text.</p>
            <p class="text-right">Right aligned text.</p>
            <p class="text-justify">Justified text.</p>
          </div>
          <div class="col-sm-6">
<pre>
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
&lt;p class="lead"&gt;This is a leading paragraph, bigger then usual&lt;/p&gt;
&lt;p&gt;This text has &lt;mark&gt;a highlighted&lt;/mark&gt; piece.&lt;/p&gt;
&lt;p&gt;&lt;del&gt;This text is deleted&lt;/del&gt;, differend semantics then strikethrough&lt;/p&gt;
&lt;p&gt;&lt;s&gt;This text is strikethrough text&lt;/s&gt;, differend semantics then deleted&lt;/p&gt;
&lt;p&gt;&lt;ins&gt;This text is inserted&lt;/ins&gt;, different semantics then underlined&lt;/p&gt;
&lt;p&gt;&lt;u&gt;This text is underlined&lt;/u&gt;, different semantics then inserted&lt;/p&gt;
&lt;p&gt;&lt;small&gt;This text is small&lt;/small&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;This text is bold&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;em&gt;This text is in italics&lt;/em&gt;&lt;/p&gt;
&lt;p class="text-left"&gt;Left aligned text.&lt;/p&gt;
&lt;p class="text-center"&gt;Center aligned text.&lt;/p&gt;
&lt;p class="text-right"&gt;Right aligned text.&lt;/p&gt;
&lt;p class="text-justify"&gt;Justified text.&lt;/p&gt;
</pre>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-xs-12">
    <div class="panel panel-info">
      <div class="panel-heading">Abbreviations</div>
      <div class="panel-body">
        <div class="row">
          <div class="col-sm-6">
            <p>This is a line with an <abbr title="abbreviation">abbr</abbr> in it.</p>
          </div>
          <div class="col-sm-6">
<pre>
&lt;p&gt;This is a line with an &lt;abbr title="abbreviation"&gt;abbr&lt;/abbr&gt; in it.&lt;/p&gt;
</pre>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-xs-12">
    <div class="panel panel-info">
      <div class="panel-heading">
        BlockQuote &amp; Address
      </div>
      <div class="panel-body">
        <div class="row">
          <div class="col-sm-6">
            <blockquote>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            </blockquote>

            <blockquote class="pull-right">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

              <small>
                Someone famous
                <cite title="Source Title">Source Title</cite>
              </small>
            </blockquote>
          </div>
          <div class="col-sm-6">
<pre>
&lt;blockquote&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;blockquote class="pull-right"&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&lt;/p&gt;
  &lt;small&gt;
    Someone famous
    &lt;cite title="Source Title"&gt;Source Title&lt;/cite&gt;
  &lt;/small&gt;
&lt;/blockquote&gt;
</pre>
          </div>
        </div>
        <hr>
        <div class="row">
          <div class="col-sm-6">
            <address>
              <strong>Twitter, Inc.</strong>

              <br>
              795 Folsom Ave, Suite 600
              <br>
              San Francisco, CA 94107
              <br>
              <abbr title="Phone">P:</abbr>
              (123) 456-7890
            </address>

            <address>
              <strong>Full Name</strong>

              <br>
              <a href="mailto:#">first.last@example.com</a>
            </address>
          </div>
          <div class="col-sm-6">
<pre>
&lt;address&gt;
  &lt;strong&gt;Twitter, Inc.&lt;/strong&gt;&lt;br&gt;
  795 Folsom Ave, Suite 600&lt;br&gt;
  San Francisco, CA 94107&lt;br&gt;
  &lt;abbr title="Phone"&gt;P:&lt;/abbr&gt;
  (123) 456-7890
&lt;/address&gt;

&lt;address&gt;
  &lt;strong&gt;Full Name&lt;/strong&gt;&lt;br&gt;
  &lt;a href="mailto:#"&gt;first.last@example.com&lt;/a&gt;
&lt;/address&gt;
</pre>
          </div>
        </div>
      </div>
    </div>
  </div>


  <div class="col-xs-12">
    <div class="panel panel-info">
      <div class="panel-heading">
        Lists
      </div>

      <div class="panel-body">
        <div class="row">
          <div class="col-sm-6">
            <ul>
              <li>Unordered List Item</li>

              <li>
                <small>List Item in small tag</small>
              </li>

              <li>
                <b>List Item in bold tag</b>
              </li>

              <li>
                <i>List Item in italics tag</i>
              </li>

              <li>
                <ul class="list-unstyled">
                  <li>
                    <i class="fa fa-caret-right blue"></i>
                    Nested List Item
                  </li>

                  <li>
                    <i class="fa fa-caret-right blue"></i>
                    Nested List Item
                  </li>

                  <li>
                    <i class="fa fa-caret-right blue"></i>
                    Nested List Item
                  </li>
                </ul>
              </li>
              <li>Unordered List Item which is a longer item and may break into more lines.</li>

              <li>
                <strong>List Item in strong tag</strong>
              </li>

              <li>
                <em>List Item in emphasis tag</em>
              </li>
            </ul>

            <ol>
              <li>Ordered List Item</li>
              <li class="text-primary">.text-primary Ordered List Item</li>
              <li class="text-danger">.text-danger Ordered List Item</li>

              <li class="text-success">
                <b>.text-success</b>
                Ordered List Item
              </li>
              <li class="text-warning">.text-warning Ordered List Item</li>
              <li class="text-muted">.text-muted Ordered List Item</li>
            </ol>

            <ul class="fa-ul">
              <li><i class="fa-li fa fa-check-square"></i>List icons</li>
              <li><i class="fa-li fa fa-check-square"></i>can be used</li>
              <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
              <li><i class="fa-li fa fa-square"></i>in lists</li>
            </ul>
          </div>
          <div class="col-sm-6">
<pre>
&lt;ul&gt;
  &lt;li&gt;Unordered List Item&lt;/li&gt;
  &lt;li&gt;&lt;small&gt;List Item in small tag&lt;/small&gt;&lt;/li&gt;
  &lt;li&gt;&lt;b&gt;List Item in bold tag&lt;/b&gt;&lt;/li&gt;
  &lt;li&gt;&lt;i&gt;List Item in italics tag&lt;/i&gt;&lt;/li&gt;
  &lt;li&gt;
    &lt;ul class="list-unstyled"&gt;
      &lt;li&gt;&lt;i class="fa fa-caret-right blue"&gt;&lt;/i&gt;Nested List Item&lt;/li&gt;
      &lt;li&gt;
        &lt;i class="fa fa-caret-right blue"&gt;&lt;/i&gt;
        Nested List Item
      &lt;/li&gt;

      &lt;li&gt;
        &lt;i class="fa fa-caret-right blue"&gt;&lt;/i&gt;
        Nested List Item
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;Unordered List Item which is a longer item and may break into more lines.&lt;/li&gt;

  &lt;li&gt;
  &lt;strong&gt;List Item in strong tag&lt;/strong&gt;
  &lt;/li&gt;

  &lt;li&gt;
  &lt;em&gt;List Item in emphasis tag&lt;/em&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;ol&gt;
  &lt;li&gt;Ordered List Item&lt;/li&gt;
  &lt;li class="text-primary"&gt;.text-primary Ordered List Item&lt;/li&gt;
  &lt;li class="text-danger"&gt;.text-danger Ordered List Item&lt;/li&gt;
  &lt;li class="text-success"&gt;
    &lt;b&gt;.text-success&lt;/b&gt;
    Ordered List Item
  &lt;/li&gt;
  &lt;li class="text-warning"&gt;.text-warning Ordered List Item&lt;/li&gt;
  &lt;li class="text-muted"&gt;.text-muted Ordered List Item&lt;/li&gt;
&lt;/ol&gt;

&lt;ul class="fa-ul"&gt;
  &lt;li&gt;&lt;i class="fa-li fa fa-check-square"&gt;&lt;/i&gt;List icons&lt;/li&gt;
  &lt;li&gt;&lt;i class="fa-li fa fa-check-square"&gt;&lt;/i&gt;can be used&lt;/li&gt;
  &lt;li&gt;&lt;i class="fa-li fa fa-spinner fa-spin"&gt;&lt;/i&gt;as bullets&lt;/li&gt;
  &lt;li&gt;&lt;i class="fa-li fa fa-square"&gt;&lt;/i&gt;in lists&lt;/li&gt;
&lt;/ul&gt;
</pre>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-xs-12">
    <div class="panel panel-info">
      <div class="panel-heading">
        Definition lists
      </div>
      <div class="panel-body">
        <div class="row">
          <div class="col-sm-6">
          <h4>Definition list normal</h4>
            <dl>
              <dt>Description lists</dt>
              <dd>A description list is perfect for defining terms.</dd>
              <dt>Euismod</dt>
              <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
              <dd>Donec id elit non mi porta gravida at eget metus.</dd>
              <dt>Malesuada porta</dt>
              <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
              <dt>Felis euismod semper eget lacinia</dt>
              <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
            </dl>
          </div>
          <div class="col-sm-6">
<pre>
&lt;dl&gt;
  &lt;dt&gt;Description lists&lt;/dt&gt;
  &lt;dd&gt;A description list is perfect for defining terms.&lt;/dd&gt;
  &lt;dt&gt;Euismod&lt;/dt&gt;
  &lt;dd&gt;Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.&lt;/dd&gt;
  &lt;dd&gt;Donec id elit non mi porta gravida at eget metus.&lt;/dd&gt;
  &lt;dt&gt;Malesuada porta&lt;/dt&gt;
  &lt;dd&gt;Etiam porta sem malesuada magna mollis euismod.&lt;/dd&gt;
  &lt;dt&gt;Felis euismod semper eget lacinia&lt;/dt&gt;
  &lt;dd&gt;Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.&lt;/dd&gt;
&lt;/dl&gt;
</pre>
          </div>
        </div>
        <hr>
        <div class="row">
          <div class="col-sm-6">
          <h4>Definition list horizontal</h4>
            <dl class="dl-horizontal">
              <dt>Description lists</dt>
              <dd>A description list is perfect for defining terms.</dd>
              <dt>Euismod</dt>
              <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
              <dd>Donec id elit non mi porta gravida at eget metus.</dd>
              <dt>Malesuada porta</dt>
              <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
              <dt>Felis euismod semper eget lacinia</dt>
              <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
            </dl>
          </div>
          <div class="col-sm-6">
<pre>
&lt;dl class="dl-horizontal"&gt;
  &lt;dt&gt;Description lists&lt;/dt&gt;
  &lt;dd&gt;A description list is perfect for defining terms.&lt;/dd&gt;
  &lt;dt&gt;Euismod&lt;/dt&gt;
  &lt;dd&gt;Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.&lt;/dd&gt;
  &lt;dd&gt;Donec id elit non mi porta gravida at eget metus.&lt;/dd&gt;
  &lt;dt&gt;Malesuada porta&lt;/dt&gt;
  &lt;dd&gt;Etiam porta sem malesuada magna mollis euismod.&lt;/dd&gt;
  &lt;dt&gt;Felis euismod semper eget lacinia&lt;/dt&gt;
  &lt;dd&gt;Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.&lt;/dd&gt;
&lt;/dl&gt;
</pre>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>