Style Guide
Large paragraph text for adding emphasis to introductory paragraphs on pages when a heading styling wouldn’t be appropriate lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
H2: Heading With Underline (Large)
These elements represent headings for their sections.
The semantics and meaning of these elements are defined in the section on headings and sections.
These elements have a rank given by the number in their name. The h1 element is said to have the highest rank, the h6 element has the lowest rank, and two elements with the same name have equal rank.
H2 Heading Without Underline (Large)
The h1–h6 elements are headings.
The first element of heading content in an element of sectioning content represents the heading for that section. Subsequent headings of equal or higher rank start new (implied) sections, headings of lower rank start implied subsections that are part of the previous one. In both cases, the element represents the heading of the implied section.
The following headings are examples of the remaining options that you have for headings. In order to get the underline or other different styles of heading you will need to select the heading in the content and then under the Format menu hover over "Formats" and select the appropriate class.
H2 Heading With Underline (Small)
H2 Heading Without Underline (Small)
H3 Heading
H4 Heading
H5 Heading
H6 Heading
The link element allows authors to link their document to other resources.
The destination of the link(s) is given by the href attribute, which must be present and must contain a valid non-empty URL potentially surrounded by spaces.
UPPERCASE TEXT provides emphasis and attention from the user to a specific portion of the surrounding text. Usually reserved for calling out important notices or actions the user can take on the site.
Small text is generally reserved for notes or other less-important but clarifying information.
Caption
In the beginning, the Web was just text, and it was really quite boring. Fortunately, it wasn't too long before the ability to embed images (and other more interesting types of content) inside web pages was added. There are other types of multimedia to consider, but it is logical to start with the humble element, used to embed a simple image in a webpage.
Block Quote
The HTML Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation.
Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.
A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the footer element.
The HTML element represents an unordered list of items, typically rendered as a bulleted list.
This is a Heading
- The element is for grouping a collection of items that do not have a numerical ordering, and their order in the list is meaningless. Typically, unordered-list items are displayed with a bullet, which can be of several forms, like a dot, a circle, or a square. The bullet style is not defined in the HTML description of the page, but in its associated CSS.
- Nesting
- The elements may be nested as deeply as desired. Moreover, the nested lists may alternate between and without restriction.
- The elements both represent a list of items. They differ in that, with the element, the order is meaningful. As a rule of thumb to determine which one to use, try changing the order of the list items; if the meaning is changed, the element should be used, otherwise you can use.
The HTML element represents an ordered list of items, typically rendered as a numbered list.
This is a Heading
- Typically, ordered-list items are displayed with a preceding marker, such as a number, letter, or bullet.
- Nesting
- The elements may be nested as deeply as desired. Moreover, the nested lists may alternate between and without restriction.
- The elements both represent a list of items. They differ in that, with the element, the order is meaningful. As a rule of thumb to determine which one to use, try changing the order of the list items; if the meaning is changed, the element should be used.
The HTML element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.
| Heading |
Heading |
Heading |
| Table Cell Data |
Table Cell Data |
Table Cell Data |
| Table Cell Data |
Table Cell Data |
Table Cell Data |
| Table Cell Data |
Table Cell Data |
Table Cell Data |
Tabs
Tab Title
A tab control is analogous to the dividers in a notebook or the labels in a file cabinet. By using a tab control, an application can define multiple pages for the same area of a window or dialog box. Each page consists of a certain type of information or a group of controls that the application displays when the user selects the corresponding tab. Tab description source.
Tab Title
Lorem ipsum dolor sit amet, consectetur adipisicing 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 duis aute irure dolor in reprehenderit.
Tab Title
Lorem ipsum dolor sit amet, consectetur adipisicing 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 duis aute irure dolor in reprehenderit.
Accordions
Accordion Control
Accordions display collapsable content to display information in a limited amount of space. The headers are clickable to reveal more details about each section below, this way we can provide the information the user needs in a way that is succinct and only gives them what they are looking for as quickly as possible.
Accordion Usage
Accordions are often used for pages that have a lot of information on them and clear seperation between headers/sections that happen frequently. For example, they are often used on FAQ pages to allow the user to quickly scan through the questions that are available for answer and find the one they are looking for and be able to read it right there simply by expanding the content section for that accordion.
2 Column Layout
1. Use plenty of headings.
Well-written headlines act as the informal outline of a page. Creating headings that summarize the content of that paragraph(s) lets the user understand what that section is about before deciding whether or not they want to read it.
2. Use bullet points.
Bulleted lists allow for optimal readability and allow users to easily understand and store that information. Almost any series of items separated with commas has potential to be formatted into a bulleted list.
3 Column Layout
3. Keep paragraphs short.
Long paragraphs are dense and hard to scan. If you review a long paragraph, you can almost always find a place where you could break it up in to two paragraphs. This makes the information easier for the user to digest.
4. Frontload important information.
Start with the content that is most important to your audience, then provide additional details. In journalism, this technique is referred to as an inverted pyramid. By starting with the conclusion, you give the user the ability to stop reading at any point and still leave with the main point of the page.
5. Call attention to key terms and phrases.
By utilizing text format tools like bolding or highlighting, you allow the user to easily find key terms/phrases within a paragraph of copy. It’s important however to remember to use this technique sparingly, as you run the risk of it becoming distracting and less useful.
4 Column Layout
6. Know your audience.
Use words that your audience is familiar with. Using complex or internal jargon will most likely confuse the user. Audience appropriate language is key to allow the user to easily scan and understand the information.
7. Omit unnecessary words.
Get rid of half the words on each page, then get rid of half of what’s left.
If it sounds excessive, it’s meant to be. Web copy is not like conventional writing – it must be concise and succinct. Most of the time you can remove about half the words on a web page without losing anything of value. By getting rid of unnecessary words, you not only reduce the length, but you also make the content more prevalent and easier to scan.
https://hingemarketing.com/blog/story/7-best-practices-for-website-copywriting
Nullam sodales elit luctus venenatis euismod. Quisque augue tortor, commodo eu luctus et, sagittis vitae turpis. Proin id tellus tempus, ullamcorper elit id, placerat orci. Fusce quis placerat turpis, at venenatis diam. Nulla mattis venenatis elit sit amet euismod enim.
Overlay Elements
Open Modal