Block Types

This page has been created for you by Web Services to offer a visual of the different block types, shown alphabetically.

Accordion List

Item 1

Clicking on an item causes it to expand, revealing text. This is a great block to use for step processes, frequently asked questions, and more! Pro-tip: Do NOT use the accordion list block within columns. We haven’t set any limit to the number of rows that can be added to this block- but please don’t go crazy. With great power comes great responsibility. Clicking on an item causes it to expand, revealing text. This is a great block to use for step processes, frequently asked questions, and more! Pro-tip: Do NOT use the accordion list block within columns. We haven’t set any limit to the number of rows that can be added to this block- but please don’t go crazy. With great power comes great responsibility.

Call to Action

Item 2

Clicking on an item causes it to expand, revealing text. This is a great block to use for step processes, frequently asked questions, and more! Pro-tip: Do NOT use the accordion list block within columns. We haven’t set any limit to the number of rows that can be added to this block- but please don’t go crazy. With great power comes great responsibility.
You can also add a link (shown below) if you so desire.

Call to Action

Item 3

Clicking on an item causes it to expand, revealing text. This is a great block to use for step processes, frequently asked questions, and more! Pro-tip: Do NOT use the accordion list block within columns. We haven’t set any limit to the number of rows that can be added to this block- but please don’t go crazy. With great power comes great responsibility.
You can also add a link (shown below) if you so desire.

Call to Action

Accreditation Block

Organization Name

Email: webservices@dixie.edu

Phone: 435-879-4297

Fax: 435-879-4297

Address:

225 S University Ave.
St George, UT
84770

You can add a little text describing the organization here if you so desire, as well as an address, phone number, and link to their website.

View Accreditation

Superscript Title

Banner

It’s optional to include text in the page title banner. If you have more than a few short sentences, make sure to select the ‘card’ option in the block settings.

Banner Carousel

Banner with Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Contact

John Doe

Job Title

Email: Jon.Doe@dixie.edu

Phone: 435-123-4567

Office: Office 1

Events Block

Jan 31, 2020 Event 1


Location

Short description (under 144 characters). Short description (under 144 characters). Short description (under 144 characters).

Optional Link

Jan 29, 2020 Event 2 - No Image

Short description (under 144 characters). Short description (under 144 characters). Short description (under 144 characters).

Nov 06-09, 2019 Event 3

See how this dark/busy image makes the text more difficult to read? It would be better to stick to the default grey box as shown in Event 2. See how this dark/busy image makes the text more difficult to read? It would be better to stick to the default grey box as shown in Event 2.

Optional link

Nov 30, 2019 Event 4


Location

Faculty/Staff

Display image of John Doe

John Doe

Staff Member

Additional information about John Doe.

Email: John.Doe@dixie.edu
Phone: 435-000-0000
Office: Office 123

Display image of Jane Doe

Jane Doe

Staff Member

Email: Jane.Doe@dixie.edu
Phone: 435-000-0000
Office: Office 123

Display image of Joe Doe

Joe Doe

Staff Member

Additional information about Joe Doe.

Email: Joe.Doe@dixie.edu
Phone: 435-000-0000
Office: Office 123

Josh Doe

PT Employee/Instructor

Email: Josh.Doe@dixie.edu
Phone: 435-000-0000
Office: Office 123

Jack Doe

PT Employee/Instructor

Email: Jack.Doe@dixie.edu
Phone: 435-000-0000
Office: Office 123

Julie Doe

PT Employee/Instructor

Email: Julie.Doe@dixie.edu
Phone: 435-000-0000
Office: Office 123

Gallery Block

This is an H2

This is an H3

This is an H4

This is an H5
This is an H6

Hours of Operation

Sunday

    Closed.

Monday

  • 8:00 am - 12:00 pm
  • 1:00 pm - 5:00 pm

Tuesday

  • 9:00 am - 6:00 pm

Wednesday

  • 6:00 am - 4:00 pm

Thursday

  • 8:00 am - 7:00 pm

Friday

  • 11:00 am - 5:00 pm

Saturday

    Closed.

Icon Call to Action

Heading

Add a short description. Add a short description. Add a short description. Add a short description.

Link text

Heading

Add a short description. Add a short description. Add a short description. Add a short description.

Link text

Image Call to Action

Image
CTA

Add a short description. Add a short description. Add a short description. Add a short description. Add a short description. Add a short description. Add a short description. Add a short description. Add a short description.

Link Text

Image CTA (Card)

Add a short description. Add a short description. Add a short description. Add a short description. Add a short description. Add a short description. Add a short description. Add a short description. Add a short description. Add a short description.

