View more
Wednesday, October 15, noon to 1 p.m. PT. Online and free.

A UCSF Health neurologist covers common triggers, current treatment options and when to ask for a referral to a headache specialist. A live question and answer session follows. Everyone who registers gets a link to the recording.

Register

What this page is

Sample Alert Banner components. The webinar is not real and the Register link goes to the QA home page. Do not reuse the copy.

The two behaviors

Dismissible shows a close button. Once a reader closes it, it stays closed for the rest of that browser session. Examples 1, 2 and 4.

Expandable shows a View more control instead. It cannot be closed, and it holds a second block of copy plus a button link that appear only once expanded. Example 3.

Fields a writer fills

  • Headline. Sits on one line beside the description on desktop.
  • Short description. One or two sentences. Rich text, so links are allowed.
  • Link. Link text plus a destination. An arrow link on the dismissible banner, a bordered button on the expandable one.
  • Detailed information. Expandable banner only. The copy behind View more.
  • Icon. Optional, from the UCSF Health icon set. Example 2 has none.
  • Background color. One of the eight listed below.

Long copy wraps and makes the banner taller. Example 4 shows the effect.

The eight background colors

Examples 1 to 4 are all Yellow (#ffdd41). Examples 5 to 11 run through the other seven in order: Orange Yellow #fdf0b8, Purple Illusion #c1b6f9, Gentian Blue #3a1f90, Light Coral #df7c7e, Pale Pink #f9dfd6, Light Grayish Blue #e1e2e4, Blue Gray #606e77. Gentian Blue and Blue Gray reverse the text to white.

Sample copy drafted by Claude.