This page presents most of typographical aspects of Yt Framework. Make your readers happy with great Typography and User Experience!
This is special drop cap symbol styling for magazine / newspaper text paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tristique sem vel turpis egestas cursus. Vivamus vehicula ligula non orci sollicitudin iaculis in nec enim. Ut eu magna at erat ultricies porta. Quisque vehicula ultrices mauris, ut pellentesque dui fermentum ac. Maecenas condimentum egestas tempor. Morbi bibendum congue purus eu ultrices. Cras pretium commodo velit non convallis. Sed ornare, arcu vitae sagittis elementum, metus lacus pulvinar ligula, non gravida elit sapien vestibulum odio. Pellentesque eget quam lectus, in fermentum urna. Ut libero dui, lobortis eget adipiscing quis, tristique fermentum nunc.
Below is a sample of pre tag or code class:
pre, .code{ background-color: #FFFFDD; border-color: #CCCCCC; border-style: solid; border-width: 1px 1px 1px 5px; font: 1em/1.6 Monaco,Consolas,"Courier News",monospace; padding: 10px 15px; }
This is a sample Blockquote. LoremLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper egestas nunc in volutpat. Fusce adipiscing velit ac eros tempor iaculis. Vivamus vehicula ligula non orci sollicitudin iaculis in nec enim.
This is a sample Blockquote. LoremLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper egestas nunc in volutpat. Fusce adipiscing velit ac eros tempor iaculis. Vivamus vehicula ligula non orci sollicitudin iaculis in nec enim.!
This is a highlight phrase. Use class="highlight".
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!
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!
This is a sample button style1 with color blue. Use <a class="blue yt-typo-button style1">Button style1</a> to make it
Color: blue
Button style1Color: green
Button style1Color: orange
Button style1Color: magenta
Button style1Color: red
Button style1Color: orangellow
Button style1Color: white
Button style1Color: rosy
Button style1Color: pink
Button style1Color: black
Button style1Color: gray
Button style1Color: brown
Button style1