- Home
- Design system
- Elements
- Banner
Banner
Options
Basic usage
html
Copy
<header class="ds-banner">
<h2>Title</h2>
</header>
html
Copy
<header class="ds-banner">
<i class="ds-icon --icon-deactivate-sim"></i>
<h2 class="__title">Title</h2>
</header>
html
Copy
<header class="ds-banner">
<i class="ds-icon --icon-deactivate-sim"></i>
<div>
<h2>Event List</h2>
<p>This event handler UI is full featured, advanced UI for handling events and actions. In this screen you can view all of the events and event details.</p>
</div>
</header>
html
Copy
<header class="ds-banner">
<i class="ds-icon --icon-deactivate-sim"></i>
<div>
<h2>Event List</h2>
<p>This event handler UI is full featured, advanced UI for handling events and actions.</p>
</div>
</header>
html
Copy
<header class="ds-banner">
<i class="ds-icon --icon-deactivate-sim"></i>
<div>
<h3>Event List</h3>
<p>This event handler UI is full featured, advanced UI for handling events and actions.</p>
</div>
</header>
html
Copy
<header class="ds-banner">
<i class="ds-icon --icon-deactivate-sim"></i>
<div>
<h3>Event List</h3>
<p>This event handler UI is full featured, advanced UI for handling events and actions. In this screen you can view all of the events and event details.</p>
</div>
</header>
Visual states
html
Copy
<header class="ds-banner --alert">
<i class="ds-icon --icon-deactivate-sim"></i>
<div>
<h2>Event List</h2>
<p>This event handler UI is full featured, advanced UI for handling events and actions. In this screen you can view all of the events and event details.</p>
</div>
</header>
Component colors
html
Copy
<header class="ds-banner --color-magenta">
<i class="ds-icon --icon-deactivate-sim"></i>
<div>
<h2>Event List</h2>
<p>This event handler UI is full featured, advanced UI for handling events and actions. In this screen you can view all of the events and event details.</p>
</div>
</header>
Indent
Small
html
Copy
<header class="ds-banner --indent-small">
<i class="ds-icon --icon-deactivate-sim"></i>
<div>
<h2>Event List</h2>
<p>This event handler UI is full featured, advanced UI for handling events and actions. In this screen you can view all of the events and event details.</p>
</div>
</header>
Large
html
Copy
<header class="ds-banner --indent-large">
<i class="ds-icon --icon-deactivate-sim"></i>
<div>
<h2>Event List</h2>
<p>This event handler UI is full featured, advanced UI for handling events and actions. In this screen you can view all of the events and event details.</p>
</div>
</header>
Styles
Strong
Default strong style
html
Copy
<header class="ds-banner --strong">
<i class="ds-icon --icon-deactivate-sim"></i>
<div>
<h2>Event List</h2>
<p>This event handler UI is full featured, advanced UI for handling events and actions. In this screen you can view all of the events and event details.</p>
</div>
</header>
Strong style with color
html
Copy
<header class="ds-banner --strong --color-ink-darker">
<i class="ds-icon --icon-deactivate-sim"></i>
<div>
<h2>Event List</h2>
<p>This event handler UI is full featured, advanced UI for handling events and actions. In this screen you can view all of the events and event details.</p>
</div>
</header>
<header class="ds-banner --strong --color-blue-lighter">
<i class="ds-icon --icon-deactivate-sim"></i>
<div>
<h2>Event List</h2>
<p>This event handler UI is full featured, advanced UI for handling events and actions. In this screen you can view all of the events and event details.</p>
</div>
</header>
Plain
html
Copy
<header class="ds-banner --plain">
<i class="ds-icon --icon-deactivate-sim"></i>
<div>
<h2>Event List</h2>
<p>This event handler UI is full featured, advanced UI for handling events and actions. In this screen you can view all of the events and event details.</p>
</div>
</header>
Simple
Simple stips the subtle texture
html
Copy
<header class="ds-banner --simple">
<i class="ds-icon --icon-deactivate-sim"></i>
<div>
<h2>Event List</h2>
<p>This event handler UI is full featured, advanced UI for handling events and actions. In this screen you can view all of the events and event details.</p>
</div>
</header>
Hero
Larger, stronger feature banner with a patterned background
html
Copy
<header class="ds-banner --hero">
<div>
<h1>Soracom Query</h1>
<p class="ds-text --larger">Securely collect, store, and analyze IoT data with natural language to SQL conversion, real-time data visualization and scalable query execution.</p>
<a target="_blank" class="ds-button --primary --large --right-icon --icon-external-link --round --color-blue" href="https://analysis.prod.console.soracom.io/"><span>Launch Soracom Query Studio</span></a>
</div>
<img class="--browser" src="https://assets.soracom.io/images/query/query-example-001.png" />
</header>
Links
To make the banner clickable, the following structure can be used:
Hover over the banner to see the hover state changes
html
Copy
<a class="ds-banner --plain --indent-small" href="#links">
<i class="ds-icon --xlarge --color-celeste --icon-soracom-beam"></i>
<div>
<h4 class="ds-heading --xsmall-bold">Automatically Encrypt Traffic</h4>
<h5 class="ds-heading --xxsmall">With SORACOM Beam</h5>
<p class="ds-text --label --xxsmall">~5 mins</p>
</div>
</a>
Clickable banner with target to open in a new window
html
Copy
<a class="ds-banner --plain --indent-small" target="_blank" href="#links">
<i class="ds-icon --xlarge --color-celeste --icon-soracom-beam"></i>
<div>
<h4 class="ds-heading --xsmall-bold">Automatically Encrypt Traffic</h4>
<h5 class="ds-heading --xxsmall">With SORACOM Beam</h5>
<p class="ds-text --label --xxsmall">~5 mins</p>
</div>
</a>
Examples
Website banner
html
Copy
<header class="ds-banner --strong --color-gray-darker --indent-large">
<div>
<p class="ds-text --label --small --color-celeste">Helping developers and innovators</p>
<h1 class="ds-heading --huge-bold">Creating an IoT Application</h1>
<p class="ds-text --xlarge">Soracom allows technical innovators to build IoT applications that transmit and visualize data quickly – whether they integrate with AWS, Azure, or Google Cloud Platform, or not.</p>
</div>
<img src="https://assets.soracom.io/images/frame-2.svg" width="300px" height="300px" />
</header>
User-console hero
html
Copy
<header class="ds-banner --hero">
<div>
<h1>Soracom Query</h1>
<p class="ds-text --larger">Securely collect, store, and analyze IoT data with natural language to SQL conversion, real-time data visualization and scalable query execution.</p>
<a target="_blank" class="ds-button --primary --large --right-icon --icon-external-link --round --color-blue" href="https://analysis.prod.console.soracom.io/"><span>Launch Soracom Query Studio</span></a>
</div>
<img class="--browser" src="https://assets.soracom.io/images/query/query-example-001.png" />
</header>
Banner with buttons
html
Copy
<header class="ds-banner --indent-small">
<div>
<p class="ds-text --label">AWS IoT</p>
</div>
<button class="ds-button --plain --icon-edit --hide-label">
<span>Edit</span>
</button>
<button class="ds-button --plain --icon-delete --hide-label">
<span>Delete</span>
</button>
</header>