Skip to main content

Kitchen Sink

In Web Design, the term Kitchen sink, comes from the phrase "everything but the kitchen sink" or "everything and the kitchen sink". The Kitchen Sink page is meant to BE everything in one place, so you can compare and contrast available options for a site.

Text sections support a number of formats by default with "Basic HTML" text formatting including Normal text, Headings 2 through 6, Links, Bold, Italics, Numbered lists, Bulleted lists, Blockquotes, and Images.

Text

Text fonts, sizes, and styles

Heading 2: Crimson Text, 42px

Heading 3: Source Sans Pro, 28px

Heading 4: Crimson Text, 26px

Heading 5: Source Sans Pro, 22px
Heading 6: Source Sans Pro, 20px, All Caps

Normal: Source Sans Pro, 18px

Normal text formatted with bold

Normal text formatted with italics

Links are formatted to match the templates. Avoid using non-descriptive terms like "Click Here", "Read More", or similar terms that provide little to no context for what someone will be clicking on while using screen readers or similar accessibility tools.

Headings should be short and to the point. A very long title, like this one, will return to a new line, and can be overwhelming.

For accessibility reasons, it is recommended to use headings in numerical order without skipping one. Normal text is the exception, and can appear anywhere in that order.

Accessibility Assessment Example Text
Passes Assessment

Heading 2

Heading 3

Heading 3 Again

Heading 4

Heading 5

Heading 2 Again

Heading 3

Heading 3 Again

Fails Assessment

Heading 2

Heading 2 Again

Heading 4 (notice Heading 3 was skipped here)

Heading 5

Numbered list

  1. Item 1
  2. Item 2
  3. Item 3
    1. Sub Item 1
    2. Sub Item 2
      1. Third Level Item 1
      2. Third Level Item 2
    3. Sub Item 3
  4. Item 4
  5. Item 5

Bulleted list

  • Item 2
  • Item 1
  • Item 3
    • Sub Item 1
    • Sub Item 2
      • Third Level Item 1
      • Third Level Item 2
    • Sub Item 3
  • Item 4
  • Item 5

Blockquote Example

This is a blockquote that can be added using the " (double quotation mark) on the admin panel's format bar for this text section.

Images can be added into text sections with Left, center, right, or no alignment

Examples of images at different alignments below with filler text to show what they look like. On mobile they will re-align to take up the full width of the screen.

400 by 300 pixel placeholder with a grey background and white text
Image aligned Left. Inserted images may include a caption to provide context, credit, or an image's description. All images require alt text as part of the upload process for accessibility. Image generated with dummyimage.com

Filler Text: Bibendum enim facilisis gravida neque convallis. Erat imperdiet sed euismod nisi porta lorem. Elit sed vulputate mi sit amet mauris. Ut aliquam purus sit amet luctus venenatis lectus magna. Blandit turpis cursus in hac habitasse. Sollicitudin tempor id eu nisl nunc mi ipsum. Facilisi morbi tempus iaculis urna id. Bibendum at varius vel pharetra vel turpis nunc. Semper risus in hendrerit gravida rutrum quisque. Etiam dignissim diam quis enim. Blandit turpis cursus in hac habitasse platea dictumst quisque. Vel pharetra vel turpis nunc eget. Cursus metus aliquam eleifend mi in. Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci. Duis at tellus at urna. Aliquam vestibulum morbi blandit cursus risus at.

Id diam maecenas ultricies mi eget mauris pharetra. Volutpat sed cras ornare arcu dui vivamus arcu felis. Amet nisl suscipit adipiscing bibendum est ultricies. Vel pretium lectus quam id leo in. Blandit volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque. Enim neque volutpat ac tincidunt vitae semper quis lectus nulla. Enim ut sem viverra aliquet eget sit amet. Cras adipiscing enim eu turpis egestas. Netus et malesuada fames ac turpis egestas. Etiam erat velit scelerisque in dictum non consectetur a.

