5678 Street, Dubai, UAE 00000
Mon-Fri, 9:00-17:00. Saturday-Sunday CLOSED
212 6788 78993, 212 3478 09088

# Typography

#### Font Family

You have two sets of `font-family` available to use in Code Ixir.

Montserrat
Open Sans

    <div class="font-sans-serif">Montserrat</div>
     <div class="font-base">Open Sans</div>

#### Headings

Code Ixir has all the html headings, `<h1>` through `<h6>`, styled for you. Also you can use`.h1` through `.h6` classes when you want to match the font styling of a heading but still want your text to be displayed inline.

# Heading 1

## Heading 2

### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6

    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>

#### Paragraphs

This is a paragraph text. Following text are dummy copy text. Donec feugiat lorem dolor, eu fringilla urna tincidunt quis. In vitae dignissim lectus. Maecenas varius libero non metus rhoncus sagittis. Proin posuere iaculis auctor. Vivamus orci lorem, sollicitudin at convallis in, feugiat eget felis. Integer maximus, metus sit amet imperdiet semper, erat felis vulputate odio, nec malesuada metus.

    <p>
       Your paragraph text goes here.
     </p>

#### Lead Paragraph and Drop cap

Make a paragraph stand out by adding `.lead` and for drop cap, use `.dropcap` class.

Aliquam a fermentum tortor, nec fringilla eros. Donec molestie lorem elit, eget eleifend neque dignissim nec. Suspendisse ullamcorper dapibus dolor eget auctor. Etiam tempor dui nec eros blandit tincidunt.

Curabitur ut sapien pretium nulla porttitor porta sit amet eu neque. Nunc nec erat odio. Praesent tristique pulvinar erat, quis cursus sem ultricies sed. Suspendisse ullamcorper dapibus dolor eget auctor. Ut quis egestas nibh. Aliquam a fermentum tortor, nec fringilla eros. Donec molestie lorem elit, eget eleifend neque dignissim nec. Etiam tempor dui nec eros blandit tincidunt.

    <p class="dropcap lead">
    	Your paragraph goes here.
    </p>
    <p class="lead">
    	Your paragraph goes here.
    </p>

#### Font styles

##### Font weights

    .fw-thin {font-weight: 100 !important;}
    .fw-lighter {font-weight: 200 !important;}
    .fw-light {font-weight: 300 !important;}
    .fw-normal {font-weight: 400 !important;}
    .fw-medium {font-weight: 500 !important;}
    .fw-semi-bold {font-weight: 600 !important;}
    .fw-bold {font-weight: 700 !important;}
    .fw-bolder {font-weight: 800 !important;}
    .fw-black {font-weight: 900 !important;}

##### Colors

Use the following colors to change the text color

##### .text-primary

##### .text-info

##### .text-success

##### .text-warning

##### .text-danger

##### .text-black

##### .text-dark

##### .text-1000

##### .text-900

##### .text-800

##### .text-700

##### .text-600

##### .text-500

##### .text-400

##### .text-300

##### .text-200

##### .text-light

##### .text-white

    <h5 class="text-primary">.text-primary</h5>
    <h5 class="text-info">.text-info</h5>
    <h5 class="text-success">.text-success</h5>
    <h5 class="text-warning">.text-warning</h5>
    <h5 class="text-danger">.text-danger</h5>
    <h5 class="text-black">.text-black</h5>
    <h5 class="text-dark">.text-dark</h5>
    <h5 class="text-1000">.text-1000</h5>
    <h5 class="text-900">.text-900</h5>
    <h5 class="text-800">.text-800</h5>
    <h5 class="text-700">.text-700</h5>
    <h5 class="text-600">.text-600</h5>
    <h5 class="text-500">.text-500</h5>
    <h5 class="text-400">.text-400</h5>
    <h5 class="text-300"><span class="bg-black">.text-300</span></h5>
    <h5 class="text-200"><span class="bg-dark">.text-200</span></h5>
    <h5 class="text-light"><span class="bg-1000">.text-light</span></h5>
    <h5 class="text-white"><span class="bg-900">.text-white</span></h5>

##### Sizes

###### .fs--1

###### .fs-0

###### .fs-1

###### .fs-2

###### .fs-3

###### .fs-4

###### .fs-5

###### .fs-6

###### .fs-7

###### .fs-8

    <h6 class="fs--1">.fs--1</h6>
    <h6 class="fs-0">.fs-0</h6>
    <h6 class="fs-1">.fs-1</h6>
    <h6 class="fs-2">.fs-2</h6>
    <h6 class="fs-3">.fs-3</h6>
    <h6 class="fs-4">.fs-4</h6>
    <h6 class="fs-5">.fs-5</h6>
    <h6 class="fs-6">.fs-6</h6>
    <h6 class="fs-7">.fs-7</h6>
    <h6 class="fs-8">.fs-8</h6>

