Styles & Codes

This page shows some typography styles and settings anyone can copy and use.

Create it with the following html:
<div class="uk-alert">....</div>

Create it with the following html:
<div class="uk-alert uk-alert-success">....</div>

Create it with the following html:
<div class="uk-alert uk-alert-warning">....</div>

Create it with the following html:
<div class="uk-alert uk-alert-danger">....</div>

Create featured story H1 text with the following html: <div class="story-featured"><h1>....</h1></div>

THIS PARAGRAPH IS LEFT JUSTIFIED: Aenean neque est, laoreet quis, condimentum ut, pellentesque et, nulla. Etiam malesuada ipsum egestas lorem. Vestibulum gravida laoreet justo. Maecenas eget tellus mollis lacus cursus suscipit. Phasellus ante ante, dapibus ut, pellentesque eu, tincidunt vel, velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus aliquet nulla sed nisl. Nullam egestas sagittis leo. Quisque dolor ligula, hendrerit laoreet, gravida sit amet, rutrum et, tortor. Donec lorem dui, varius sed, nonummy ut, viverra ac, metus. Duis in mauris ut erat porta placerat.

Create H1 text with the following html: <h1>....</h1>

THIS PARAGRAPH IS CENTER JUSTIFIED: Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus aliquet nulla sed nisl. Nullam egestas sagittis leo. Quisque dolor ligula, hendrerit laoreet, gravida sit amet, rutrum et, tortor. Donec lorem dui, varius sed, nonummy ut, viverra ac, metus. Duis in mauris ut erat porta placerat. Aenean neque est, laoreet quis, condimentum ut, pellentesque et, nulla. Etiam malesuada ipsum egestas lorem. Vestibulum gravida laoreet justo. Maecenas eget tellus mollis lacus cursus suscipit. Phasellus ante ante, dapibus ut, pellentesque eu, tincidunt vel, velit.

Create H2 text with the following html: <h2>....</h2>

THIS PARAGRAPH IS RIGHT JUSTIFIED: Aenean neque est, laoreet quis, condimentum ut, pellentesque et, nulla. Etiam malesuada ipsum egestas lorem. Vestibulum gravida laoreet justo. Maecenas eget tellus mollis lacus cursus suscipit. Phasellus ante ante, dapibus ut, pellentesque eu, tincidunt vel, velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus aliquet nulla sed nisl. Nullam egestas sagittis leo. Quisque dolor ligula, hendrerit laoreet, gravida sit amet, rutrum et, tortor. Donec lorem dui, varius sed, nonummy ut, viverra ac, metus. Duis in mauris ut erat porta placerat.

Create H3 text with the following html: <h3>....</h3>

THIS PARAGRAPH IS BLOCK JUSTIFIED: Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus aliquet nulla sed nisl. Nullam egestas sagittis leo. Quisque dolor ligula, hendrerit laoreet, gravida sit amet, rutrum et, tortor. Donec lorem dui, varius sed, nonummy ut, viverra ac, metus. Duis in mauris ut erat porta placerat. Aenean neque est, laoreet quis, condimentum ut, pellentesque et, nulla. Etiam malesuada ipsum egestas lorem. Vestibulum gravida laoreet justo. Maecenas eget tellus mollis lacus cursus suscipit. Phasellus ante ante, dapibus ut, pellentesque eu, tincidunt vel, velit.

        This is a sample <div class="story-body"><pre>...</pre></div> tag:
        =============================================
        .story-body pre {
        background:#F7F7F7 url(layout/cms/images/code.png) no-repeat scroll 5px 50%;
        border:3px solid #CCC;
        font-size:90%;
        line-height:135%;
        overflow:auto;
        padding:1em 1em 1em 5em;
        }
        =============================================

This is an example of a block quote. Wrap your text in: <blockquote><p>....</p></blockquote>

Etiam congue risus in mi. Suspendisse scelerisque. Integer vel ante at odio tempor pretium. Proin porta augue quis augue. Aliquam erat volutpat. Proin condimentum. Vivamus gravida convallis massa. Proin turpis.

List Styles - Bullets

Use this style with the following html code:
<ul class="bullet-blue"><li>....</li></ul>.

Use this style with the following html code:
<ul class="bullet-grey"><li>....</li></ul>.

Use this style with the following html code:
<ul class="bullet-plus"><li>....</li></ul>.

Use this style with the following html code:
<ul class="bullet-rss"><li>....</li></ul>.

Use this style with the following html code:
<ul class="bullet-star"><li>....</li></ul>.

List Styles - Images

Use this style with the following html code:
<ul class="arrow"><li>....</li></ul>.

Use this style with the following html code:
<ul class="bug"><li>....</li></ul>.

Use this style with the following html code:
<ul class="cart"><li>....</li></ul>.

Use this style with the following html code:
<ul class="check"><li>....</li></ul>.

Use this style with the following html code:
<ul class="script"><li>....</li></ul>.

List Styles - Media

Use this style with the following html code:
<ul class="disc"><li>....</li></ul>.

Use this style with the following html code:
<ul class="headphones"><li>....</li></ul>.

Use this style with the following html code:
<ul class="mic"><li>....</li></ul>.

Use this style with the following html code:
<ul class="speaker"><li>....</li></ul>.

Use this style with the following html code:
<ul class="video"><li>....</li></ul>.

List Styles - Blue Numbers <ul class="number">...</ul>

Create this list number with the following html: <li class="num-1">...</li>.
Create this list number with the following html: <li class="num-2">...</li>.
Create this list number with the following html: <li class="num-3">...</li>.
Create this list number with the following html: <li class="num-4">...</li>.
Create this list number with the following html: <li class="num-5">...</li>.
Create this list number with the following html: <li class="num-6">...</li>.
Create this list number with the following html: <li class="num-7">...</li>.
Create this list number with the following html: <li class="num-8">...</li>.
Create this list number with the following html: <li class="num-9">...</li>.

List Styles - Grey Numbers <ul class="number">...</ul>

Create this list number with the following html: <li class="num-1g">...</li>.
Create this list number with the following html: <li class="num-2g">...</li>.
Create this list number with the following html: <li class="num-3g">...</li>.
Create this list number with the following html: <li class="num-4g">...</li>.
Create this list number with the following html: <li class="num-5g">...</li>.
Create this list number with the following html: <li class="num-6g">...</li>.
Create this list number with the following html: <li class="num-7g">...</li>.
Create this list number with the following html: <li class="num-8g">...</li>.
Create this list number with the following html: <li class="num-9g">...</li>.

Last Updated Friday, May 12 2023 @ 10:43 pm 717 Hits