400 by 300 pixel placeholder with the UMD red background and white text
Image aligned Right. 400 by 300 pixel placeholder with the UMD red background and white text. Image generated with dummyimage.com

Mollis nunc sed id semper risus in. Ante in nibh mauris cursus mattis. Aliquam nulla facilisi cras fermentum odio eu feugiat. Aliquam ut porttitor leo a diam sollicitudin tempor. Sagittis eu volutpat odio facilisis mauris. Ut diam quam nulla porttitor massa id neque aliquam. Risus nec feugiat in fermentum posuere urna nec tincidunt praesent. Id donec ultrices tincidunt arcu. Vitae purus faucibus ornare suspendisse sed nisi. Sagittis id consectetur purus ut. Aliquam purus sit amet luctus. Natoque penatibus et magnis dis parturient montes. Bibendum enim facilisis gravida neque convallis a cras. Id aliquet risus feugiat in ante. Arcu vitae elementum curabitur vitae nunc.

Elementum pulvinar etiam non quam lacus suspendisse faucibus. Vestibulum morbi blandit cursus risus at ultrices mi tempus. Cras fermentum odio eu feugiat pretium nibh. In eu mi bibendum neque. Convallis convallis tellus id interdum. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Tristique sollicitudin nibh sit amet commodo. Pellentesque diam volutpat commodo sed egestas egestas. Sapien eget mi proin sed libero. Integer feugiat scelerisque varius morbi enim nunc faucibus. Quis ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Ipsum a arcu cursus vitae congue. Sit amet mattis vulputate enim nulla. Cum sociis natoque penatibus et magnis dis parturient. Nibh tortor id aliquet lectus proin nibh nisl condimentum id. Aliquet enim tortor at auctor urna nunc. Pellentesque dignissim enim sit amet venenatis urna.

400 by 300 pixel placeholder with a light grey background and UMD red for text
Image has no-alignment (a.k.a: none). 400 by 300 pixel placeholder with a light grey background and UMD red for text. Image generated with dummyimage.com

Habitant morbi tristique senectus et netus et malesuada fames. Nisl tincidunt eget nullam non. Quam elementum pulvinar etiam non. Id diam vel quam elementum. Cursus eget nunc scelerisque viverra. Nunc sed id semper risus in. Fusce id velit ut tortor pretium viverra suspendisse. Et egestas quis ipsum suspendisse ultrices gravida dictum. Ridiculus mus mauris vitae ultricies leo integer malesuada.

---

All the options presented above are part of the Basic HTML formatting available by default across the UMD Terp Templates. More options become available if Full HTML is selected, but are only recommended for advanced users with coding experience.

Dividers

Default (1px), Medium (3px), Large (5px), and XLarge (8px)





Image with Text (Left and Right Aligned)

While text sections support the addition of images, there is a separate "Image with Text" section. Each section supports one image along with a text area. Images can be aligned left or right. Images are pulled from the site's media library (accessible on the admin panel), so you can include images that have been previously uploaded, as well as newly uploaded images. Descriptive "alt-text" is required on each image during the upload process.


400 by 300 pixel placeholder with the UMD yellow/gold background and black text. Image generated with dummyimage.com
Image aligned Left. 400 by 300 pixel placeholder with the UMD yellow/gold background and black text. Image generated with dummyimage.com

Text areas support a number of formats by default with "Basic HTML" text formatting including Normal text, Headings 2 through 6, Links, Bold, Italics, Numbered lists, Bulleted lists, Blockquotes, and Images.

