Kitchen Sink

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.

Each section on this page includes a link to its relevant guidelines page with detailed instructions for adding widgets and content to your site.

Text Widgets

Text widgets and text areas, including the WYSIWYG (pronounced wiz-ee-wig) widget, 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, and embedded media. You will find the same format options in the Rich Text Areas of other widgets, as you do in the Text Widget

Guidelines for Text Widgets

Text fonts, sizes, and styles:

Heading 2

Heading 3

Heading 4

Heading 5: Source Sans Pro, 22px

Heading 6

Normal

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.

Use an Accessible Heading Order

For accessibility compliance, use Headings in numerical order, as if creating a list outline, and without skipping any. “Normal” text is the exception, and can appear anywhere in that order. Skipping a heading for any reason (i.e.: using a Heading 1, followed by a Heading 3, and skipping Heading 2) can cause confusion, especially for someone who relies on a screen reader to browse a site. Users might think they missed some piece of content. Learn more about accessibility compliance for headings, and general accessibility compliance at the Web Accessibility Initiative.

Web Accessibility Initiative: Accessibility Compliance and Headings

Web Accessibility Initiative: General Accessibility Compliance

Numbered list

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

Bulleted list

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

Mixed list (Numbered and Bulleted)

Ordered list Item A
Ordered list item B
- Sub bulleted list item 1
- Sub bulleted list item 2
Ordered list item C

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.

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.

Vivamus at augue eget arcu dictum varius. Nam aliquam sem et tortor consequat id porta nibh venenatis. A arcu cursus vitae congue. Non consectetur a erat nam at. Non arcu risus quis varius quam quisque id. Eros donec ac odio tempor orci dapibus ultrices in iaculis. Massa ultricies mi quis hendrerit dolor magna eget est lorem. Ac tincidunt vitae semper quis lectus nulla at. Et leo duis ut diam quam. Tempus quam pellentesque nec nam aliquam sem et tortor.

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

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.

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.

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.

Basic vs Full HTML

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.

Learn more about Full HTML Text Areas

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec molestie est. Pellentesque tincidunt mauris eu turpis mollis, ac egestas velit ultricies. Quisque mollis sem eget gravida scelerisque. Vestibulum aliquet, lectus eu viverra cursus, lacus libero pellentesque magna, eu molestie lectus diam commodo purus. Quisque porta blandit volutpat. Quisque pellentesque dictum mauris, sed molestie orci hendrerit vitae. Maecenas suscipit, tellus a ultrices suscipit, nulla nunc lobortis orci, vitae elementum sapien purus quis justo. Aliquam erat volutpat. Aenean dui diam, laoreet quis metus non, varius bibendum odio. Quisque quis sapien finibus, aliquam nulla nec, sagittis arcu. Proin efficitur tincidunt porttitor. Mauris tristique velit eu arcu pharetra ultrices at in lectus.

Fusce dapibus porttitor magna ut cursus. Maecenas mollis tempus nulla eget facilisis. Donec dignissim erat vitae ligula rutrum euismod. Nulla sed aliquet orci. Vestibulum ultrices nisl libero. Vestibulum eleifend semper mi, ac consectetur nunc tristique ac. Sed sed faucibus felis. Quisque nec ipsum imperdiet erat auctor egestas. Etiam lorem lorem, congue ac nisl vitae, pharetra porttitor metus.

Pellentesque elit tellus, tincidunt eget pretium ultricies, malesuada et felis. Curabitur quis tellus eu augue consectetur condimentum ac sed sem. Sed finibus sagittis est eget tincidunt. Nulla efficitur tortor leo, in placerat lectus iaculis eu. Etiam finibus fermentum diam eget molestie. Nulla mi felis, tincidunt eu imperdiet at, ornare a mauris. Vivamus at mattis arcu. Suspendisse imperdiet ligula nulla, in pulvinar nisi lacinia sed. Fusce facilisis lectus quis posuere porttitor. Donec vehicula nisl hendrerit risus varius aliquet. Duis sed lectus ac leo pharetra euismod ac ut velit.

Etiam viverra mi lectus, nec maximus ligula bibendum a. Praesent tincidunt laoreet dignissim. Duis mattis lectus eget bibendum finibus. Nam fringilla mattis enim a lobortis. Cras mollis ante enim, et hendrerit leo rutrum eget. Ut non fermentum sapien. Maecenas et quam accumsan, cursus orci non, malesuada nibh. Vivamus iaculis, metus vel efficitur elementum, sem dui scelerisque odio, ut ornare nisi nulla non odio. Duis et sapien eget purus eleifend fermentum.

Nunc sed convallis tellus. Sed congue nisl nulla, sit amet efficitur erat interdum bibendum. Suspendisse lacus nisi, fermentum et tempus non, interdum et urna. Nulla nec nibh leo. Vestibulum eleifend placerat erat, eget finibus libero sodales et. Nam commodo sit amet lectus a maximus. In sollicitudin ex massa, sit amet pellentesque ex finibus in. In ante augue, lacinia vel mauris in, cursus bibendum lectus. Vivamus non fermentum mauris, non ullamcorper sapien. Donec quis lectus convallis turpis convallis sollicitudin a id mauris. Donec metus nisi, pellentesque eleifend iaculis at, iaculis sed odio. Mauris scelerisque velit ac risus interdum, sit amet ullamcorper lectus tincidunt. Morbi congue blandit ipsum ac egestas.