Note: In mobile view, these sidebar modules move below all content in the main body. If you use one of these sidebar options to share important information, that information should also be in the main body of the page. Learn more about how to prioritize content for mobile.

Upcoming Events


Live Site Example: Make a Donation


Usage Guidelines: Sidebar Events List

  • If upcoming events are secondary content for your key audiences, this is a mobile-first preferred style.
  • If your events are primary content for your audience, put them in the main body of content using our other mobile-friendly styles for event listings.
  • Include key search terms in the titles of your events.
    • Use descriptive event titles that give people an indication of what the event is about.

Call to Action


Live Site Example: Classes and Community


Usage Guidelines

  • Required text includes:
    • Leader Text
    • Header
    • Call to Action button
  • Optional text includes:
    • Paragraph text
    • Bullet points
  • Two sets of images are required. Both sizes should have 10px radius rounded corners on the top, and regular 90 degree corners on the bottom.
    Desktop size: 228×140 px
    Mobile size: 719×140 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).

Donate Modules


Live Site Example: Ben Towne Center for Childhood Cancer Research


Usage Guidelines

  • Required text includes:
    • Header
    • Donate Now button
  • Optional text includes:
    • Paragraph text
  • Image is optional and will not resize in mobile.

Social Media


Live Site Example: Careers


Social Buttons

Button sizes are 48×48 pixels with 8pt rounded corners.

Featured Social

Max width image size is 194 pixels.

Twitter Feed

Video Link


Live Site Example: Research Institute


Usage Guidelines

  • These are not embedded videos, they are links to the video on YouTube or a page with a video embedded. If the video is important to the content on your page, consider moving it into the main body using our video embed options.
  • Required elements include:
    • Header
    • 194×145 video still with square corners
    • Video button link
  • Optional element includes:
    • Description text

Bullet-Point Link List


Live Site Example: Safety and Wellness


Usage Guidelines

  • Required:
    • Header
    • Link text
  • Optional:
    • Button link

Link List with Descriptions


Live Site Example: Medical Conditions


Usage Guidelines

  • Required:
    • Header
    • Link text
    • Description text

Questions?

Contact ehealth@seattlechildrens.org.