Filler text: Bibendum enim facilisis gravida neque convallis. Erat imperdiet sed euismod nisi porta lorem. Elit sed vulputate mi sit amet mauris. Ut aliquam purus sit amet luctus venenatis lectus magna. Blandit turpis cursus in hac habitasse. Sollicitudin tempor id eu nisl nunc mi ipsum. Facilisi morbi tempus iaculis urna id. Bibendum at varius vel pharetra vel turpis nunc. Semper risus in hendrerit gravida rutrum quisque. Etiam dignissim diam quis enim. Blandit turpis cursus in hac habitasse platea dictumst quisque. Vel pharetra vel turpis nunc eget. Cursus metus aliquam eleifend mi in. Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci. Duis at tellus at urna. Aliquam vestibulum morbi blandit cursus risus at.

Buttons sets have the same style options as those found in bootstrap, The main two used at UMD are Primary, and Secondary. Whether using Button or Link Sets, it is advised to keep titles short, though Link Sets can support slightly longer titles as they appear in a vertical list.


Card Groups (Light and Dark)

Card examples with or without images, and with or without links.


Students outdoors on the Mall on an unseasonably warm February day.
Card title, keep it catchy, keep it short

Text areas support a number of formats by default with "Basic HTML" text formatting including Normal text, Headings 2 through 6, LinksBoldItalics, Numbered lists, Bulleted lists, Blockquotes, and Images.

Card groups help break up related content into manageable chunks for easier understanding, or as a teaser for longer articles/pages.

Keep any link titles short
Students outdoors on the Mall on an unseasonably warm February day.
Cards do not need to include links

Cards without a link do not behave interactively (no hover effects). As mentioned in the previously, Card Groups provide another way to present information with or without an accompanying image for each card.

Like with the card's title, keep the content in text areas short; no more than a couple of short paragraphs. If this card links to a page or article, think of this space as the summary to that page or that article.

Notice this link is within the body text of the card, and does not cause the whole card to become interactive (no hover effect).

Cards can be presented with and without images

Without an image, cards still fill the full height of the space they occupy. If the card has a link, it will still behave interactively with a hover effect.

Filler text: Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet consectetur. Tincidunt augue interdum velit euismod. Non tellus orci ac auctor augue. Feugiat nisl pretium fusce id. Nulla facilisi cras fermentum odio eu feugiat pretium.

Short link text
Students outdoors on the Mall on an unseasonably warm February day.
Card title, keep it catchy, keep it short

Text areas support a number of formats by default with "Basic HTML" text formatting including Normal text, Headings 2 through 6, LinksBoldItalics, Numbered lists, Bulleted lists, Blockquotes, and Images.

Card groups help break up related content into manageable chunks for easier understanding, or as a teaser for longer articles/pages.

Keep any link titles short
Students outdoors on the Mall on an unseasonably warm February day.
Cards do not need to include links

Cards without a link do not behave interactively (no hover effects). As mentioned in the previously, Card Groups provide another way to present information with or without an accompanying image for each card.

Like with the card's title, keep the content in text areas short; no more than a couple of short paragraphs. If this card links to a page or article, think of this space as the summary to that page or that article.

Notice this link is within the body text of the card, and does not cause the whole card to become interactive (no hover effect).

Cards can be presented with and without images

Without an image, cards still fill the full height of the space they occupy. If the card has a link, it will still behave interactively with a hover effect.

Filler text: Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet consectetur. Tincidunt augue interdum velit euismod. Non tellus orci ac auctor augue. Feugiat nisl pretium fusce id. Nulla facilisi cras fermentum odio eu feugiat pretium.

Short link text

Slideshows (Light and Dark)

The first slideshow uses the light theme, and offers 5 examples of slides in varying configurations.


1 of 5
Students outdoors on the Mall on an unseasonably warm February day.
Image caption on a slide are great for giving credit to the source, and/or providing descriptive context to an image
Each slide may include a short and descriptive title
Slides may also include an accompanying paragraph of text with no added formatting. Images for each slide can be added by using options for uploading a new image, or from the site's media library, so you can include an image that was previously uploaded. Descriptive "alt-text" is required on each image during the upload process.

