Implement Banner according to Pajamas

Preview

note: The preview below gives a general overview of how banners should look like but doesn't follow the final specifications, please refer the the key points below for the detailed information

download

Key points

  1. Banners come in two color variants:
    1. A light blue background + big title variant is used when introducing a feature
    2. A white background + small title variant is used when promoting a feature
  2. Banners should always be dismissible via the x icon in the top right
  3. There should always be one (and only one) action-oriented button/link
  4. A title and a supporting text are required
  5. The text contents has a 48px padding on the right
  6. The illustration is optional and should be 120px (maximum) wide when present (whatever the banner variant), it is top-aligned with the first line of text
  7. On mobile viewports:
    1. If an illustration was present, it should be hidden
    2. The text contents should expand to the full banner's width

/cc @andyvolpe

Edited by Andy Volpe