Blogs Style Guide: Separators and Spacers

Separators

Default


Dots


Yellow


Instructions

  1. Insert the Separator block, found in the Layout Elements section.
  2. Select the desired style from the Styles accordion. inthe Block Settings.

Spacers

You can select the height in pixels for the spacer. This one is 100px.

Instructions

  1. Insert the Spacer block, found in the Layout Elements section.
  2. In the Spacer Settings accordion in the Block Settings enter the pixel height for the space.

Blogs Style Guide: Columns

Column Configuration

Two Even Columns

Suspendisse at faucibus enim. Praesent tincidunt elementum vulputate. Suspendisse a arcu tempor, dignissim felis cursus, eleifend metus. Vivamus non ligula ligula.

Pellentesque laoreet sit amet dolor at lacinia. Morbi faucibus massa purus, blandit tincidunt nulla ullamcorper sit amet. Quisque malesuada gravida odio, vitae pulvinar libero pharetra iaculis.

One-Third Two-Third Columns

Suspendisse at faucibus enim. Praesent tincidunt elementum vulputate. Suspendisse a arcu tempor, dignissim felis cursus, eleifend metus. Vivamus non ligula ligula.

Pellentesque laoreet sit amet dolor at lacinia. Morbi faucibus massa purus, blandit tincidunt nulla ullamcorper sit amet. Quisque malesuada gravida odio, vitae pulvinar libero pharetra iaculis.

Two-Third One-Third Columns

Suspendisse at faucibus enim. Praesent tincidunt elementum vulputate. Suspendisse a arcu tempor, dignissim felis cursus, eleifend metus. Vivamus non ligula ligula.

Pellentesque laoreet sit amet dolor at lacinia. Morbi faucibus massa purus, blandit tincidunt nulla ullamcorper sit amet. Quisque malesuada gravida odio, vitae pulvinar libero pharetra iaculis.

Three Columns With Wide Center Column

Suspendisse at faucibus enim. Praesent tincidunt elementum vulputate. Suspendisse a arcu tempor, dignissim felis cursus, eleifend metus. Vivamus non ligula ligula.

Pellentesque laoreet sit amet dolor at lacinia. Morbi faucibus massa purus, blandit tincidunt nulla ullamcorper sit amet. Quisque malesuada gravida odio, vitae pulvinar libero pharetra iaculis.

Quisque ultricies, nisi ut molestie consequat, enim mauris suscipit neque, in eleifend tortor eros nec metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Instructions

  1. Insert the Column block, found in the Layout Elements section.
  2. Select the desired layout.
  3. Add desired content to each column.

Border and Alerts

Border on Columns Block

Column 1

Column 2

Border on Columns Block (Alert)

Column 1

Column 2

Border on Individual Column

Column 1

Column 2

Column 1

Column 2

Border on Individual Column (Alert)

Column 1

Column 2

Column 1

Column 2

Instructions

  1. After inserting the columns and adding the desired content, choose the outer main block to add one border around the whole thing or choose the specific column that you want to add a border to.
  2. Choose the desired border option from the Styles accordion in the Block Settings.

Blogs Style Guide: Buttons and File Download

Buttons

Solid Yellow (Default)

Blank

Solid Black

Instructions

  1. Insert the Button block, found in the Layout Elements section.
  2. Type the text you want to appear in the button in the text field.
  3. Paste in the URL where you want the button to link in the URL field.
  4. To change to the black or blank button styles, select. the option in the Styles accordion in the Block Settings.

File Download

Download Personnel Guide

Instructions

  1. Insert the File black, found in the Common Blocks section.
  2. Upload the file or select it from the Medial Library.
  3. Change the button text as desired.
  4. In the file name area to the left of the button, describe the file for people using a screen reader.

Blogs Style Guide: Tables

Default

Header 1Header 2
Data 1Data 2
Footer 1Footer 2

Border

Header 1Header 2
Data 1Data 2
Footer 1Footer 2

Border With Sort

Header 1Header 2
Data 1Data 2
Footer 1Footer 2

Border With Sort and Stripe

Header 1Header 2
Data 1Data 2
Footer 1Footer 2

Border With Stripe

