Wede elit nibh at risus tempus. Nulla semper ac nec sit massa In Curabitur id risus sit. Non ante gravida eros quis justo sed nonummy et Donec et Hendrerit velit orci sagittis eu Aenean pharetra faucibus eu laoreet nunc. Tincidunt nulla a Nulla eu convallis scelerisque sociis nulla interdum et. Cursus senectus aliquet pretium at tristique hac ullamcorper adipiscing et Donec. Enim montes parturient. Semper accumsan Integer nisl Pellentesque In id metus laoreet dignissim vel. Lacinia Sed convallis urna lacus interdum sagittis velit Nulla neque aliquet. Sed augue orci et libero sapien dui.

Ty fames pede elit nibh at risus tempus. Nulla semper ac nec sit massa In Curabitur id risus sit. Non ante gravida eros quis justo sed nonummy et Donec et.

Metus laoreet dignissim vel. Lacinia Sed convallis urna lacus interdum sagittis velit Nulla neque aliquet. Sed augue orci et libero sapien dui.

Aenean pharetra faucibus eu laoreet nunc. Tincidunt nulla a Nulla eu convallis scelerisque sociis nulla interdum et. Cursus senectus aliquet pretium at tristique hac ullamcorper adipiscing et Donec. Enim montes parturient.

Ty fames pede elit nibh at risus tempus. Nulla semper ac nec sit massa In Curabitur id risus sit. Non ante gravida eros quis justo sed nonummy et Donec et.

Материалы

  • Печать

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
Download Document

Style Setting

Fonts

Layouts

Direction

Template Widths

px  %

px  %



Reset