Click through this slideshow to view other examples.
Looking into filled classroom from hallway, students focused on presenter at a dry erase board
Image captions in slideshows are limited to 255 characters. Spaces and punctuation are included in that count.
Slide titles are limited to 255 characters. Spaces and punctuation are included in that count. Even then, keep titles as short as possible, longer titles can be distracting or overwhelming, like this one.
Like longer slide titles, the content in a slide's text area starts to get distracting or overwhelming the longer it gets. There is currently no upward limit to the text in this area. Though, if the content you want to present in this area is longer than a couple of sentences or a short paragraph, it's time to start thinking about using a different way to present this content, like with another Section (i.e. Image with Text, Tabs, or a separate page entirely). Here is some filler text to illustrate what would happen if this section has too much content: Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet consectetur. Tincidunt augue interdum velit euismod. Non tellus orci ac auctor augue. Feugiat nisl pretium fusce id. Nulla facilisi cras fermentum odio eu feugiat pretium. Netus et malesuada fames ac turpis egestas sed. Ornare aenean euismod elementum nisi quis eleifend quam. Eu lobortis elementum nibh tellus molestie nunc non blandit massa.
A view of the Sundial on the Mall with student activity on an unseasonably warm winter day.
A view of the Sundial on the Mall with student activity on an unseasonably warm winter day.
Slide with an image caption and slide title but no text underneath
Students outdoors on the Mall on an unseasonably warm February day.
Students outdoors on the Mall on an unseasonably warm February day.
Slide with an image caption, and slide text, but not title accompanying the image.
Two female students sitting along ODK Fountain with McKeldin Library in the background.
Slide with an image caption, but no accompanying slide title or text.
1 of 5
Students outdoors on the Mall on an unseasonably warm February day.
Image caption on a slide are great for giving credit to the source, and/or providing descriptive context to an image
Each slide may include a short and descriptive title
Slides may also include an accompanying paragraph of text with no added formatting. Images for each slide can be added by using options for uploading a new image, or from the site's media library, so you can include an image that was previously uploaded. Descriptive "alt-text" is required on each image during the upload process.

Click through this slideshow to view other examples.
Looking into filled classroom from hallway, students focused on presenter at a dry erase board
Image captions in slideshows are limited to 255 characters. Spaces and punctuation are included in that count.
Slide titles are limited to 255 characters. Spaces and punctuation are included in that count. Even then, keep titles as short as possible, longer titles can be distracting or overwhelming, like this one.
Like longer slide titles, the content in a slide's text area starts to get distracting or overwhelming the longer it gets. There is currently no upward limit to the text in this area. Though, if the content you want to present in this area is longer than a couple of sentences or a short paragraph, it's time to start thinking about using a different way to present this content, like with another Section (i.e. Image with Text, Tabs, or a separate page entirely). Here is some filler text to illustrate what would happen if this section has too much content: Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet consectetur. Tincidunt augue interdum velit euismod. Non tellus orci ac auctor augue. Feugiat nisl pretium fusce id. Nulla facilisi cras fermentum odio eu feugiat pretium. Netus et malesuada fames ac turpis egestas sed. Ornare aenean euismod elementum nisi quis eleifend quam. Eu lobortis elementum nibh tellus molestie nunc non blandit massa.
A view of the Sundial on the Mall with student activity on an unseasonably warm winter day.
A view of the Sundial on the Mall with student activity on an unseasonably warm winter day.
Slide with an image caption and slide title but no text underneath
Students outdoors on the Mall on an unseasonably warm February day.
Students outdoors on the Mall on an unseasonably warm February day.
Slide with an image caption, and slide text, but not title accompanying the image.
Two female students sitting along ODK Fountain with McKeldin Library in the background.
Slide with an image caption, but no accompanying slide title or text.

Carousel (Light and Dark)

Carousels have the same options as Slideshows, with one key difference. they take up less space on the page, and instead open to take up the whole screen when clicked.


Blockquotes (Light and Dark)


