Style Guide

Style instructions: add the class name in the right column based on the module name. I.e. Block >Row layout > Advanced > Advanced > Additional CSS Class(es). The format should be [module type]-[number]: hero-82. Additional style instructions per module included below. For all styling, adjustments to alignments, text centering, etc may need to be made based on amount of content in the module.

For list items, all styles have been overridden to use the Rwanda List Icon. This is not reflected in the block editor.

For layouts that use the Row Layout as the parent container and there is a margin on the left/right, consider resetting “Content Max Width” (return arrow above the slider) if it is desired to be full width.

H1 Heading 1

H2 Heading 2

H3 Heading 3

H4 Heading 4

H5 Heading 5

paragraph text: lorem ipsum dolar

  • List Item 1
  • List Item 2

This is a quote lorem ipsum dolar

Hero Modules

Hero 82

Write a brief title

CMS configuration:

  • Class: hero-82
  • Text Color
  • Column alignment
Call To Action Secondary Button

Hero 75

Briefly and concisely explain what you do for your audience.

CMS Config:

  • class: hero-75
  • Background colors
  • Image aspect ratios
Call to Action Secondary Button

Hero 24

Briefly and concisely explain what you do for your audience.

class: hero-24

Consider using this if you need to provide more context on why you do what you do. Be engaging. Focus on delivering value to your visitors.

Call To Action Secondary Button

Lesson/Topic Content Modules (Text Focused)

Media and Text 96

Write a short headline

Call to Action Secondary Button

CMS Config:

  • Class: media-text-96
  • In the existing right column, create row layout above the default paragraph text: 50/50 columns
    • Move the paragraphs to the new interior left column and the image to the interior right column
    • Change image aspect ratio to Portrait 2:3
  • Far left (blue) column:
    • Section: background color
    • Text: color
    • Button: border white + 1px
Landscape 10 Nyungwe

Text 18

Type a short headline

class: text-18

This layout has not had any additional styles applied.

Text 28

Add a short title

class: text-18

Update font color

Add a short title

This layout has not had any additional styles applied

Add a short title

Use this space to add a short description.

List 5

Write a clear and relevant header to keep your visitors engaged

If paragraph copy exists, set the bottom margin on the heading above to XL

  • class: list-5
  • This layout has not had any theme styles applied
  • Add unique list items while keeping a consistent phrasing style and similar line lengths
  • Add unique list items while keeping a consistent phrasing style and similar line lengths
  • Add unique list items while keeping a consistent phrasing style and similar line lengths

List 13

Suggested change: Heading to h3

  • class: list-13
  • Add unique list items while keeping a consistent phrasing style and similar line lengths
  • Add unique list items while keeping a consistent phrasing style and similar line lengths

Give your list item a title

  • Add unique list items while keeping a consistent phrasing style and similar line lengths
  • Add unique list items while keeping a consistent phrasing style and similar line lengths
  • Add unique list items while keeping a consistent phrasing style and similar line lengths

Text + Media Modules (Side by Side)

Media and Text 2

Add a compelling title for your section to engage your audience.

class: media-text-2

Call To Action

Media and Text 42

Add an overline

Add a compelling title for your section to engage your audience.

class: media-text-42

This layout has not any styles added.

Update the background colors as desired.

Media and Text 7

Add a compelling title for your section to engage your audience.

class: media-text-7

image: aspect ratio square 1:1, mask: hexagon

Call To Action

Media and Text 8

Add a compelling title for your section to engage your audience.

class: media-text-8

image: aspect ratio square 1:1

image > style: Mask Settings: Hexigon

Call To Action

Image Grid/Gallery Modules

Columns 26

Write a short headline

class: columns-26

Reset text Section setting for Content max-width. Reset left and right Margins to auto. Bottom Margin: XXL

Reset individual image border radius to 0

Center text for individual text as desired.

Add a descriptive title for the column.

Add a descriptive title for the column.

Add a descriptive title for the column.

Add a descriptive title for the column.

Add a descriptive title for the column.

Add a descriptive title for the column.

Gallery 17

Add a succinct headline

class: gallery-17

Remove existing paragraph to use default styles

Remove section background color

Change this Section Vertical Alignment to Center

Accordion Module (FAQs / Expandable Details)

Accordion 31

Add a short headline

class: accordion-31

Image: reset border radius

By default, this panel is concealed and appears when the user clicks on the section title. Input relevant information about its title using paragraphs or bullet points. Accordions can enhance the user experience when utilized effectively. They allow users to choose what they want to read and disregard the rest. Accordions are often utilized for frequently asked questions (FAQs).

By default, this panel is concealed and appears when the user clicks on the section title. Input relevant information about its title using paragraphs or bullet points. Accordions can enhance the user experience when utilized effectively. They allow users to choose what they want to read and disregard the rest. Accordions are often utilized for frequently asked questions (FAQs).

