Launchpad Style Guide

Level 3 Banner

How to use

YAML Example

Default example

First Level Active Breadcrumb

We’re putting an end to avoidable blindness

Ending avoidable blindness through medication, surgery, education, prevention and training is a part of helping people out of poverty, which we see proof of everyday.

Primary CTA
image example

Default example with Alert

This is a message
First Level Active Breadcrumb

We’re putting an end to avoidable blindness

Ending avoidable blindness through medication, surgery, education, prevention and training is a part of helping people out of poverty, which we see proof of everyday.

Primary CTA
image example

Example without breadcrumb

We’re putting an end to avoidable blindness

Ending avoidable blindness through medication, surgery, education, prevention and training is a part of helping people out of poverty, which we see proof of everyday.

Primary CTA
image example

Example with 'Dark' skin

First Level Active Breadcrumb

We’re putting an end to avoidable blindness

Ending avoidable blindness through medication, surgery, education, prevention and training is a part of helping people out of poverty, which we see proof of everyday.

Primary CTA
image example

Example with secondary CTA

First Level Active Breadcrumb

We’re putting an end to avoidable blindness

Ending avoidable blindness through medication, surgery, education, prevention and training is a part of helping people out of poverty, which we see proof of everyday.

Primary CTA Secondary CTA
image example

Example skin 'dark' with secondary CTA

First Level Active Breadcrumb

We’re putting an end to avoidable blindness

Ending avoidable blindness through medication, surgery, education, prevention and training is a part of helping people out of poverty, which we see proof of everyday.

Primary CTA Secondary CTA
image example

Example with secondary CTA and Custom Icons

Check the Icons page to see supported icons.

First Level Active Breadcrumb

We’re putting an end to avoidable blindness

Ending avoidable blindness through medication, surgery, education, prevention and training is a part of helping people out of poverty, which we see proof of everyday.

Primary CTA Secondary CTA
image example

Example with secondary CTA and without media

First Level Active Breadcrumb

We’re putting an end to avoidable blindness

Ending avoidable blindness through medication, surgery, education, prevention and training is a part of helping people out of poverty, which we see proof of everyday.

Primary CTA

Example with alert banner and without media

This is a message
First Level Active Breadcrumb

We’re putting an end to avoidable blindness

Ending avoidable blindness through medication, surgery, education, prevention and training is a part of helping people out of poverty, which we see proof of everyday.

Primary CTA

Example with alert banner and without media & breadcrumbs

This is a message

We’re putting an end to avoidable blindness

Ending avoidable blindness through medication, surgery, education, prevention and training is a part of helping people out of poverty, which we see proof of everyday.

Primary CTA

Example skin 'dark' with secondary CTA and without media

First Level Active Breadcrumb

We’re putting an end to avoidable blindness

Ending avoidable blindness through medication, surgery, education, prevention and training is a part of helping people out of poverty, which we see proof of everyday.

Primary CTA Secondary CTA

Example Level 3 Banner with media

First Level Active Breadcrumb

We’re putting an end to avoidable blindness

Ending avoidable blindness through medication, surgery, education, prevention and training is a part of helping people out of poverty, which we see proof of everyday.

Primary CTA Secondary CTA
image example

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam debitis aperiam numquam architecto laudantium minus excepturi quae repellat!

Eum doloribus

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus ex dicta, facere pariatur ullam asperiores aperiam exercitationem?

Voluptates Libero

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat maiores neque porro qui cupiditate?

Animi Excepturi

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Numquam expedita delectus, esse alias rerum id nisi?

Impedit rerum

Itaque maiores nulla consectetur atque asperiores vitae suscipit dolor, provident fuga blanditiis iure minima obcaecati dicta nam quaerat, dolore corrupti.

Example Level 3 Banner with media - Dark theme

First Level Active Breadcrumb

We’re putting an end to avoidable blindness

Ending avoidable blindness through medication, surgery, education, prevention and training is a part of helping people out of poverty, which we see proof of everyday.

Primary CTA Secondary CTA
image example

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam debitis aperiam numquam architecto laudantium minus excepturi quae repellat!

Eum doloribus

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus ex dicta, facere pariatur ullam asperiores aperiam exercitationem?

Voluptates Libero

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat maiores neque porro qui cupiditate?

Animi Excepturi

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Numquam expedita delectus, esse alias rerum id nisi?

Impedit rerum

Itaque maiores nulla consectetur atque asperiores vitae suscipit dolor, provident fuga blanditiis iure minima obcaecati dicta nam quaerat, dolore corrupti.

Level 3 Banner Without media - Background color

IMPORTANT: You must make sure that the background color of the banner matches the component that goes right after it.

Use the bgColor variable to set the banner's background.

As listed above, bgColor supports :
"bg-container" | "bg-default" | "bg-ghost" | "bg-inverse" | "bg-page-body" | "bg-secondary" | "bg-subtle" | "bg-brand-default" | "bg-brand-strong" | "bg-brand-subtle"

Example Level 3 Banner without media

First Level Active Breadcrumb

We’re putting an end to avoidable blindness

Ending avoidable blindness through medication, surgery, education, prevention and training is a part of helping people out of poverty, which we see proof of everyday.

Primary CTA Secondary CTA

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam debitis aperiam numquam architecto laudantium minus excepturi quae repellat!

Eum doloribus

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus ex dicta, facere pariatur ullam asperiores aperiam exercitationem?

Voluptates Libero

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat maiores neque porro qui cupiditate?

Animi Excepturi

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Numquam expedita delectus, esse alias rerum id nisi?

Impedit rerum

Itaque maiores nulla consectetur atque asperiores vitae suscipit dolor, provident fuga blanditiis iure minima obcaecati dicta nam quaerat, dolore corrupti.

Example Level 3 Banner without media - Dark theme

First Level Active Breadcrumb

We’re putting an end to avoidable blindness

Ending avoidable blindness through medication, surgery, education, prevention and training is a part of helping people out of poverty, which we see proof of everyday.

Primary CTA Secondary CTA

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam debitis aperiam numquam architecto laudantium minus excepturi quae repellat!

Eum doloribus

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus ex dicta, facere pariatur ullam asperiores aperiam exercitationem?

Voluptates Libero

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat maiores neque porro qui cupiditate?

Animi Excepturi

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Numquam expedita delectus, esse alias rerum id nisi?

Impedit rerum

Itaque maiores nulla consectetur atque asperiores vitae suscipit dolor, provident fuga blanditiis iure minima obcaecati dicta nam quaerat, dolore corrupti.

Figma reference

Menu

Pages

Sections

Components

Core Elements

Core Css