Skip to content
MENU

Soracom

Design System

Banner

Options 

Basic usage 

<header class="ds-banner">
  <h2>Title</h2>
</header>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<header class="ds-banner">
  <h2>Title</h2>
</header>
<header class="ds-banner">
  <i class="ds-icon --icon-deactivate-sim"></i>
  <h2 class="__title">Title</h2>
</header>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<header class="ds-banner">
  <i class="ds-icon --icon-deactivate-sim"></i>
  <h2 class="__title">Title</h2>
</header>
<header class="ds-banner">
  <i class="ds-icon --icon-deactivate-sim"></i>
  <div>
    <h1>Event List</h1>
    <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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<header class="ds-banner">
  <i class="ds-icon --icon-deactivate-sim"></i>
  <div>
    <h1>Event List</h1>
    <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">
  <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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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 

<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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 

<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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 

<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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 

<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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 

<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>

Plain 

<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>

Examples 

Website banner 

<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 --xhuge-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="/images/frame-2.svg" width="300px" height="300px"/>
</header>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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 --xhuge-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="/images/frame-2.svg" width="300px" height="300px"/>
</header>
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>