Product Name

Headers

Heading Level 1 (h1)

Heading Level 2 (h2)

Heading Level 3 (h3)

Heading Level 4 (h4)

Heading Level 5 (h5)
Show Code 
      <h1>Heading Level 1 (h1)</h1>
      <h2>Heading Level 2 (h2)</h2>
      <h3>Heading Level 3 (h3)</h3>
      <h4>Heading Level 4 (h4)</h4>
      <h5>Heading Level 5 (h5)</h5>
.ui.huge.header
.ui.large.header
.ui.medium.header
.ui.small.header
.ui.tiny.header
Show Code 
      <div class="ui huge header">.ui.huge.header</div>
      <div class="ui large header">.ui.large.header</div>
      <div class="ui medium header">.ui.medium.header</div>
      <div class="ui small header">.ui.small.header</div>
      <div class="ui tiny header">.ui.tiny.header</div>

Heading Level 1 (.blue)

Heading Level 2 (.green)

Heading Level 3 (.grey)

Heading Level 4 (.red)

Heading Level 5 (.orange)
Show Code 
      <h1 class="blue">Heading Level 1 (.blue)</h1>
      <h2 class="green">Heading Level 2 (.green)</h2>
      <h3 class="grey">Heading Level 3 (.grey)</h3>
      <h4 class="red">Heading Level 4 (.red)</h4>
      <h5 class="orange">Heading Level 5 (.orange)</h5>

Paragraph

Big text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Show Code 
<p class="big text aligned">Lorem Ipsum dolor sit amet</p>
<p class="big text center aligned">Lorem Ipsum dolor sit amet</p>
<p class="big text right aligned">Lorem Ipsum dolor sit amet</p>

Large text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Show Code 
<p class="large text aligned">Lorem Ipsum dolor sit amet</p>
<p class="large text center aligned">Lorem Ipsum dolor sit amet</p>
<p class="large text right aligned">Lorem Ipsum dolor sit amet</p>

Regular text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Show Code 
<p class="text aligned">Lorem Ipsum dolor sit amet</p>
<p class="text center aligned">Lorem Ipsum dolor sit amet</p>
<p class="text right aligned">Lorem Ipsum dolor sit amet</p>

Small text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Show Code 
<p class="small text aligned">Lorem Ipsum dolor sit amet</p>
<p class="small text center aligned">Lorem Ipsum dolor sit amet</p>
<p class="small text right aligned">Lorem Ipsum dolor sit amet</p>

Styles

Regular text

Semi-Bold text with class name .semi-bold

bold text with HTML tag b or strong or class .bold

Italic text with class name italic

Italic text with HTML tag i or em

Black colored text

Blue colored text

Dark blue colored text

Green colored text

Red colored text

Grey colored text

Show Code 
<p class="text">Regular text</p>
<p class="semi-bold text">Semi-Bold text with class name .semi-bold</p>
<p class="text bold"><b>bold text with HTML tag b or strong or class .bold</b></p>

<p class="italic text">Italic text with class name italic</p>
<p class="text"><i>Italic text with HTML tag i or em</i></p>

<p class="black text">Black colored text</p>
<p class="blue text">Blue colored text</p>
<p class="dark blue text">Dark blue colored text</p>
<p class="green text">Green colored text</p>
<p class="red text">Red colored text</p>
<p class="grey text">Grey colored text</p>

Common used variations

Small semi-bold grey text

Semi-bold text

Blue semi-bold text

Green semi-bold text

Grey semi-bold text

Small grey text

Simple link
Simple semi-bold link
Show Code 
<p class="small semi-bold grey text">Small semi-bold grey text</p>
<p class="semi-bold text">Semi-bold text</p>
<p class="blue semi-bold text">Blue semi-bold text</p>
<p class="green semi-bold text">Green semi-bold text</p>
<p class="grey semi-bold text">Grey semi-bold text</p>
<p class="small grey text">Small grey text</p>
<a href="#">Simple link</a><br>
<a href="#"><b>Simple semi-bold link</b></a>