Typography1

This page presents most of typographical aspects of Yt Framework. Make your readers happy with great Typography and User Experience!

This is an Heading 1

Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit. Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit.

This is an Heading 2.

Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit. Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit.

This is an Heading 3

Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit. Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit.

This is an Heading 4

Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit. Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit.

This is an Heading 5

Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit. Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit.

Lists Style

  1. This is a sample Ordered List.
  2. Lorem ipsum dolor sit amet consectetur
  3. Lorem ipsum dolor sit amet consectetur
  • This is a sample Disc List.
  • Lorem ipsum dolor sit amet consectetur
  • Lorem ipsum dolor sit amet consectetur
  • This is a sample Arrow list.
  • Use <ul class="yt-typo-list list-arrow"><li><span class="icon"> </span>List's content goes here!</li></ul>
  • This is a sample Arrowlist.
  • This is a sample Star list.
  • Use <ul class="yt-typo-list list-star"><li><span class="icon"> </span>List's content goes here!</li></ul>
  • This is a sample Starlist.
  • This is a sample Home list.
  • Use <ul class="yt-typo-list list-home"><li><span class="icon"> </span>List's content goes here!</li></ul>
  • This is a sample Checklist.
  • This is a sample Cal list.
  • Use <ul class="yt-typo-list list-cal"><li><span class="icon"> </span>List's content goes here!</li></ul>
  • This is a sample Checklist.
  • This is a sample Check list.
  • Use <ul class="yt-typo-list list-check"><li><span class="icon"> </span>List's content goes here!</li></ul>
  • This is a sample Checklist.
  • This is a sample Email list.
  • Use <ul class="yt-typo-list list-email"><li><span class="icon"> </span>List's content goes here!</li></ul>
  • This is a sample Checklist.

01This is a sample block number. Use <p class="yt-typo-blocknumber"><span class="yt-typo-bignumber-1">01.</span>Your content goes here!</p> to form a block number!

02This is a sample block number. Use <p class="yt-typo-blocknumber"><span class="yt-typo-bignumber-1">02.</span>Your content goes here!</p> to form a block number!

03This is a sample block number. Use <p class="yt-typo-blocknumber"><span class="yt-typo-bignumber-1">03.</span>Your content goes here!</p> to form a block number!

01This is a sample block number. Use <p class="yt-typo-blocknumber"><span class="yt-typo-bignumber-2">01.</span>Your content goes here!</p> to form a block number!

02This is a sample block number. Use <p class="yt-typo-blocknumber"><span class="yt-typo-bignumber-2">02.</span>Your content goes here!</p> to form a block number!

03This is a sample block number. Use <p class="yt-typo-blocknumber"><span class="yt-typo-bignumber-2">03.</span>Your content goes here!</p> to form a block number!

01This is a sample block number. Use <p class="yt-typo-blocknumber"><span class="yt-typo-bignumber-3">01.</span>Your content goes here!</p> to form a block number!

02This is a sample block number. Use <p class="yt-typo-blocknumber"><span class="yt-typo-bignumber-3">02.</span>Your content goes here!</p> to form a block number!

03This is a sample block number. Use <p class="yt-typo-blocknumber"><span class="yt-typo-bignumber-3">03.</span>Your content goes here!</p> to form a block number!

Drop cap symbol

Ihis is special drop cap symbol styling for magazine / newspaper text paragraph. Vestibulum elementum consectetur nunc sed auctor. Phasellus sed nulla enim, vitae dignissim augue.


Boxes Style

This is a sticky. Use <p class="box-sticky">Your clip note goes here!</p> to create a clip note!

This is a download box. Use <p class="box-download">Your download goes here!</p> to create a download box!

Bubbles

<div class="yt-typo-bubble bubble-l1 clearfix">
<div class="yt-typo-box-ct">
<div class="yt-typo-box tl"> </div> <div class="yt-typo-box tr"> </div> <div class="yt-typo-box bl"> </div> <div class="yt-typo-box br"> </div>
Buble's content goes here!
</div>
<span class="yt-typo-arrow"> </span> <span class="yt-typo-author">Put author name here</span>
</div>
Put author name here
This is a sample Bubble. Use <div class="yt-typo-bubble1"> <div> <div> <div> <div> <div> Your Bubble goes here! </div> </div> </div> </div> </div><span class="author">ROUNDED SPEECH BUBBLE </span>
ROUNDED SPEECH BUBBLE
This is a sample Bubble. Use <div class="yt-typo-bubble2"> <div> <div> <div> <div> <div> Your Bubble goes here! </div> </div> </div> </div> </div><span class="author">ROUNDED SPEECH BUBBLE</span>
SQUARE SPEECH BUBBLE
This is a sample Bubble. Use <div class="yt-typo-bubble3"> <div> <div> <div> <div> <div> Your Bubble goes here! </div> </div> </div> </div> </div><span class="author">ROUNDED NOTE BUBBLE</span>
ROUNDED THINKING BUBBLE
This is a sample Bubble. Use <div class="yt-typo-bubble4"> <div> <div> <div> <div> <div> Your Bubble goes here! </div> </div> </div> </div> </div><span class="author">ROUNDED NOTE BUBBLE</span>
SQUARE THINKING BUBBLE

Contact Us

NguyenPhucLai Street - DongDa District - HaNoi City

This email address is being protected from spambots. You need JavaScript enabled to view it.

084 - 00 - 12345678

084 - 00 - 12345678

Style Setting

Fonts

Layouts

Direction

Template Widths

px  %

px  %