Utah Tech University

Block Types

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

Choose from the following list or scroll down to explore blocks:

Accordion List
Accreditation
Banner
Banner Carousel
Banner with Text
Call to Action (Image, Icon, Text) 3 in 1
Call to Action Spacer
Child Banner with Sticky Jump To nav
Contact
Events
Events Calendar
Events (Ticket)
Faculty/Staff
Gallery
Heading
Hours of Operation
Icon CTA
Image CTA
Notification
Quote Carousel
Related Resources
Skewed Accordion
Skewed Image Text
Staggered Grid
Statistics
Steps List
Table
Text
Text CTA (Retired Block)
2 Column Block
Video Banner
2 Column Modern
Video Banner Modern

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

Click here for more info on the ‘Accordion List’ block

Accreditation Block

Organization Name

Email: webservices@utahtech.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

Click here for more info on the ‘Accreditation’ block

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.

Button
Button 2
Button 3
Button 4

Click here for more info on the ‘Banner’ block

Banner Carousel

Item 1

Add some text and a link below. Add some text and a link below. Add some text and a link below. Add some text and a link below.

Link

Item 2

Add some text and a link below. Add some text and a link below. Add some text and a link below. Add some text and a link below.

Link

Item 3

Add some text and a link below. Add some text and a link below. Add some text and a link below. Add some text and a link below.

Link

Click here for more info on the ‘Banner Carousel’ block

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.

Click here for more info on the ‘Banner with Text’ block

Call to Action (Image, Icon, Text) 3 in 1

Image option

Icon option

Text option

Click here for more info on the ‘Call to Action (Image, Icon, Text) 3 in 1’ block

Call to Action Spacer

University Blocks

Your descriptions here

 Call to Action Spacer block

Child Banner with Sticky Jump To nav

English

Explore the captivating world of words and their many possibilities as expressions of ideas, perspectives, and cultures.

Jump To:

Click here for more info on the ‘Child Banner with sticky jump to nav & Scroll to Top Arrow’ block

Contact

John Doe

Job Title

Email: Jon.Doe@utahtech.edu

Phone: 435-123-4567

Office: Office 1

Click here for more info on the ‘Contact’ block

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

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

Click here for more info on the ‘Events’ block

Events Calendar

Events Calendar

Loading events...
SUN
MON
TUE
WED
THU
FRI
SAT

Contact web services to set up the ‘Events Calendar’ block

Ticket Calendar

Upcoming Events

Loading events...

Contact web services to set up the ‘Ticket Calender’ block

Faculty/Staff

Display image of John Doe

John Doe

Staff Member

Additional information about John Doe.

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

Display image of Jane Doe

Jane Doe

Staff Member

Email: Jane.Doe@utahtech.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@utahtech.edu
Phone: 435-000-0000
Office: Office 123

Josh Doe

PT Employee/Instructor

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

Jack Doe

PT Employee/Instructor

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

Julie Doe

PT Employee/Instructor

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

Click here for more info on the ‘Faculty/Staff’ block

Gallery Block

Click here for more info on the ‘Gallery’ block

This is an H2

This is an H3

This is an H4

This is an H5

This is an H6

Click here for more info on the ‘Heading’ block

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.

Click here for more info on the ‘Hours of Operation’ block

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

Click here for more info on the ‘Icon Call to Action’ block

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

Click here for more info on the ‘Image Call to Action’ block

Notification

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

Click here for more info on the ‘Notification’ block

Quote Carousel

This is a heading

This is a quote this is a quote this is a quote this is a quote this is a quote this is a quote this is a quote this is a quote this is a quote this is a quote

- Link

This is a heading

This is a quote this is a quote this is a quote this is a quote this is a quote this is a quote this is a quote this is a quote this is a quote this is a quote

- Link

Click here for more info on the ‘Quote Carousel’ block

Related Resources

Click here for more info on the ‘Related Resources’ block

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

Click here for more info on the ‘Skewed Accordion’ block

Skewed Image Spacer

Click here for more info on the ‘Skewed Image Spacer’ block

Skewed Image Text

artificial-intelligence-codes-developing-1936299-e1564164353591

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
artificial-intelligence-codes-developing-1936299-e1564164353591

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

Click here for more info on the ‘Skewed Image with Text’ block

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

Click here for more info on the ‘Staggered Grid’ block

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

Click here for more info on the ‘Statistics’ block

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

Click here for more info on the ‘Steps List’ block

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

Click here for more info on the ‘Table’ block

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 - List

  • 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.

Click here for more info on the ‘Text’ block

Text Call to Action (Retired Block)

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?

Click here for more info on the ‘Text Call to Action’ block

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.

Click here for more info on the ‘Two Column’ Block

Two Column Modern

2 Column Modern block

Click here for more info on the ‘Two Column Modern’ block

Video Banner Modern

Let's talk about money now

Hello I wanna Talk about Money

Let's talk about money now

Hello I wanna Talk about Money

Click here for more info on the ‘Video Banner Modern’ block

Video Banner Block

Learn More About This Program

Watch video

Click here for more info on the ‘Video Banner’ block