Style Guide - Evangel University be_ixf;ym_202207 d_02; ct_50

You Are Here:

Style Guide


Custom CSS Classes


eu-alert-bar

Create a Full-Width Container Block with a Paragraph tag. Assign CSS class at the Container Level.




eu-blog-grid

Create a Post-and-Page-Grid Block. Select the number of Items and Columns you want to display from the settings on the side. Assign the CSS class to the Post-and-Page-Grid Block.




eu-columns-touching

Create a Columns Block. Insert content and assign background and text color. Assign the CSS class to the Columns Level.

Without Class Assigned

asdfasdf

adsfsad

asdfasdf

With Class Assigned

asdfasdf

adsfsad

asdfasdf




eu-fifty-fifty

&

eu-text

&

eu-fifty-fifty-flip

Create a 50/50 Advanced Columns Block. Create an Image Block and Pick an Image. In the other Column put some Content and Pick a Background for the column and Text Color for the paragraph block. Assign the CSS class eu-fifty-fifty to the Columns Level. Assign the CSS eu-text at the Column Level that text is in. Assign the CSS class eu-fifty-fifty-flip to the Columns Level if you want the columns to flip for mobile.

Some Text in the other 50% Column.

Some Text in the other 50% Column.




eu-gray-bar

Create a Full-Width Container Block with a List Block inside. Add links to list text. Assign CSS class at the Container Level.




Heroes

Hero Large

Gutenberg Blocks

Create a Full-Width Container Block. Add a background image, Header 1 Block with a text color, and a Header 2 Block. Assign the CSS class at the Container Level.

Light

Header 1

Header 2

Dark

Header 1

Header 2

Primary Hero

Gutenberg Blocks

Create a Full-Width Container Block with a Header1, Header2, and Paragraph Block. Assign CSS class at the Container Level.

Light

Header 1

Header 2

A Paragraph Block. With some text.

Dark

Header 1

The Header 2

A Paragraph Block. With some text.




eu-link-box

Create an Image Block. Upload image and add a caption. Assign the CSS class at the Image Level.




eu-link-strip

Create a Full-Width Container Block. Add a Paragraph Block with a Link. Pick the Background and Text Color. Assign the CSS class at the Container Level.




eu-slash-caption

Create an Image Block. Add the Image with a Caption. Assign the CSS class at the Image Level.

This is the caption



eu-slash-header-container

Create a Container Block. Create a Header 6 Block. Pick the Background and Text Color(the text color will also be the color of the Triangle). Assign the CSS class at the Container Level.

This is the Header 6



eu-slash-image-fifty

Create a 50/50 Advanced Columns Block. Create an Image Block and Pick an Image. In the other Column put some Content. Assign the CSS class at the Image Level. This will also be used with CSS classes eu-fifty-fifty and eu-text.

Some Text in the other 50% Column.




YouVisit

Custom Block

Type in /YouVisit and select YouVisit from the dropdown. This will automatically load the YouVisit embed code on the website. Please do not include more than one of these banners per page.




Social Bar Above Footer

To turn on the Social Bar select the Turn On Social Bar Toggle to On in the Page settings to the right.


Core CSS Styling


Header One – Should only be used once per page for the title

Header Two

Header Three

Header Four

Header Five
Header Six

This is a paragraph tag – Default

This is a paragraph tag – Small

This is a paragraph tag – Medium

This is a paragraph tag – Large

This is a paragraph tag – Huge


  • Bullet List
  • Bullet List
  • Bullet List

“This is a BlockQuote. This is a BlockQuote. This is a BlockQuote”