This is a Blockquote, meant for featuring quotes, comments, or messages from experts and other persons of note. Statements like "Fear the Turtle" are great for the Blockquote Section.

Grey placeholder person
Digital Experience Team Office of Strategic Communications

This is a Blockquote, meant for featuring quotes, comments, or messages from experts and other persons of note. Statements like "Fear the Turtle" are great for the Blockquote Section.

Grey placeholder person
Digital Experience Team Office of Strategic Communications

Image (Light and Dark)

The Image Section offers space for a single image that take up the entire width of content on the page. Make sure images are large enough.


Students outdoors on the Mall on an unseasonably warm February day.
Students outdoors on the Mall on an unseasonably warm February day.
Students outdoors on the Mall on an unseasonably warm February day.
Students outdoors on the Mall on an unseasonably warm February day.

Event and News Feeds

Event feeds and News feeds are populated from content stored in the universities hub (hub.umd.edu), which is managed by the Office of Strategic Communications. Both feeds use a modified version of the Card Group Section to display content.


Events featured on Maryland Today - Light Theme

Sorry, no events available.

Latest Athletic and Recreation Events - Dark Theme

Sorry, no events available.


Arts News From Maryland Today - Light Theme

Frederick Douglass/Andrew Johnson collage
Professor's New Book Explores ‘Failed Promise’ of Reconstruction
It was a year of presidential impeachment and struggles over African American voting rights—wait, are we talking about 2021 or 1868? In his new book coming out on Saturday, "The Failed Promise: Reconstruction, Frederick Douglass, and the Impeachment of Andrew Johnson," University of Maryland Distinguished University Professor of English Robert Levine draws the parallels between the centuries.
View Article Professor's New Book Explores ‘Failed Promise’ of Reconstruction
David C. Driskell photo
$790K Mellon Grant to Fund Sculpture Commemorating Late Professor and Artist David Driskell, Expand Center’s Archive
A $790,000 grant from The Andrew W. Mellon Foundation will fund the creation of a new sculpture at the University of Maryland’s David C. Driskell Center and the identification, cataloging, preservation and digitization of prominent archives in the field of African American art.
View Article $790K Mellon Grant to Fund Sculpture Commemorating Late Professor and Artist David Driskell, Expand Center’s Archive
"Terps, as Seen on TV!" illustration
Terps, as Seen on TV!
What TV-bingeing Terps might not realize is just how many fellow University of Marylanders they’ve virtually invited into their living rooms—as actors, directors, producers and writers of some bona fide favorites, promising pilots and cult classics. Some are stage-trained actors from the School of Theatre, Dance, and Performance Studies, while others studied journalism, government and politics, and marketing.
View Article Terps, as Seen on TV!

Arts News From Maryland Today - Dark Theme

Frederick Douglass/Andrew Johnson collage
Professor's New Book Explores ‘Failed Promise’ of Reconstruction
It was a year of presidential impeachment and struggles over African American voting rights—wait, are we talking about 2021 or 1868? In his new book coming out on Saturday, "The Failed Promise: Reconstruction, Frederick Douglass, and the Impeachment of Andrew Johnson," University of Maryland Distinguished University Professor of English Robert Levine draws the parallels between the centuries.
View Article Professor's New Book Explores ‘Failed Promise’ of Reconstruction
David C. Driskell photo
$790K Mellon Grant to Fund Sculpture Commemorating Late Professor and Artist David Driskell, Expand Center’s Archive
A $790,000 grant from The Andrew W. Mellon Foundation will fund the creation of a new sculpture at the University of Maryland’s David C. Driskell Center and the identification, cataloging, preservation and digitization of prominent archives in the field of African American art.
View Article $790K Mellon Grant to Fund Sculpture Commemorating Late Professor and Artist David Driskell, Expand Center’s Archive
"Terps, as Seen on TV!" illustration
Terps, as Seen on TV!
What TV-bingeing Terps might not realize is just how many fellow University of Marylanders they’ve virtually invited into their living rooms—as actors, directors, producers and writers of some bona fide favorites, promising pilots and cult classics. Some are stage-trained actors from the School of Theatre, Dance, and Performance Studies, while others studied journalism, government and politics, and marketing.
View Article Terps, as Seen on TV!