##### Alignments

###### Left aligned

Pellentesque cursus placerat hendrerit. Donec sed erat nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vitae consequat erat. Quisque faucibus felis et fringilla imperdiet. Etiam at porttitor elit, quis convallis massa. Ut id risus sapien. Praesent sit amet arcu a eros laoreet facilisis id eget risus.

###### Right aligned

Pellentesque cursus placerat hendrerit. Donec sed erat nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vitae consequat erat. Quisque faucibus felis et fringilla imperdiet. Etiam at porttitor elit, quis convallis massa. Ut id risus sapien. Praesent sit amet arcu a eros laoreet facilisis id eget risus.

###### Center aligned

Pellentesque cursus placerat hendrerit. Donec sed erat nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vitae consequat erat. Quisque faucibus felis et fringilla imperdiet. Etiam at porttitor elit, quis convallis massa. Ut id risus sapien. Praesent sit amet arcu a eros laoreet facilisis id eget risus.

###### Justified

Pellentesque cursus placerat hendrerit. Donec sed erat nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vitae consequat erat. Quisque faucibus felis et fringilla imperdiet. Etiam at porttitor elit, quis convallis massa. Ut id risus sapien. Praesent sit amet arcu a eros laoreet facilisis id eget risus.

    <p class="text-start">
    	Your paragraph goes here.
    </p>
    <p class="text-end">
    	Your paragraph goes here.
    </p>
    <p class="text-center">
    	Your paragraph goes here.
    </p>
    <p class="text-justify">
    	Your paragraph goes here.
    </p>

##### Transformation

###### Lowercased text.

###### Uppercased text.

###### CapiTaliZed text.

    <h6 class="text-lowercase">Lowercased text.</h6>
    <h6 class="text-uppercase">Uppercased text.</h6>
    <h6 class="text-capitalize">CapiTaliZed text.</h6>

##### Inline styles

Use these tags for inline styling. Feel free to use `<b>` and `<em>` tags insted of `<strong>` and `<i>` tags.

Highlight text

Deleted text

Underlined text

Small text

Bold text

Italic text

    <mark>Highlight text</mark>
    <del>Deleted text</del>
    <u>Underlined text</u>
    <small>Small text</small>
    <strong>Bold text</strong>
    <i>Italic text</i>

#### Blockquotes

> Racing is life, everything before or after is just waiting.”

    <blockquote class="blockquote my-5">
    	<p class="fs-2 text-800 fst-italic">Racing is life, everything before or after is just waiting.”</p>
    	<footer class="blockquote-footer">Frank Zappa</footer>
    </blockquote>

#### Lists

##### Unordered

A list of items in which the order does not explicitly matter.

- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Nulla volutpat aliquam velit
  - Phasellus iaculis neque
  - Purus sodales ultricies
- Faucibus porta lacus fringilla vel

    <p>A list of items in which the order does not explicitly matter.</p>
    <ul>
      <li>Lorem ipsum dolor sit amet</li>
      <li>Consectetur adipiscing elit</li>
      <li>Nulla volutpat aliquam velit<ul>
          <li>Phasellus iaculis neque</li>
          <li>Purus sodales ultricies</li>
        </ul>
      </li>
      <li>Faucibus porta lacus fringilla vel</li>
    </ul>

##### Ordered

A list of items in which the order does explicitly matter.

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

    <p>A list of items in which the order does explicitly matter.</p>
    <ol>
      <li>Lorem ipsum dolor sit amet</li>
      <li>Consectetur adipiscing elit</li>
      <li>Nulla volutpat aliquam velit<ol>
          <li>Phasellus iaculis neque</li>
          <li>Purus sodales ultricies</li>
        </ol>
      </li>
      <li>Faucibus porta lacus fringilla vel</li>
    </ol>

##### No Style

Adding `no-style` class to `ul` element will produce the following list style:

- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Nulla volutpat aliquam velit
  - Phasellus iaculis neque
  - Purus sodales ultricies
- Faucibus porta lacus fringilla vel

##### Styled Checkmark

Adding `style-check` class to `ul` element will produce the following list style:

- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Nulla volutpat aliquam velit
  - Phasellus iaculis neque
  - Purus sodales ultricies
- Faucibus porta lacus fringilla vel

#### Sign up for email alerts

Stay current with our latest insights

- Contact Us
- FAQ
- Privacy Policy
- Terms of Use
- Global Office
- Local Office

- ##### Linkedin

- ##### Twitter

- ##### Facebook

- ##### Google+