Header 1Header 2
Data 1Data 2
Footer 1Footer 2

Sort

Header 1Header 2
Data 1Data 2
Footer 1Footer 2

Sort With Stripe

Header 1Header 2
Data 1Data 2
Footer 1Footer 2

Stripe

Header 1Header 2
Data 1Data 2
Footer 1Footer 2

Instructions

  1. Insert the Table block, found in the Formatting section.
  2. Enter the number of columns and rows needed and click Create Table.
  3. Choose a style from the Styles accordion in the Block Settings if desired.
  4. Use the options in the Table Settings accordion in Block Settings to add a header row or footer row.
  5. Add your data.

Blogs Style Guide: Audio and Video

Audio

This is the caption for an audio file.

Instructions

  1. Insert the Audio block, found in the Common Blocks section.
  2. Upload the audio file, choose it from the Media Library, or insert it from a URL.
  3. Add a caption if desired.

Video Embed (YouTube)

Tomorrow Needs Michigan Tech

This is the caption for a YouTube Video.

Instructions

  1. Add the Video block, found in the Common Blocks section.
  2. Choose the Insert from URL option and paste the YouTube URL into the field. Remember, all videos must be captioned.
  3. Add a caption if desired.

Blogs Style Guide: Quotes and Quotes With Backgrounds

Quote

“This is a quote…”

Megan Ross

Instructions

  1. Insert the Quote block, found in the Common Blocks section.
  2. Enter the quote text, including the quotation marks, in the quote section.
  3. Enter the author information in the citation section, without the dash.

Quote With Background Color

Black

“This is a quote…”

Megan Ross

Dark Gray

“This is a quote…”

Megan Ross

Gold

“This is a quote…”

Megan Ross

Khaki

“This is a quote…”

Megan Ross

Light Gray

“This is a quote…”

Megan Ross

White

“This is a quote…”

Megan Ross

Instructions

  1. Insert the Quote block, found in the Common Blocks section.
  2. Enter the quote text, including the quotation marks, in the quote section.
  3. Enter the author information in the citation section, without the dash.
  4. Choose the desired background color from the Styles accordion in the Block Settings.

Blogs Style Guide: Lists

Ordered Lists

  1. The default ordered list is numbers.
    1. Sub Item #1
    2. Sub Item #2

Lower Alpha

  1. You can also choose Lower Alpha.
  2. Like this.

Lower Greek

  1. Lower Greek is another option.
  2. Like this.

Lower Roman

  1. Another kind is Lower Roman.
  2. Like this.

Upper Alpha

  1. Upper Alpha is available.
  2. Like this.

Upper Roman

  1. The final kind is Upper Roman.
  2. Like this.

Instructions

  1. Insert the List block, found in the Common Blocks section.
  2. Chose the “Convert to numbered list” icon from the bar above the content area.
  3. Use the “Indent list item” or “Outdent list item” icons to create subitems.
  4. To change the number style, select Lower Alpha, Lower Greek, Lower Roman, Upper Alpha, or Upper Roman from the Styles accordion in the Block settings.

Unordered List

  • The default unordered list is disc.
    • Sub Item #1
    • Sub Item #2

Circle

  • You can also choose Circle.
  • Like this.

Square

  • Or Square.
  • Like this.

Instructions

  1. Insert the List block, found in the Common Blocks section.
  2. Use the “Indent list item” or “Outdent list item” icons to create subitems.
  3. To change the bullet style, select Circle, Default, or Square from the Styles accordion in the Block settings.

Additional Options

No Bullets

  • Adding No Bullets . . .
  • Removes the bullets, but keeps the indentation.

Instructions

  1. Insert the List block, found in the Common Blocks section.
  2. Select No Bullets from the Styles accordion in the Block settings.

None

  • Adding None. .. .
  • Removes the bullets and the indentation.

Instructions

  1. Insert the List block, found in the Common Blocks section.
  2. Select “None” from the Styles accordion in the Block settings.

Split

  • (Split) options . . .
  • put the list
  • into two
  • columns

Instructions

  1. Insert the List block, found in the Common Blocks section.
  2. Select the desired styling with (Split) after it from the Styles accordion in the Block settings.