Style Guide

An overview and examples of the documentation elements and styles

Table of Contents

How to Create a Post

Post Meta

When creating a post, you should make sure that it has at least one of the following categories:

  • Editor Documentation
  • Editor Training

This will cause the post to be hidden from the main Help Centre page (https://weareclevr.com/help-center/) and visible in the Editor Documentation page (https://weareclevr.com/help-center/editor-documentation/), as well as applying the Documentation “page” layout.

No other configuration should be required.

Initial Post Set Up

A library container call “Document Template” should be used when starting a document. Update the title as needed.

The table of contents is automatically generated onto the “Table of Contents” library element. This comes with the “Document Template”. If recreating the template for whatever reason, make sure the “Table of Contents” elements is on a left side 1/4 column while all other parts of the form should be placed in a right side 3/4 column.

The first column should always be the header of the post. It should contain the following elements, in the described order:

-Title set to h1. This will be the document title

-An optional second Title set to h2. This will be a description of the document.

-A Title Separator that can be found in Library Elements.

Each section should start with a Title element set to h2.

Any Sub-headers will be h3, h4, or h5 depending on the depth of sub-headings.

The following sections will give instruction on common elements that will be used when creating posts and provide examples for reference.

Heading 1 – Standard Post/Page Heading

Heading 2 – Standard Section Heading

Heading 3 -Standard Sub-Heading

Heading 4 – Sub Heading 2

Heading 5 – Sub Heading 3

Text Block

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Code Block

To create a block of code, you should use the “Documentation Code Block” from the Library Elements tab.

Copy

No other modifications should be required, other than inputting the JavaScript code. All styles and options should be left alone.

Images

Images should be created using the Image element. If they are resized using the Image Max Width property in the image options, then the Alignment must be set to center

Videos

Use “Video Element” saved in Library Elements and update the src in the Text or HTML code property to the correct url.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tables

There are 2 styles of tables. Style 1 is used for Attribute/Value tables, while Style 2 is used for all other tables.

Style 1:

Attribute Value
Class Column 2 Value
Id Column 2 Value 2
Selector Column 2 Value 3

Style 2:

Column 1 Column 2 Column 3
Column 1 Value Column 2 Value Column 3 Value

Referenced / Related Documents

This element can be found in the library under the name “References and Related Documents. The element contains only one default table row with an example document link. To add a new item to this table, first add a table row. Type the desired link text into the cell of this table row. Lastly, select the text then click the “Insert/edit link” button or press “Ctrl + k”, click the gear icon and search for and select the appropriate document from the list.

References and Related Documents
Data Source – Legal Name