Implement Banner according to Pajamas
- Epic: Pajamas component: Banners - Build
- Component's specifications: https://design.gitlab.com/components/banner/
- Sketch measurements: https://gitlab-org.gitlab.io/gitlab-design/hosted/design-gitlab-specs/banners-spec-previews/
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
Key points
- Banners come in two color variants:
- A light blue background + big title variant is used when introducing a feature
- A white background + small title variant is used when promoting a feature
- Banners should always be dismissible via the
x
icon in the top right - There should always be one (and only one) action-oriented button/link
- A title and a supporting text are required
- The text contents has a 48px padding on the right
- 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
- On mobile viewports:
- If an illustration was present, it should be hidden
- The text contents should expand to the full banner's width
/cc @andyvolpe
Edited by Andy Volpe