Headings and main text


HTML-headings, from <h1> to <h6>:

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

Main text example

The default font-size is equal to 14px, and the line-height is equal to the text size multiplied by 1.4. These rules are applied to the <body> element and are inherited throughout all text. In addition, an element <p>  (paragraph) has a default bottom padding 15px.

Look, I can take you as far as Anchorhead. You can get a transport there to Mos Eisley or wherever you're going. The Force is strong with this one. I have you now. I find your lack of faith disturbing. Leave that to me. Send a distress signal, and inform the Senate that all on board were killed. You are a part of the Rebel Alliance and a traitor! Take her away!

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?

She must have hidden the plans in the escape pod. Send a detachment down to retrieve them, and see to it personally, Commander. There'll be no one to stop us this time! Kid, I've flown from one side of this galaxy to the other. I've seen a lot of strange stuff, but I've never seen anything to make me believe there's one all-powerful Force controlling everything. There's no mystical energy field that controls my destiny. It's all a lot of simple tricks and nonsense. I suggest you try it again, Luke. This time, let go your conscious self and act on instinct. Ye-ha! Red Five standing by.

Blockquotes


By default
<blockquote>

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?

<blockquote>
    <p>Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?</p>
</blockquote>

<blockqoute class="onequote">

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?

<blockquote class="onequote">
    <p>Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?</p>
</blockquote>

<blockqoute class="noquotes">

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?

<blockquote class="noquotes">
    <p>Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?</p>
</blockquote>

<blockqoute class="cloud">

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?

<blockquote class="cloud">
    <p>Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?</p>
</blockquote>

<blockqoute class="cloud border">

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?

<blockquote class="cloud border">
    <p>Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?</p>
</blockquote>

<blockqoute class="cloud left OR right">

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?

Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?

<blockquote class="cloud left grid_6">
    <p>Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?</p>
</blockquote>

<blockquote class="cloud right grid_6">
    <p>Hey, Luke! May the Force be with you. Hey, Luke! May the Force be with you. I'm surprised you had the courage to take the responsibility yourself. You mean it controls your actions?</p>
</blockquote>

Lists


Bulleted list
<UL>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
  • Faucibus porta lacus fringilla vel
<ul>
    <li>...</li>
</ul>

Numbered list
<OL>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
  4. Faucibus porta lacus fringilla vel
<ol>
    <li>...</li>
</ol>

Not stylized list
<ul class="list-unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
  • Faucibus porta lacus fringilla vel
<ul class="list-unstyled">
    <li>...</li>
</ul>

With underscore
<ul class="list-bordered">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Nulla volutpat aliquam velit
  • Faucibus porta lacus fringilla vel
<ul class="list-bordered">
    <li>...</li>
</ul>

With arrows
<ul class="list-arrow">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Nulla volutpat aliquam velit
  • Faucibus porta lacus fringilla vel
<ul class="list-arrow">
    <li>...</li>
</ul>

Numeration in the circle
<ul class="list-count-sign">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Nulla volutpat aliquam velit
  • Faucibus porta lacus fringilla vel
<ul class="list-count-sign">
    <li>...</li>
</ul>

List with icons
<ul class="list-icon-sign">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Nulla volutpat aliquam velit
  • Faucibus porta lacus fringilla vel
<ul class="list-icon-sign">
    <li class="icon-toaster">...</li>
    <li class="icon-home">...</li>
</ul>

List with line icons
<ul class="list-icon-line">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Nulla volutpat aliquam velit
  • Faucibus porta lacus fringilla vel
<ul class="list-icon-line">
    <li>
        <i class="bubble icon-toaster"></i>
        ...
    </li>
    <li>
        <i class="bubble icon-home"></i>
        ...
    </li>
</ul>

Inline list
<ul class="list-inline">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Nulla volutpat aliquam velit
  • Faucibus porta lacus fringilla vel
<ul class="list-inline">
    <li>...</li>
</ul>

Step list
<ul class="list-step">

  • step
  • step
  • step
<ul class="list-step">
    <li class="step-item active" data-step-id="_НОМЕР ШАГА_">
      <span class="step-title" data-count="_НОМЕР ШАГА_">_ЗАГОЛОВОК ШАГА_</span>
    </li>
    <li class="step-item" data-step-id="_НОМЕР ШАГА_">
      <span class="step-title" data-count="_НОМЕР ШАГА_">_ЗАГОЛОВОК ШАГА_</span>
    </li>
    <li class="step-item" data-step-id="_НОМЕР ШАГА_">
      <span class="step-title" data-count="_НОМЕР ШАГА_">_ЗАГОЛОВОК ШАГА_</span>
    </li>
</ul>

List striped (zebra)
<ul class="list-striped">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Nulla volutpat aliquam velit
  • Faucibus porta lacus fringilla vel
<ul class="list-striped">
    <li>...</li>
</ul>

Description list
<dl>

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Horizontal description list
<dl class="dl-horizontal">

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
    <dt>...</dt>
    <dd>...</dd>
</dl>

Text separator


<hr>


<hr>

Size
<hr class="larger large OR small">




<hr class="larger">
<hr class="large">
<hr class="small">

Style
<hr class="dashed OR dotted">



<hr class="dashed">
<hr class="dotted">

With text
<hr title="...">


<hr title="Разделитель">

Text in the circle
<hr class="circle" title="...">


<hr class="circle" title="Разделитель">

Text position
<hr class="left right OR center" title="...">




<hr class="left" title="Разделитель слева">
<hr class="center" title="Разделитель по сентру">
<hr class="right" title="Разделитель справа">

Address


<address>

SeoSamba, Inc.
2140 S Dupont Highway , Camden
Delaware 19934
P: (123) 456-7890
Full Name
E: first.last@gmail.com
P: (123) 456-7890
<address>
    <strong>SeoSamba, Inc.</strong><br />
    2140 S Dupont Highway , Camden<br />
    Delaware 19934<br />
    <abbr title="Phone">P:</abbr> (123) 456-7890    
</address>

<address>
    <strong>Full Name</strong><br />
    <abbr title="Email">E:</abbr> <a href="mailto:#">first.last@gmail.com</a><br />
    <abbr title="Phone">P:</abbr> (123) 456-7890        
</address>