Headings
Search engines use headings to index the structure of web pages. On the contrary, it helps users in browsing and understanding the content of the page.
Use <h1>,<h2>,<h3>,<h4>,<h5>,<h6> tags for headings.
This is h1
This is h2
This is h3
This is h4
This is h5
This is h6
Optionally, class="underline" underlines the heading to separate it from the rest of the content.
Text
Use the <p> tag for a standard paragraph.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed ac dolor sit amet purus malesuada congue.
Styled text
If you want to emphasize specific words in the text, you can use formatting effects such as bold using the <b> tag, or for greater importance <strong>. To format italic text, use <em> for emphasis and <i> for stylistic purposes. To highlight something, use the <mark> tag. Apply <a> to create a hypertext link and use <s> to visually strike out text with a line through it, but <del> for defining deleted text.
Lists
Use either <ol> or <ul> as appropriate, in combination with <li> tags for a structured list.
Ordered list
The <ol> tag is used to create an ordered list.
- Item 1
- Item 2
- Item 3 with two sub-items
- Sub-item 1
- Sub-item 2
- Item 4
Unordered list
The <ul> tag is used to create an unordered list.
- Item 1
- Item 2
- Item 3 with two sub-items
- Sub-item 1
- Sub-item 2
- Item 4
Buttons
Button is created by adding class="button" to the <a> or <button> tag and is primarily intended for light background.
To use the button on a dark background, add "class: button--reversed".
Tables
Use the <table> tag for a standard table on light backgrounds. Include <th> tags to create cells containing data labels, whether in a row or column, and <td> to create cells containing specific data in a table.
| Column label 1 | Column label 2 | Column label 3 |
|---|---|---|
| Row label 1 | Data | Data |
| Row label 2 | Data | Data |
| Row label 3 | Data | Data |
To use the table on a dark background, add class:"table--reversed".
| Column label 1 | Column label 2 | Column label 3 |
|---|---|---|
| Row label 1 | Data | Data |
| Row label 2 | Data | Data |
| Row label 3 | Data | Data |
Photos
To insert an image, use the <img> tag inside a <figure>.
Single image
Gallery
To use the image gallery template, add class="gallery" to the wrapper.
