Headings
Here are some examples of headings
H1 Heading
H2 Heading
H3 Heading
H4 Heading
H5 Heading
H6 Heading
Heading with underline
To use the conventional module title underline, use the uk-module-title style. To have a fancy module title, use the uk-module-title-alt style. You can also highlight the first word of a title using the [highlight] shortcode.
Module title
Module title
Alternative module title
Centered alternative module title
Block
Blocks are distinct ways of enumarating points in paragraphs with numbers, dates or icons. For block-numbers, you can use any numbering or alphabetical format.
Block numbers
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one's definition of success
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one's definition of success
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one's definition of success
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one's definition of success
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one's definition of success
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one's definition of success
Block Dates
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one's definition.
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one's definition.
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one's definition.
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one's definition.
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one's definition.
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Accept no one's definition.
Block Icons
Creativity
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.
Design
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.
Strategy
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.
Blockquotes
Blockquotes are a nice way to show some commentary or slogan accompanied by the author or name of the commenter. To create a standard blockquote, use the [blockquote] shortcode. Inline quotations can also be defined by using the <q> element
.
Blockquote example
Life is a series of natural and spontaneous changes. Don't resist them - that only creates sorrow. Let reality be reality. Let things flow naturally
Testimonial example
Believe in yourself! Have faith in your abilities! Without a humble but reasonable confidence in your own powers you cannot be successful or happy.
Inline code
To define a short inline computer code use the <code> element. For a larger code snippet use the [code] shortcode which defines preformatted text. It creates a new text block which preserves both spaces and line breaks.
Lists
You can create an unordered list using the [list]. The li element defines the list item.
Simple List
- List Item 1
- List Item 2
- List Item 3
Lists with stripes
- List Item 1
- List Item 2
- List Item 3
Nested Lists
Tags
Tags can be used to highlight keywords within your content. To create a tag, use the [tag] shortcode
Ratings
To create a rating review stars, use one of these rating shortcodes:
| Shortcode | Description |
|---|---|
[five_star/] |
5 star rating |
[four_half_star/] |
4 and a half star rating |
[four_star/] |
4 star rating |
[three_star/] |
3 star rating |
[two_star/] |
2 star rating |
[one_star/] |
1 star rating |
[no_star/] |
blank star rating |
Text level semantics
| Element | Description |
|---|---|
<a> |
Turn text into hypertext using the a element. |
<em> |
Emphasize text using the em element. |
<strong> |
Imply any extra importance using the strong element. |
<code> |
Define inline code snippets using the code element. |
<del> |
Mark document changes as deleted text using the |
<ins> |
Mark document changes as inserted text using the ins element. |
<mark> |
Highlight text with no semantic meaning using the mark element. |
<q> |
Define inline quotations using q element inside a q element. |
<abbr> |
Define an abbreviation using the abbr element with a title. |
<dfn> |
Define a definition term using the dfn element with a title. |
<small> |
De-emphasize text for small print using the small element. |
Module Classes
| Module Class | Description |
|---|---|
uk-panel-box-primary |
Change the module background to have the primary background; You can specify the primary background from the customizer panel. |
uk-panel-box-secondary |
Change the module background to have the secondary background; You can specify the secondary background from the customizer panel. |
tm-primary-background |
Change an element’s background to have the primary background; You can specify the primary background from the customizer panel. |
tm-secondary-background |
Change an element’s background to have the secondary background; You can specify the secondary background from the customizer panel. |
tm-primary-color |
Change an element’s font color to have the primary color; You can specify the primary color from the customizer panel. |
tm-overlay-primary |
Add a primary overlay |
tm-overlay-secondary |
Add a secondary overlay |
tm-overlay-slider |
Add an overlay similar to the slider overlay |
tm-secondary-color |
Change an element’s font color to have the secondary color; You can specify the secondary background from the color customizer panel. |
tm-muted-background |
Set the module background to a light-grey muted background. |
tm-caps |
Set the module caption to be in capitalized words with letter spacing |
tm-small-caps |
Set the module caption to be in capitalized words with letter spacing and a small font |
tm-padding |
Add extra padding to an element |
tm-padding-small-sides |
Add small padding on the side |
tm-inner-padding-large |
Add a large padding to the inner container. Used in conjuction with modules that have a background image |
tm-padding-remove |
Remove all padding on an element |
tm-text-large |
Add this class to make the text large |
tm-text-xlarge |
Add this class to make the text extra large |
tm-border-bottom |
Add this class to an image to add a bottom border |
tm-thin-font |
Add this class to make the font weight thinner |