This blog will showcase some of the features, capabilities, and how-to's of the COD Blog Single Post Template. Feel free to use it as a reference when building your own blog posts.

Typography:

Below are the different styles and effects of different elements used in ATVI Rich Text Component.

All headings are automatically set to uppercase and use Open Sans Condensed as the font family. Below are the list of available headings with guidelines on their use.

Heading 1

Avoid using Heading 1. Only 1 H1 element should appear on a webpage and is already being used for the Blog Title.

Heading 2

Use for section titles. Uses the same formatting as Heading 3 

Heading 3

Use for sub-section titles. Uses the same formatting as Heading 2.

Paragraph

Use for everything else. This is the default typography used when adding text to the ATVI Rich Text Component. Font family is Montserrat.

---

Inline text elements

Styling for common inline elements

This line of text will render as underlined.

This line rendered as bold text.

This line rendered as italicized text.

Lists

Bullet:

• Item 1 - Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
• Item 2 - Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.
• Item 3 - Cras ultricies ligula sed magna dictum porta. Curabitur aliquet quam id dui posuere blandit.

Nested Bullet:

• Item 1 - Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.
  • nested item a - Cras ultricies ligula sed magna dictum porta. Curabitur aliquet quam id dui posuere blandit.
  • nested item b - Proin eget tortor risus. Proin eget tortor risus.
• Item 2 - Donec rutrum congue leo eget malesuada. Sed porttitor lectus nibh.
• Item 3 - Cras ultricies ligula sed magna dictum porta. Curabitur aliquet quam id dui posuere blandit.

Numbered:

1. Item A - Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.
2. Item B - Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.
3. Item C - Cras ultricies ligula sed magna dictum porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.

Nested Numbered:

1. Item A - Donec sollicitudin molestie malesuada. Proin eget tortor risus. 
   1. Sub item a - Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue leo eget malesuada.
2. Item B - Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Proin eget tortor risus.
3. Item C - Proin eget tortor risus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.

Components:

Below are examples of the components available to add to the blog post.

ATVI Rich Text Component

This is the ATVI Rich Text component. Treat it like any other text editor. See Typography notes above to see the styling of various standard text elements. The image below displays the various text editor options available.

Here is an Anchor tag with a name of "inline-anchor". Anchor tags can be used to share a link to the blog post that will go to a specific part of the page. URLs with anchor tags can be used to share in media promotions but also can be used the in Blog Layout Component's Side Nav. This anchor tag is not in the side nav but is still accessible if you used the  blog url and appended "#inline-anchor".