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

Gradients

Banners support named gradient backgrounds such as --gradient-sunrise and a matching gradient for every --color-* modifier, such as --gradient-celeste-lightest. Gradients use 165deg by default and accept the directional suffixes -to-right, -to-left, -to-top, and -to-bottom. Gradients pair particularly well with the --hero variant.

Sunrise gradient on a hero banner

html
Copy
Demo controls

Indent

Small

html
Copy

Large

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

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

Examples

Website banner

html
Copy

User-console hero

html
Copy
html
Copy

Manifest

The component manifest describes this component's API: its modifiers, structure, data attributes, CSS custom properties, accessibility notes, and example markup. It is consumed by tooling such as AI assistants and code generators.

Latest version: https://assets.soracom.io/sds/3.41.0/ds-banner/manifest.json?v=3.41.0

manifest.json
Copy