Style guide

Article author
Stan Jobs

You can make the font size of a paragraph of text larger by giving it a class name of font-size-xl using the Source Code editor when editing an article. This can be used to emphasize a point or summarize the content of the article.

This article provides an overview of some of the most common typographic elements used in articles, covering everything from headings and blockquotes to tabs and toggles. Many of these elements are applied using the editor toolbar and their appearance may differ between themes.

Inline text elements

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

Lists

Standard bulleted and numbered lists are available in all themes.

  • This is an example
  • Of a standard unordered list
  • Available in all themes
  1. This is an example
  2. Of a standard ordered list
  3. Available in all themes

Custom check and number styles can be applied using the .list-check and .list-number class names, respectively.

  • This is an example
  • Of a custom check list
  • Applied using .list-check
  • This is an example
  • Of a custom numbered list
  • Applied using .list-number

You can change their appearance using custom CSS or through the use of spacing utilities.

Heading two

The content of articles can often be improved through the use of typographic elements and custom styles. All of our themes come with a standard set of these elements and you can create countless more using custom CSS or our Dropcaps can be used by adding a class name of .dropcap to the paragraph. For added effect, you could apply a different font (for example, the one used for headings). Consider using serif or decorative fonts to contrast with your chosen text font.

Blockquotes are a great way to display and format quotations. Insert beautiful quotes using the “quote” button from the visual editor. To add an author just wrap its name in a cite tag.

Are you still making bulleted and numbered lists by manually typing bullets or numbers at the beginning of each line? In the 21st century, this is a task no one should be doing by hand.

Heading Three

This tag styles large blocks of code.

pre {
  margin: 0 0 5px;
  font-weight: bold;
  font-size: 16px;
  line-height: 1.5;
}

Tables are useful for layouts where text needs to be positioned side-by-side or floating at specific locations on the page. If making these is frustrating with the usual layout tools, try using a table.

Type Font Description
Humanist Sabon Closely connected to calligraphy
Transitional Baskerville More abstract and less organic
Modern Bodoni Note the thin, straight serifs
Slab Serif Clarendon Egyptian typefaces have heavy serifs

To highlight text you need to wrap it into a with the class “highlight”. This can be done in the Code editor view.

Text columns

Use .column-count-2 to split text into two columns.

To split the text in a two columns layout you simply need to wrap it into a div container with class “twocolumn”. Having multiple columns allows for a very versatile ad grid, and, traditionally, newspapers were in the business of selling ads.babies in slings around front.There is a general rule that one line of unjustified text should have around 9-12 words. For justified text these numbers are around 10-15 words. Since some words are longer and some shorter this is not a perfect measurement. Small columns of text are easier to read than large ones. Imagine a newspaper sized line that stretched across an entire page. It would be very easy to skip a line. For justified text these numbers are around 10-15 words. Since some words are longer and some shorter this is not a perfect measuremenYou must ask yourself how to easily achieve these numbers? Don’t worry it is easy, you won’t have to count the characters one by one.

Image styles

Images often play an important role in content, providing useful information and helping to illustrate points. Images can be displayed within <figure> elements and given an optional caption using the <figcaption> element.

A full-width centered image

Using a few simple class names, you can change the alignment of your images and even have them extend slightly beyond the content area for added effect.

A left-aligned image

A left-aligned image

Use .float-left to have an image float to the left of the content. Responsive variants allow you to control the float based on screen size.

There should be some space above, below and on the appropriate side of the image to ensure separation between the image and surrounding text. This will make the page look better and improve readability.

Margin utilities allow you to apply spacing around the image and reposition the element on larger screen sizes. Text alignment utilities can be used to control the alignment of the caption.

The left-aligned example uses .my-5 and .lg:mr-6 to apply margin around the entire element and lg:-ml-6 to shift the image further to the left on large screen sizes.

Use .float-right to achieve a similar (but opposite) effect. Consider using other utilities, for example borders and background colors, to add further interest to your images or apply your own styles to figures or images within the content area (.content) using custom CSS.

When floating elements it may occasionally be necessary to use .clearfix to ensure content remains within the content area.

Was this article helpful?

Have more questions? Submit a request

Comments

0 comments

Be the first to write a comment.