Link text

Mid-Page Banner

Notification

Students: Need help deciding on a major? Talk to an advisor today.

Primary Button

Quote Carousel

Related Resources

Skewed Accordion

Heading 1

add some text right here add some text right here add some text right here add some text right here add some text right here add some text right here add some text right here add some text right here add some text right here add some text right here add some text right here add some text right here add some text right here add some text right here

LINK TEXT
Heading 2

add some text right here add some text right here add some text right here add some text right here add some text right here add some text right here add some text right here add some text right here add some text right here add some text right here add some text right here add some text right here add some text right here add some text right here

LINK TEXT
Heading 3

add some text right here add some text right here add some text right here add some text right here add some text right here add some text right here add some text right here add some text right here add some text right here add some text right here add some text right here add some text right here add some text right here add some text right here

link text
Heading 4

add some text right here add some text right here add some text right here add some text right here add some text right here add some text right here add some text right here add some text right here add some text right here add some text right here add some text right here add some text right here add some text right here add some text right here

Link text

Skewed Image Spacer

Skewed Image Text

Heading

This is the ‘skewed image text’ block with the image position on the right. This is the ‘skewed image text’ block with the image position on the right. This is the ‘skewed image text’ block with the image position on the right. This is the ‘skewed image text’ block with the image position on the right. This is the ‘skewed image text’ block with the image position on the right.

Link text

Heading

This is the ‘skewed image text’ block with the image position on the left. This is the ‘skewed image text’ block with the image position on the left. This is the ‘skewed image text’ block with the image position on the left.

Link text

Staggered Grid

Heading

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

Heading

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

Statistics

Top 5%

this is step one this is step one this is step one this is step one this is step one this is step one this is step one this is step one this is step one

step 2

this is step two this is step two this is step two this is step two this is step two

Steps List

1

This is the first step

Include a sentence or two providing more information about the first step. You can also also a link below if desired.

This is a link
2

This is the second step

Include a sentence or two providing more information about the second step. You can also also a link below if desired.

3

This is the third step

Include a sentence or two providing more information about the third step. You can also also a link below if desired.

Link Title

Table

This is a column

This is a column

This is a column

Some text in a tableSome text in a tableSome text in a table
Some text in a tableSome text in a tableSome text in a table
Some text in a tableSome text in a tableSome text in a table

Text – not in card

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

Text - in card

Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium.Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium.Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro.

Text Call to Action

Heading

This is a text call to action with a decorative grey box. Add the box by checking ‘Shadow’ in the block settings.

Link text

Heading

Text call to action in a three column block. Text call to action in a three column block. Text call to action in a three column block.

Link text

Heading

Text call to action in a three column block with no link. Notice the extra white space?

Text call to action in a three column block with no link. Notice the extra white space?

two column block (1)

This is a two column block with a small image on the left and text on the right. This is a two column block with a small image on the left and text on the right. This is a two column block with a small image on the left and text on the right.
This is a two column block with a small image on the left and text on the right. This is a two column block with a small image on the left and text on the right.

Two Column Block (2)

This is a two column block with a large image on the right and text on the left, and an offset media border. This is a two column block with a large image on the right and text on the left, and an offset media border. This is a two column block with a large image on the right and text on the left, and an offset media border. This is a two column block with a large image on the right and text on the left, and an offset media border.

This is a two column block with a large image on the right and text on the left, and an offset media border. This is a two column block with a large image on the right and text on the left, and an offset media border.

two column block (3) - both text

This is a two column block with text on both sides. This is a two column block with text on both sides. This is a two column block with text on both sides. This is a two column block with text on both sides. This is a two column block with text on both sides. This is a two column block with text on both sides. This is a two column block with text on both sides.
This is a two column block with text on both sides.

This is a two column block with text on both sides. This is a two column block with text on both sides. This is a two column block with text on both sides. This is a two column block with text on both sides. This is a two column block with text on both sides. This is a two column block with text on both sides. This is a two column block with text on both sides. This is a two column block with text on both sides. This is a two column block with text on both sides.

This is a two column block with text on both sides. This is a two column block with text on both sides. This is a two column block with text on both sides. This is a two column block with text on both sides. This is a two column block with text on both sides. This is a two column block with text on both sides. This is a two column block with text on both sides.

This is a two column block with text on both sides. This is a two column block with text on both sides. This is a two column block with text on both sides. This is a two column block with text on both sides. This is a two column block with text on both sides. This is a two column block with text on both sides. This is a two column block with text on both sides.