Five-Button Header


Live Site Example: Gastroenterology and Hepatology


five-button-header-desktop-mobile


Usage Guidelines: Five-Button Header

  • Two sets of images are required. Photos can be uploaded with square 90-degree corners because the 10px rounded corners are set by code.
    Desktop size: 229×118 px
    Mobile size: 710×118 px
  • The mobile image will readjust based on the size of the screen. Images should should have only one or two subjects in the center of the image as the focal point. The background should be one that can cut off at any point (see below).
  • Both the link text and image serve as one link, meaning only one URL can be used per square. Keep link text short and concise for stronger calls-to-action.
  • When displaying in mobile view, the blocks with pictures will stack in one column from left to right, and the blue blocks below them.

Mobile

five-button-header-mobile-combo3

Desktop

five-button-header-desktop

Three-Button Header – Tall


Live Site Example: Careers


three-button-header-tall-desktop-mobile


Usage Guidelines: Three-Button Header – Tall

Mobile

three-button-header-tall-mobile-details2

  • When shifting to mobile view, the blocks will stack on each with the left one first, center one second and right one third. Organize your calls to action in this order.
  • A header is required for each block, and at least one link. It is best to limit the number of links per block to three for optimal usability.
  • Keep header text and link text short and sweet. The more text you have in the blocks, the more likely it is people won’t read it.

Desktop

three-button-header-tall-desktop_details2

Three-Button Header – Short


Live Site Example: Main Campus Visitor and Family Guide


three-button-header-short-desktop-mobile2


Usage Guidelines: Three-Button Header – Short

Mobile
three-button-header-short-mobile-detail

  • When shifting to mobile view, the blocks will stack on each with the left one first, center one second and right one third. Organize your calls to action in this order.
  • You must have one link per block.
  • Text can wrap to a second line, but it’s best for usability to keep it to one.

Desktop
three-button-header-short-detail

Two-Button Header


Live Site Example: Center for Immunity and Immunotherapies


two-button-header-desktop-mobile


Usage Guidelines: Two-Button Header

Mobile
two-button-header-mobile2

  • One image is required at size 175×75 px with rounded corners of a 10px radius. Given the size of the image, use simple photos of one to two subjects.
  • In mobile view, the blocks will stack on each other with the left one first and right one second. The column of links in the second block will also stack from left to right.
  • A header is required in each box, and at least one link in the first block and two in the second. Body text is optional, and if used, should be short and concise. The more text you have in the blocks, the more likely it is people won’t read it.

Desktop
two-button-header-desktop


Questions?

Contact ehealth@seattlechildrens.org.