People

The "People" section is the same found on the directory page and employs a manual ordering system.


Video (Light and Dark)

The video section supports videos published to youtube. Follow the "Video Content Tips" on the Admin Panel to properly embed the video.


Experience our beautiful campus from a new perspective – from the sky.
Experience our beautiful campus from a new perspective – from the sky.

Stat Groups (Light and Dark)

Share quick, key numbers about the school, department, or office


####
A short description of the statistic being highlighted to provide context to what the information refers to. Limit Values to 5 characters or less
12
Colleges and Schools
90+
Majors
18:1
Student-to-teacher ratio
800+
Campus clubs and organizations
20
NCAA Division 1 teams
#####
A short description of the statistic being highlighted to provide context to what the information refers to. Limit Values to 5 characters or less
12
Colleges and Schools
90+
Majors
18:1
Student-to-teacher ratio
800+
Campus clubs and organizations
20
NCAA Division 1 teams

Tables (Light and Dark)

Tables can be added manually or automatically filled in from an uploaded .csv file. Cells expand horizontally based on the number of columns, and vertically based on the length of the content. Tables have an optimized view for smaller screens.


header 1 (Row 1): Column 1 header 1 (Row 1): Column 2 header 1 (Row 1): Column 3
Row 2: Column 1 Row 2: Column 2 Row 2: Column 3
Row 3: Column 1 Row 3: Column 2 Row 3: Column 3
Row 4: Column 1 Row 4: Column 2 Row 4: Column 3
Row 5: Column 1: Urna neque viverra justo nec ultrices. Vel turpis nunc eget lorem dolor sed viverra ipsum. Justo nec ultrices dui sapien eget mi. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Eget nulla facilisi etiam dignissim diam quis enim. Row 5: Column 2: Eu consequat ac felis donec et odio pellentesque. Aliquam nulla facilisi cras fermentum odio eu feugiat. Ut tellus elementum sagittis vitae et leo duis. Nibh praesent tristique magna sit amet purus gravida. Row 5: Column 3: Laoreet id donec ultrices tincidunt arcu. Eget duis at tellus at urna condimentum. Et netus et malesuada fames. Ultricies mi eget mauris pharetra. Vestibulum rhoncus est pellentesque elit ullamcorper.
header 1 (Row 1): Column 1 header 1 (Row 1): Column 2 header 1 (Row 1): Column 3
Row 2: Column 1 Row 2: Column 2 Row 2: Column 3
Row 3: Column 1 Row 3: Column 2 Row 3: Column 3
Row 4: Column 1 Row 4: Column 2 Row 4: Column 3
Row 5: Column 1: Urna neque viverra justo nec ultrices. Vel turpis nunc eget lorem dolor sed viverra ipsum. Justo nec ultrices dui sapien eget mi. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Eget nulla facilisi etiam dignissim diam quis enim. Row 5: Column 2: Eu consequat ac felis donec et odio pellentesque. Aliquam nulla facilisi cras fermentum odio eu feugiat. Ut tellus elementum sagittis vitae et leo duis. Nibh praesent tristique magna sit amet purus gravida. Row 5: Column 3: Laoreet id donec ultrices tincidunt arcu. Eget duis at tellus at urna condimentum. Et netus et malesuada fames. Ultricies mi eget mauris pharetra. Vestibulum rhoncus est pellentesque elit ullamcorper.

Accordions


Text Sections within accordions support the same formatting options as self contained Text Sections including Normal text, Headings 2 through 6, LinksBoldItalics, Numbered lists, Bulleted lists, Blockquotes, and Images.

