Skip to main content

Housing & Food Services

Design library

Hero image

The hero image should be worth 1,000 words. It should represent the page purpose in one image. Not all pages warrant a hero image. Marketing pages at Level 1 or 2, generally employ hero images to support the content.

Student moving in

Landing page hero

Used for marketing and promotional content. Generally developed with email. Invite user to engage with CTA button. Photo should be superior quality. Placed at the top of the page below page title.

Button text

Card widget

A card is a scannable snapshot. It previews enough to identify the topic. It invites us to learn more and interact, in that order. Cards are generally used to present children pages.

Cards are flexible and can accommodate content:

  • with or without images
  • with different background colors
  • with different heading levels
Entrance to District Market

Heading 3

Card with grey background

Dorm room in Cedar Hall

Heading 4

This is a gold card.

This is a featured card

Featured cards are used to invite users to explore a lateral page at the Level 1 hierarchy.

Grouping content

Cards can be grouped under a heading when the content on the cards is related. Use the Light Gray or Light Gold background colors

Residents enjoying a game of pool in Area 01

About 9-month housing

Card content goes here

Graduate student reading in her apartment

About 12-month housing

Card content here

Happy family

About Family housing

card content here

These separate elements belong to one group

Card elements can be used for purposes other than to preview content. In this case, white cards on a grey background are used to group related content chunks.

Item one

This content is part of group, such as a list of amenities or locations.

Item Two

This item is part of a group, such as amenities or locations.

Item Three

This item is part of a group, such as amenities or locations.

Item Four

This item is part of a group, such as amenities or locations.

Heading 2

Headings should always be followed by text and flow from heading 2 down to the next level in the hierarchy. This is for accessibility. It is not a good solution to have 2 headings in a row. If you find yourself in that content predicament, try using an inline heading instead or rewrite your content.

Use the WYSIWYG tool bar to select and style content.

Heading 3

Undergraduates: This is a paragraph with in inline heading so that it stands out from the other topics.

Graduate Students: This is a paragraph with in inline heading so that it stands out from the other topics.

Families: This is a paragraph with in inline heading so that it stands out from the other topics.

Heading 3

This is a a link from HTML to a specific page in a PDF document. Page 4 to be precise.

Heading 4

  • Headings should always be followed by text.
  • Sometimes that text is a list, which should be styled using bullets.
  • A bulleted list should have at least 3 sentences but not more than 7 (as a general rule). 

Questions widget? Contact emailaddress@uw.edu.

Tables

Use a table when you want to display data. An HTML table is a great way to organize content such as pricing, feature comparisons, nutrition facts or other tabular data.

Table column 1 title Column 2 title Column 3 title
Table data Table data Table data
Table data Table data Table data