Typography


Headings

When creating a header, all you need to do is add before your header or use the contextual toolbar. You can keep adding up to six n a row to make the headers smaller.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Links

If you paste in a URL, like https://clapat.com – it’ll automatically be linked up. But if you want to customise your anchor text, you can do that too! Here’s a link to the ClaPat website.

Floating Image

This is a text with a floating image which you can use as many times you want in each paragraph.

Quoting

If you want to add a quote, you just need to add a blockquote to the beginning of the line or use the contextual toolbar, and it will put it into the quote format.

If you want to live a happy life, tie it to a goal, not to people or things.

Albert Einstein

Tables

This theme supports responsive tables that will display a horizontal scroll bar if the screen is too small to display the full content.

#HeadingHeadingHeadingHeading
1CellCellCellCell
2CellCellCellCell
3CellCellCellCell
4CellCellCellCell
5CellCellCellCell

Highlighting

Highlighting text can help bring important information immediately to the reader’s attention. When creating a highlighting text, all you need to do is add a == before and after your text in a Markdown card.

Unordered List

  • Item number one
  • Item number two
    • Item number three
    • Item number four
  • Item number five

Ordered List

  1. Item number one
  2. Item number two
    1. Item number three
    2. Item number four
  3. Item number five

Code

If you’re a technical writer, you may want to use example snippets of code to teach your readers a particular syntax.

.awesome-thing {
  display: block;
  width: 100%;
}

Text Indentation

You don’t see this visual style as much in web pages because browsers, by default, display paragraphs with space underneath them as a way to show where one ends and another begins, but if you want to style a page to have that print-inspired indent style on paragraphs, you can do so with the text-indent style property.

Buttons

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don’t look even slightly believable.

[button_link link=”https://themeforest.net/user/clapat/portfolio” target=”_blank” caption=”Read More” position=”right” size=”small-btn” animation=”no” animation_delay=”0″ extra_class_name=””][/button_link] [button_link link=”https://themeforest.net/user/clapat/portfolio” target=”_blank” caption=”Read More” position=”right” size=”large-btn” animation=”no” animation_delay=”0″ extra_class_name=””][/button_link] [button link=”https://themeforest.net/user/clapat/portfolio” target=”_blank” type=”normal” rounded=”yes” background_color=”#000000″ text_color=”#ffffff” animation=”no” animation_delay=”0″ extra_class_name=””]Button Text[/button] [button link=”https://themeforest.net/user/clapat/portfolio” target=”_blank” type=”outline” rounded=”yes” background_color=”#000000″ text_color=”#ffffff” animation=”no” animation_delay=”0″ extra_class_name=””]Button Text[/button]
[button_link link=”https://themeforest.net/user/clapat/portfolio” target=”_blank” caption=”Read More” position=”left” size=”small-btn” animation=”no” animation_delay=”0″ extra_class_name=””][/button_link] [button_link link=”https://themeforest.net/user/clapat/portfolio” target=”_blank” caption=”Read More” position=”left” size=”large-btn” animation=”no” animation_delay=”0″ extra_class_name=””][/button_link] [button link=”https://themeforest.net/user/clapat/portfolio” target=”_blank” type=”normal” rounded=”no” background_color=”#000000″ text_color=”#ffffff” animation=”no” animation_delay=”0″ extra_class_name=””]Button Text[/button] [button link=”https://themeforest.net/user/clapat/portfolio” target=”_blank” type=”outline” rounded=”no” background_color=”#000000″ text_color=”#ffffff” animation=”no” animation_delay=”0″ extra_class_name=””]Button Text[/button]