Examples of Buttons and a Blockquote, separated by dividers.


Button Primary
Button Secondary

This is a Blockquote, meant for featuring quotes, comments, or messages from experts and other persons of note. Statements like "Fear the Turtle" are great for the Blockquote Section.

Digital Experience Team Office of Strategic Communications, University of Maryland




Examples of a Table, and a Drupal View (Article feed)


Header 1 (Row 1), Column 1 Header 1 (Row 1), Column 2
Row 2, Column 1 Row 2, Column 2
Row 3, Column 1: Eu consequat ac felis donec et odio pellentesque. Aliquam nulla facilisi cras fermentum odio eu feugiat. Ut tellus elementum sagittis vitae et leo duis. Nibh praesent tristique magna sit amet purus gravida. Row 3, Column 2: Laoreet id donec ultrices tincidunt arcu. Eget duis at tellus at urna condimentum. Et netus et malesuada fames. Ultricies mi eget mauris pharetra. Vestibulum rhoncus est pellentesque elit ullamcorper.

Latest News

  • Example

  • news

Tabs

Keep Tab titles short or they will return to a new line. Each tab includes versions of the Text, Blockquote, Button, Image, and Table section (as well as advanced ones like: Webform, and View).

  • Tab Item 1 — Basics: Text
  • Tab Item 2 — Intermediate: Blockquotes, Buttons, and Images
  • Tab Item 3 — Advanced: Tables, and Views

Text Sections within Tab Items support the same formatting options as self contained Text Sections including Normal text, Headings 2 through 6, LinksBoldItalics, Numbered lists, Bulleted lists, Blockquotes, and Images.

Filler Text: Id diam maecenas ultricies mi eget mauris pharetra. Volutpat sed cras ornare arcu dui vivamus arcu felis. Amet nisl suscipit adipiscing bibendum est ultricies. Vel pretium lectus quam id leo in. Blandit volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque. Enim neque volutpat ac tincidunt vitae semper quis lectus nulla.

Examples of Buttons, a Blockquotes, and Images


 

Button Primary Button Secondary

 


 

This is a Blockquote, meant for featuring quotes, comments, or messages from experts and other persons of note. Statements like "Fear the Turtle" are great for the Blockquote Section.

Grey placeholder person
Digital Experience Team Office of Strategic Communications

 


 

Students outdoors on the Mall on an unseasonably warm February day.
Students outdoors on the Mall on an unseasonably warm February day.

Examples of a Table, and a view (Article feed).

 

Header 1 (Row 1), Column 1 Header 1 (Row 1), Column 2
Row 2, Column 1 Row 2, Column 2
Row 3, Column 1: Eu consequat ac felis donec et odio pellentesque. Aliquam nulla facilisi cras fermentum odio eu feugiat. Ut tellus elementum sagittis vitae et leo duis. Nibh praesent tristique magna sit amet purus gravida. Row 3, Column 2: Laoreet id donec ultrices tincidunt arcu. Eget duis at tellus at urna condimentum. Et netus et malesuada fames. Ultricies mi eget mauris pharetra. Vestibulum rhoncus est pellentesque elit ullamcorper.

Latest News

  • Example

  • news

Two and Three Columns


Text — 2 Columns

Left Column

Each column in this section acts as a separate text section and support the same formatting options including Normal text, Headings 2 through 6, LinksBoldItalics, Numbered lists, Bulleted lists, Blockquotes, and Images.

Filler Text: Id diam maecenas ultricies mi eget mauris pharetra. Volutpat sed cras ornare arcu dui vivamus arcu felis. Amet nisl suscipit adipiscing bibendum est ultricies. Vel pretium lectus quam id leo in. Blandit volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque. Enim neque volutpat ac tincidunt vitae semper quis lectus nulla. Enim ut sem viverra aliquet eget sit amet. Cras adipiscing enim eu turpis egestas. Netus et malesuada fames ac turpis egestas. Etiam erat velit scelerisque in dictum non consectetur a.

