Материалы
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
- This is a sample Ordered List.
- Lorem ipsum dolor sit amet consectetur
- 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-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>