By default, this panel is concealed and appears when the user clicks on the section title. Input relevant information about its title using paragraphs or bullet points. Accordions can enhance the user experience when utilized effectively. They allow users to choose what they want to read and disregard the rest. Accordions are often utilized for frequently asked questions (FAQs).

By default, this panel is concealed and appears when the user clicks on the section title. Input relevant information about its title using paragraphs or bullet points. Accordions can enhance the user experience when utilized effectively. They allow users to choose what they want to read and disregard the rest. Accordions are often utilized for frequently asked questions (FAQs).

Accordion 12

Add a short headline

class: accordion-12

Remove Row Layout Top and Bottom Dividers

Adjust Row Layout top and bottom padding as desired

Update the heading to an actual heading type H2, center text

Remove or reset the paragraph text in each accordion as desired

By default, this panel is concealed and appears when the user clicks on the section title. Input relevant information about its title using paragraphs or bullet points. Accordions can enhance the user experience when utilized effectively. They allow users to choose what they want to read and disregard the rest. Accordions are often utilized for frequently asked questions (FAQs).

By default, this panel is concealed and appears when the user clicks on the section title. Input relevant information about its title using paragraphs or bullet points. Accordions can enhance the user experience when utilized effectively. They allow users to choose what they want to read and disregard the rest. Accordions are often utilized for frequently asked questions (FAQs).

By default, this panel is concealed and appears when the user clicks on the section title. Input relevant information about its title using paragraphs or bullet points. Accordions can enhance the user experience when utilized effectively. They allow users to choose what they want to read and disregard the rest. Accordions are often utilized for frequently asked questions (FAQs).

By default, this panel is concealed and appears when the user clicks on the section title. Input relevant information about its title using paragraphs or bullet points. Accordions can enhance the user experience when utilized effectively. They allow users to choose what they want to read and disregard the rest. Accordions are often utilized for frequently asked questions (FAQs).

Video Embed Block (Full Width)

Video 20

For both video modules an image and a URL for the image must be set. Only videos hosted on YouTube/Vimeo/VideoPress are supported.

Write a succinct headline here

class: video-20

Set video or other containers width, add/remove text columns, as needed for amount of copy

Support your idea with a clear, descriptive sentence or phrase that has a consistent writing style.

Call To Action
Play

Media and Text 47

Class: media-text-47

Add the video URL for the button, which will play on the page. The CTA will link out.

Write a short headline

Call To Action

Icon List (Features/Highlights)

List 37

class: list-37

Update Settings:

  • Info Box > Quick Layouts
  • Update colors on Info Box > Learn More Settings
  • Change Media Settings > Icon to an Image to use a custom Icon, you may have to adjust the width of the image (40-60 depending on aspect ratio of image)

Reset settings:

  • Row Layout background color
  • Info Box background color: Reset, Hover: reset
  • Info Box Border: 0
  • Info Box > Text Settings > Reset Text Color

Give your list item a title

Use this short paragraph to write a supporting description of your list item. Remember to let your readers know why this list item is essential.

Call To Action

Give your list item a title

Use this short paragraph to write a supporting description of your list item. Remember to let your readers know why this list item is essential.

Call To Action

Give your list item a title

Use this short paragraph to write a supporting description of your list item. Remember to let your readers know why this list item is essential.

Call To Action

Give your list item a title

Use this short paragraph to write a supporting description of your list item. Remember to let your readers know why this list item is essential.

Call To Action

Give your list item a title

Use this short paragraph to write a supporting description of your list item. Remember to let your readers know why this list item is essential.

Call To Action

Give your list item a title

Use this short paragraph to write a supporting description of your list item. Remember to let your readers know why this list item is essential.

Call To Action

List 40

class: list-40

Update: Info Box > Style > Media > Icon background color (and color if using an icon)

Give your list item a title

Add a single and succinct list item

Give your list item a title

Add a single and succinct list item

Give your list item a title

Add a single and succinct list item

Give your list item a title

Add a single and succinct list item

Call to Action (Button Focused)

Call to Action 2

class: cta-2

Update:

  • Background color
  • Image aspect ratio to square 1:1
  • Image Max Image Width reset
  • Image Style > Mask Settings > Hexagon
  • Image Advanced > Margin 0 0 0 -70%
  • Image (in WYSIWYG) Align Center
  • Row Layout > Update columns to 75:25 (in WYSIWYG, drag the middle line)
  • Left column/section add 1px border gray
  • Left column/section add padding
Call To Action

Form 8 (form removed for simple CTA)

Add A Title For Your Form

class: cta-8

Briefly describe what the form is for or provide additional context if required. Use inviting language.

Call to Action