Right Column

400 by 300 pixel placeholder with the UMD yellow/gold background and black text. Image generated with dummyimage.com
Image aligned center. 400 by 300 pixel placeholder with the UMD yellow/gold background and black text. Image generated with dummyimage.com

Filler Text: Ipsum a arcu cursus vitae congue. Sit amet mattis vulputate enim nulla. Cum sociis natoque penatibus et magnis dis parturient. Nibh tortor id aliquet lectus proin nibh nisl condimentum id. Aliquet enim tortor at auctor urna nunc. Pellentesque dignissim enim sit amet venenatis urna.

Text — 3 Columns

Left Column

Each column in this section acts as a separate text section and support the same formatting options including Normal text, Headings 2 through 6, LinksBoldItalics, Numbered lists, Bulleted lists, Blockquotes, and Images.

Filler Text: Id diam maecenas ultricies mi eget mauris pharetra. Volutpat sed cras ornare arcu dui vivamus arcu felis. Amet nisl suscipit adipiscing bibendum est ultricies. Vel pretium lectus quam id leo in. Blandit volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque. Enim neque volutpat ac tincidunt vitae semper quis lectus nulla. Enim ut sem viverra aliquet eget sit amet. Cras adipiscing enim eu turpis egestas. Netus et malesuada fames ac turpis egestas. Etiam erat velit scelerisque in dictum non consectetur a.

Center Column

Filler Text: Elementum pulvinar etiam non quam lacus suspendisse faucibus. Vestibulum morbi blandit cursus risus at ultrices mi tempus. Cras fermentum odio eu feugiat pretium nibh. In eu mi bibendum neque. Convallis convallis tellus id interdum. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Tristique sollicitudin nibh sit amet commodo. Pellentesque diam volutpat commodo sed egestas egestas. Sapien eget mi proin sed libero.

400 by 300 pixel placeholder with the UMD red background and white text. Image generated with dummyimage.com
Image aligned center. 400 by 300 pixel placeholder with the UMD red background and white text. Image generated with dummyimage.com

 

Right Column

Inserted images may include a caption to provide context, credit, or an image's description. All images require alt text as part of the upload process for accessibility. Image generated with dummyimage.com
Image aligned Center. Inserted images may include a caption to provide context, credit, or an image's description. All images require alt text as part of the upload process for accessibility. Image generated with dummyimage.com

Filler Text: Habitant morbi tristique senectus et netus et malesuada fames. Nisl tincidunt eget nullam non. Quam elementum pulvinar etiam non. Id diam vel quam elementum. Cursus eget nunc scelerisque viverra. Nunc sed id semper risus in. Fusce id velit ut tortor pretium viverra suspendisse. Et egestas quis ipsum suspendisse ultrices gravida dictum. Ridiculus mus mauris vitae ultricies leo integer malesuada.

Drupal Views

Views are an advanced feature of Drupal sites that allow a site administrator to automatically add content to a section or page based on certain parameters. Here we are using it to list any content of the UMD Terp Article type.


Latest News

  • Example

  • news

  • Maryland Today: Hitting ‘Play’ at Home

    Spoofing our reliance on shopping and technology while omitting any human presence, the enigmatic and boldly animated videos by Jonathan Monaghan MFA ’11 star in a new—and timely—online exhibit at the Art Gallery.


Template Customization

The UMD Terp Templates and The Starter site are designed to align with University branding (color, layout, typography, etc) and accessibility policies. If you have Drupal development experience and wish to customize these template or your site beyond options covered in the template guidelines, modifications must align to those policies. Details can be found on the University of Maryland Brand Toolkit, and the University of Maryland Web Accessibility Policy (pdf).


Fin (The End)

If you have questions about any of the content here consult the University's Drupal Template guidelines. If you still have questions, contact the Office of Strategic Communication's Digital Experience Team.