Soracom

Design System
  1. Home
  2. Design system
  3. Elements
  4. Banner

Banner

Options

Basic usage

html
Copy
html
Copy
html
Copy
html
Copy
html
Copy
html
Copy

Visual states

html
Copy

Component colors

html
Copy

Indent

Small

html
Copy

Large

html
Copy

Styles

Strong

Default strong style

html
Copy

Strong style with color

html
Copy

Plain

html
Copy

Simple

Simple stips the subtle texture

html
Copy

Hero

Larger, stronger feature banner with a patterned background

html
Copy

To make the banner clickable, the following structure can be used:

Hover over the banner to see the hover state changes

html
Copy

Clickable banner with target to open in a new window

html
Copy

Examples

Website banner

html
Copy

User-console hero

html
Copy
html
Copy