Examples of Paragraph Elements on Text Page

Purpose

The purpose of this page and the Landing page is to provide examples of all the Paragraphs Elements available to build out your web pages in UM-Dearborn's Drupal environment.

Following each example is a link to written step-by-step instructions and video demonstration.

If you have any questions, please feel free to contact the Web Services team.

 

 

Text & Media Paragraph Element

Student with blue backpack starting on path to UM-Dearborn
Student walking through UM-Dearborn campus.

Choose from bachelor’s degree programs in the liberal arts and sciences, engineering, health and human services, business and education.

Broaden your study by pursuing a double major or minor. Sharpen your skills in a co-op or internship. Or apply for our competitive honors program which offers even smaller classes, strong ties to faculty and project-based learning with other creative, committed students. Your education is yours to tailor. At UM-Dearborn, we give you the tools to succeed.

 

 

 

 

Hallway with flags of nations from around the world displayed.

Students arrive from more than 19 countries and 18 states, bringing a variety of different educational, professional, and social backgrounds. Our students benefit from this diversity because it encourages a wide range of perspectives and solutions to real-world problems.

The College of Business continues to build partnerships with universities around the globe, including China, Italy, India and Taiwan, to help prepare students for success in today’s global economy.

 

 

 

(The 'Text & Media' paragraph element can contain multiple paragraphs of text, hyperlinks and an image that can be positioned - left, center or right.)

 

  Learn more about the Content Dashboard and Page Editing, Part I and Part II

--------------------------------------------------------------

Call to Action

 

  Watch how to create the Call To Action.

--------------------------------------------------------------

Accordion

Program Educational Objectives

The educational goal of the PACS certificate is to provide students with essential computer science concepts, basic security principles, and the tools and experience necessary for an entry-level position in IT-Security.

 

  Watch how to create the Accordion.

--------------------------------------------------------------

Multi Image Carousel

 

  Watch how to create the Multi Image Carousel.

--------------------------------------------------------------

Embedded Video

Example of 2 embedded videos displayed side by side.

 

  Watch how to create Embedded Video.

--------------------------------------------------------------

Links Grid

 

  Watch how to created Links Grid.

--------------------------------------------------------------

Single Image Carousel

 

  Watch how to create Single Image Carousel.

--------------------------------------------------------------

Cards

 

  Watch how to created Cards.

--------------------------------------------------------------

Embedded Video with Callout Quote

As a first generation American, I feel incredibly grateful for the opportunities I’ve had in the United States and I’d love to use my medical education to help improve healthcare quality.

Raehanna Ahmed, ‘19 Biological Sciences

 

  Watch how to create Embedded Video with Callout Quote.

--------------------------------------------------------------

Quote with Media

By becoming part of the CASL community, your time at UM-Dearborn will be life-changing and unforgettable.

Dagmar Budikova

Dean of CASL & Professor of Geography

Visit CASL

 

  Watch how to create Quote with Media.

--------------------------------------------------------------

Automated Events Grid

Example of an Automated Events Grid component. This one features Upcoming Events: Welcome Back Events, Meet the Firms: Accounting and Finance Career Fair and UM-Dearborn Graduate Open House (9.30.25)

 

  Watch how to create Automated Events Grid.

--------------------------------------------------------------

Automated News Grid

Example of Automated News Grid from CASL featuring: 'A once in a lifetime experience', Summer program connects girls to STEM education, 'I'm here to build pathways to justice', and Five fun things to do this summer.

 

  Watch how to create Automated News Grid.

--------------------------------------------------------------

Awards/Badges

checkbox

3.68

Average GPA of incoming freshmen

State of Michigan icon

94%

are Michigan residents representing 49 counties

world map icon

94%

are Michigan residents representing 49 counties

49%

of new students (FTIAC and Transfer) are first-generation college students

29%

students of color

44%

are Pell eligible

 

  Watch how to create Awards and Badges.

--------------------------------------------------------------

Timely Update

Example of Timely Update component: Title: Wolvering Welcome Day is on Tuesday, August 26. Wolverine Welcome Dat is the final step in the orientation process for all incoming students each Fall semester. The day is designed for you to explore campus, meet your fellow Dearborn Wolverines, and get an introduction to campus life at the University of Michigan-Dearborn.

 

  Watch to create Timely Update.

--------------------------------------------------------------

 

Faculty/Staff Grid

Example of 8 faculty members from Natural Science department listed in a Faculty/Staff Grid component

 

  Watch how to create Faculty/Staff Grid.

--------------------------------------------------------------

Faculty/Staff Filterable List

Filterable List of 3 faculty from Engineering in the Filterable Faculty/Staff List component

 

  Watch to create Faculty/Staff Filterable List.

--------------------------------------------------------------

Filterable Events List

Example of 6 events in the Events Filterable List component

 

  Watch to create Filterable Events List.

--------------------------------------------------------------

News Filterable List

An example of 3 news stories in the News Filterable List component

 

  Watch to create News Filterable List.

--------------------------------------------------------------

 

Program List

Example of Program List component filtered by 'Doctoral Degree' and 'College of Education, Health, and Human Services' displaying 1 result: Education, EdD degree.

 

  Watch to create Program List.

--------------------------------------------------------------

 

Admissions & Aid

 

  Watch to create Admissions & Aid.

Description | Step-by-Step Instructions

--------------------------------------------------------------

 

Next Steps

Next Steps

Become a part of the UM-Dearborn community and put your dreams to work for you.

 

  Watch to create Next Steps.

Description | Step-by-Step Instructions

--------------------------------------------------------------

 

Visual Router Panel

Students walking on campus

Getting Around

How to get to campus and how to get around once you’re here

 

  Watch to create Visual Router Panel.

Description | Step-by-Step Instructions

--------------------------------------------------------------

 

Visual Router Grid

 

  Watch to create Visual Router Grid.

Description | Step-by-Step Instructions

--------------------------------------------------------------