Skip to content
CGU ONLINE TOOLKIT

Blog Post Elements

While blog post content is predominantly text based, a variety of elements such as images and tables can be added to house additional types of content and visually breakup long blog posts. Use the elements featured within this section to create engaging and visually diverse blog posts.

Listing View

Module description:

While the Listing View isn’t part of the Blog Post template, it is worth considering when picking imagery and writing content for each post. Imagery should clearly relate to the topic of the post, and titles should be kept short and to the point. It is recommended that the blurb for each blog post is specifically written to sum-up the post, instead of being a copy of the first few lines of the post.

Visit the Blog landing page to see the variety of ways users will see blog post content before reading a blog post page.

Requirements:

  • Thumbnail - Dimensions: 352 × 265
  • Title (max 45 characters)
  • Content Introduction (max 120 characters)
  • Date & Tags

Introduction – Feature

Module description:

Of the three variations of blog post headers, Introduction – Feature is the most custom, featuring overlay text and full width imagery.

When using this variation of the Introduction, ensure the image choice works with overlay text. Image treatment might be required to make sure the image isn’t too complex and that the white text is easily legible.

Its recommended that use of this header is limited to feature or important blog posts. The image for this header section doesn’t need to be the same as on the Listing View, but its recommended that at the very least they include similar subject matter.

Requirements:

  • Bread Crumbs
  • Feature Image (image treated to ensure overlay text legibility), dimensions: 1180 × 400
  • Title (max 45 characters)

Introduction – Large

Module description:

Introduction – Large is a simpler variation of the Feature version of the blog post header. It includes the same size image, but the blog title and breadcrumbs sit above the image.

Because this variation has less strict image requirements, it is recommended for all types of blog posts. The image for this header section doesn’t need to be the same as on the Listing View, but its recommended that at the very least they include similar subject matter.

Requirements:

  • Bread Crumbs
  • Title (max 45 characters)
  • Large Image, dimensions: 1180 × 400

Introduction – Small

Module description:

For shorter or less important blog posts, the header Introduction – Small can be used. The header allows space for slightly longer titles, but still includes an image for visual interest.

For this variation the image should be the same as the image used on the Listing View.

Requirements:

  • Bread Crumbs
  • Title (max 45 characters)
  • Small Image, dimensions: 485 × 275

Content Area

Module description:

The Content Area module houses the bulk of the information on a blog post. There are a variety of styles of text to choose from. Follow the recommendations to the left as a best practice for structuring large amounts of content.

If there are large amounts of content (multiple pages in Microsoft Word) consider breaking content up into multiple blog posts. Use descriptive blog post titles and in-content html links to link multi-part blog posts together.

Requirements:

  • Requirements vary per element, follow style of the above examples

Recommendations

  • Use Introductions, sub-headings and lists styles to structure content and make large amounts of text easy to scan
  • Break up large blocks of text into multiple paragraphs
  • Use Inline Images and Inline Tables where applicable to add visual interest to articles

Inline Images

Module description:

Inline Images allow for blog posts to include multiple images in addition to the header image. Use images to reinforce content and break up long blog text articles.

Inline Images can be used anywhere inside the Content Area. Include image descriptions wherever possible.

Requirements:

  • Image
  • Optional: Image description

Inline Tables

Module description:

The Inline Table module allows for table or simple-Excel content within the main content area of a blog post. The example above was used to display risk comparisons.

Customisations to the table layout, adding header / footer rows or additional column is possible but may require extra development.

Requirements:

  • Requirements vary per style of table

Post Footer

Module description:

The Post Footer appears at the bottom of each blog post and contains two sections: About the Author and Tags.

About the Author should be used to highlight author information, positioning them as a subject matter expert and topic enthusiast. Include a profile picture whenever possible.

Tags allow users to view similar topics on the Blog landing page when browsing by category. Add all applicable tags to each blog posts, there is no maximum number of tags for a blog post.

Requirements:

About the Author

  • Profile picture (round)
  • Author name
  • Author blurb (max 250 characters)
  • Optional: View Profile link

Tags

  • Any tags/categories relevant to the blog post