Soracom

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

Text

Text is a general component for styling text content.

Overview

By default, the text size is optimized for UI usage but can be toggled for more general website usage using a global css var.

Options

Basic usage

Basic content example

html
Copy 
<!-- Native html elements -->
<p class="ds-text">空色 Sky blue</p>

Mixed content example

html
Copy 
<p class="ds-text">Text <a href="#">content</a> example</p>

Longer content example

html
Copy 
<p class="ds-text">
  Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio
  dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus
  eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur
  adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus
  eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed
  consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit
  amet, consectetur adipiscing elit.
</p>

HTML P defaults

SDS sets the standard html paragraph element (P) to a default style. There are 2 different sizes - UI (the default) and Web:

UI defaults

By default text is a smaller font size optimal for UI usage:

Note: 1rem == 10px

SampleElementTypefaceSize

空色 Sky blue

P

Web usage

You can switch SDS to use a larger font size for text by setting a global css var:

:root {
  --is-web-text-scale: var(--ON);
}

Note: 1rem == 10px

SampleElementTypefaceSize

空色 Sky blue

P

Size classes

html
Copy 
<div class="ds-text --xxlarge-">空色 Sky blue</div>
<div class="ds-text --xlarge">空色 Sky blue</div>
<p class="ds-text --xxlarge">空色 Sky blue</p>

Available classes are listed below:

Note: 1rem == 10px

SampleClassTypefaceSize
空色 Sky blue—xxhuge
空色 Sky blue—xhuge
空色 Sky blue—huge
空色 Sky blue—xxlarge
空色 Sky blue—xlarge
空色 Sky blue—large
空色 Sky blue—medium
空色 Sky blue—small
空色 Sky blue—xsmall
空色 Sky blue—xxsmall

Visual states

html
Copy 
<p class="ds-text --alert">空色 Sky blue</p>

Component color

Basic content example

html
Copy 
<p class="ds-text --color-magenta">空色 Sky blue</p>

Icons

You can include an icon at the beginning of a ds-text element by simply including an icon class:

html
Copy 
<p class="ds-text --icon-user">空色 Sky blue</p>
<p class="ds-text --xxlarge --icon-user">空色 Sky blue</p>

If you need more control over the size, color or location of the icon, you can use an Icon component:

html
Copy 
<p class="ds-text">
  <i class="ds-icon --icon-user --color-blue-shade"></i> 空色 Sky blue
</p>
<p class="ds-text --xxlarge">
  <i class="ds-icon --icon-user --color-blue-shade"></i> 空色 Sky blue
</p>

Longer content example

html
Copy 
<p class="ds-text --icon-user">
  Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio
  dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus
  eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur
  adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus
  eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed
  consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit
  amet, consectetur adipiscing elit.
</p>

Longer content example

html
Copy 
<p class="ds-text">
  <i class="ds-icon --icon-user --color-blue-shade"></i> Morbi leo risus, porta
  ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus
  eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare
  vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
  vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare
  vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit
  libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing
  elit.
</p>

Overriding text size

ds-heading supports 1 css variables to control the font size --ds-heading-size.

The following global css vars are available for use when creating a custom css class.

Note: 1rem == 10px

var(--ds-text-size-xxhuge); //4.2rem
var(--ds-text-size-xhuge); //3.2rem
var(--ds-text-size-huge); //2.6rem
var(--ds-text-size-xxlarge); //2.2rem
var(--ds-text-size-xlarge); //1.8rem
var(--ds-text-size-large); //1.5rem
var(--ds-text-size-medium); //1.3rem
var(--ds-text-size-small); //1.2rem
var(--ds-text-size-xsmall); //1.1rem
var(--ds-text-size-xxsmall); //1.0rem

Overriding headings with preset css vars

html
Copy 
<style>
  p {
    --ds-text-size: var(--ds-text-size-xhuge);
  }

  .my-class {
    --ds-text-size: var(--ds-text-size-huge);
  }
</style>
<p>空色 Sky blue</p>
<div class="ds-text my-class">空色 Sky blue</div>

Notification indicators

Text can display a notification indicator (dot) by adding the class --notification.

html
Copy 
<p class="ds-text --notification">空色 Sky blue</p>

Longer content example

html
Copy 
<p class="ds-text --notification">
  Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio
  dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus
  eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur
  adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus
  eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed
  consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit
  amet, consectetur adipiscing elit.
</p>

Notification indicators adhere to 4x preset visual states - alert, warning, success and info.

html
Copy 
<p class="ds-text --notification-success">空色 Sky blue</p>

Additionally, if the label has an attribute data-notification-counter set to a non-empty value, that value will be shown in the indicator. If the attribute is set to empty data-notification-counter="" the indicator dot will be hidden.

html
Copy 
<p class="ds-text --notification-success" data-notification-counter="3">
  空色 Sky blue
</p>

Text inside other components

When ds-text is used inside ds-select, ds-input, ds-button or ds-range it will be displayed next to the element and will not wrap when the window is scaled.

html
Copy 
<!-- Inside ds-input -->
<div class="ds-input">
  <div class="ds-text">空色 Sky blue</div>
  <input type="text" />
</div>
<div class="ds-input">
  <input type="text" />
  <div class="ds-text">空色 Sky blue</div>
</div>
<!-- Inside ds-select -->
<div class="ds-select">
  <div class="ds-text">空色 Sky blue</div>
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
<div class="ds-select">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
  <div class="ds-text">空色 Sky blue</div>
</div>
<!-- Inside ds-range -->
<div class="ds-range">
  <input type="range" />
  <div class="ds-text">空色 Sky blue</div>
</div>
<div class="ds-range">
  <div class="ds-text">空色 Sky blue</div>
  <input type="range" />
</div>
<!-- Inside ds-button default -->
<button class="ds-button --icon-time">
  <span class="ds-text">Text</span>
  <span>Button label</span>
</button>
<button class="ds-button --icon-time">
  <span>Button label</span>
  <span class="ds-text">Text</span>
</button>
<!-- Inside ds-button primary -->
<button class="ds-button --primary --icon-time">
  <span class="ds-text">Text</span>
  <span>Button label</span>
</button>
<button class="ds-button --primary --icon-time">
  <span>Button label</span>
  <span class="ds-text">Text</span>
</button>
<!-- Inside ds-button plain -->
<button class="ds-button --plain --icon-time">
  <span class="ds-text">Text</span>
  <span>Button label</span>
</button>
<button class="ds-button --plain --icon-time">
  <span>Button label</span>
  <span class="ds-text">Text</span>
</button>

Addon text

The --addon styles slightly modify the text to ‘join’ the containing component.

Addon default style

html
Copy 
<!-- Inside ds-input -->
<div class="ds-input">
  <div class="ds-text --addon">空色 Sky blue</div>
  <input type="text" />
</div>
<div class="ds-input">
  <input type="text" />
  <div class="ds-text --addon">空色 Sky blue</div>
</div>
<!-- Inside ds-select -->
<div class="ds-select">
  <div class="ds-text --addon">空色 Sky blue</div>
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
<div class="ds-select">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
  <div class="ds-text --addon">空色 Sky blue</div>
</div>
<!-- Inside ds-button default-->
<button class="ds-button --icon-time">
  <span class="ds-text --addon">Text</span>
  <span>Button label</span>
</button>
<button class="ds-button --icon-time">
  <span>Button label</span>
  <span class="ds-text --addon">Text</span>
</button>
<!-- Inside ds-button primary -->
<button class="ds-button --primary --icon-time">
  <span class="ds-text --addon">Text</span>
  <span>Button label</span>
</button>
<button class="ds-button --primary --icon-time">
  <span>Button label</span>
  <span class="ds-text --addon">Text</span>
</button>
<!-- Inside ds-button plain -->
<button class="ds-button --plain --icon-time">
  <span class="ds-text --addon">Text</span>
  <span>Button label</span>
</button>
<button class="ds-button --plain --icon-time">
  <span>Button label</span>
  <span class="ds-text --addon">Text</span>
</button>

Addon light style

With --addon-light style:

html
Copy 
<!-- Inside ds-input -->
<div class="ds-input">
  <div class="ds-text --addon-light">空色 Sky blue</div>
  <input type="text" />
</div>
<div class="ds-input">
  <input type="text" />
  <div class="ds-text --addon-light">空色 Sky blue</div>
</div>
<!-- Inside ds-select -->
<div class="ds-select">
  <div class="ds-text --addon-light">空色 Sky blue</div>
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
<div class="ds-select">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
  <div class="ds-text --addon-light">空色 Sky blue</div>
</div>
<!-- Inside ds-button default -->
<button class="ds-button --icon-time">
  <span class="ds-text --addon-light">Text</span>
  <span>Button label</span>
</button>
<button class="ds-button --icon-time">
  <span>Button label</span>
  <span class="ds-text --addon-light">Text</span>
</button>
<!-- Inside ds-button primary -->
<button class="ds-button --primary --icon-time">
  <span class="ds-text --addon-light">Text</span>
  <span>Button label</span>
</button>
<button class="ds-button --primary --icon-time">
  <span>Button label</span>
  <span class="ds-text --addon-light">Text</span>
</button>
<!-- Inside ds-button plain -->
<button class="ds-button --plain --icon-time">
  <span class="ds-text --addon-light">Text</span>
  <span>Button label</span>
</button>
<button class="ds-button --plain --icon-time">
  <span>Button label</span>
  <span class="ds-text --addon-light">Text</span>
</button>

Addon dark style

With --addon-dark style:

html
Copy 
<!-- Inside ds-input -->
<div class="ds-input">
  <div class="ds-text --addon-dark">空色 Sky blue</div>
  <input type="text" />
</div>
<div class="ds-input">
  <input type="text" />
  <div class="ds-text --addon-dark">空色 Sky blue</div>
</div>
<!-- Inside ds-select -->
<div class="ds-select">
  <div class="ds-text --addon-dark">空色 Sky blue</div>
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
</div>
<div class="ds-select">
  <select>
    <option value="AU">Australia</option>
    <option value="JP">Japan</option>
    <option value="US">United States of America</option>
  </select>
  <div class="ds-text --addon-dark">空色 Sky blue</div>
</div>
<!-- Inside ds-button default -->
<button class="ds-button --icon-time">
  <span class="ds-text --addon-dark">Text</span>
  <span>Button label</span>
</button>
<button class="ds-button --icon-time">
  <span>Button label</span>
  <span class="ds-text --addon-dark">Text</span>
</button>
<!-- Inside ds-button primary -->
<button class="ds-button --primary --icon-time">
  <span class="ds-text --addon-dark">Text</span>
  <span>Button label</span>
</button>
<button class="ds-button --primary --icon-time">
  <span>Button label</span>
  <span class="ds-text --addon-dark">Text</span>
</button>
<!-- Inside ds-button plain -->
<button class="ds-button --plain --icon-time">
  <span class="ds-text --addon-dark">Text</span>
  <span>Button label</span>
</button>
<button class="ds-button --plain --icon-time">
  <span>Button label</span>
  <span class="ds-text --addon-dark">Text</span>
</button>

Styles

Custom styles exist for specific use cases.

Inset style

.ds-text --inset matches the padding (inset) of ds-input. This is useful for alignment when creating inplace editing components, or alignment when adjacent to other fields.

html
Copy 
<p class="ds-text --inset">空色 Sky blue</p>

Label style

Style text to look like a label

html
Copy 
<p class="ds-text --label">空色 Sky blue</p>
html
Copy 
<p class="ds-text --label --icon-settings">空色 Sky blue</p>
html
Copy 
<label class="ds-text --label --icon-settings">空色 Sky blue</label>

Code style

Use mono-space Source Sans Code font

html
Copy 
<p class="ds-text --code">空色 Sky blue 1234567890</p>

Html anchors a with the class --link will automatically be styled as links with an appropriate icon appened.

Use mono-space Source Sans Code font

html
Copy 
<!-- Anchor links, or links to resources on the current page -->
<a href="#link-style" class="--link">空色 Sky blue 1234567890</a>

<!-- Links to local pages -->
<a href="/" class="--link">空色 Sky blue 1234567890</a>

<!-- Links to external pages -->
<a href="https://www.soracom.io" target="_blank" class="--link"
  >空色 Sky blue 1234567890</a
>

Fee style

html
Copy 
<p class="--fee">
  Virtual Private Gateway fees apply. For more details, please refer to the
  <a
    href="https://developers.soracom.io/en/docs/reference/fees/#virtual-private-gateway"
    target="_blank"
    class="--link"
    >Pricing &amp; Fee Schedule</a
  >.
</p>
html
Copy 
<p>
  Create a new dedicated Virtual Private Gateway (VPG) on the Soracom platform.
  <span class="--fee"
    >Virtual Private Gateway fees apply. For more details, please refer to the
    <a
      href="https://developers.soracom.io/en/docs/reference/fees/#virtual-private-gateway"
      target="_blank"
      class="--link"
      >Pricing &amp; Fee Schedule</a
    >.</span
  >
</p>

Tests

HTML text sizes

html
Copy 
<!-- Native html elements -->
<p>空色 Sky blue</p>
<div>空色 Sky blue</div>
<ul>
  <li>空色 Sky blue</li>
  <li>空色 Sky blue</li>
</ul>
<p>
  <a href="#">空色 Sky blue</a>
</p>
<!-- Native html elements with icon -->
<p class="ds-text --icon-sun">空色 Sky blue</p>
<div class="ds-text --icon-sun">空色 Sky blue</div>
<ul>
  <li class="ds-text --icon-sun">空色 Sky blue</li>
  <li class="ds-text --icon-sun">空色 Sky blue</li>
</ul>
<p>
  <a href="#" class="ds-text --icon-sun">空色 Sky blue</a>
</p>

All text sizes

html
Copy 
<!-- All text sizes -->
<div class="ds-text --xxhuge">空色 Sky blue</div>
<div class="ds-text --xhuge">空色 Sky blue</div>
<div class="ds-text --huge">空色 Sky blue</div>
<div class="ds-text --xxlarge">空色 Sky blue</div>
<div class="ds-text --xlarge">空色 Sky blue</div>
<div class="ds-text --large">空色 Sky blue</div>
<div class="ds-text --medium">空色 Sky blue</div>
<div class="ds-text --small">空色 Sky blue</div>
<div class="ds-text --xsmall">空色 Sky blue</div>
<div class="ds-text --xxsmall">空色 Sky blue</div>
<!-- All text sizes with icons -->
<div class="ds-text --xxhuge --icon-sun">空色 Sky blue</div>
<div class="ds-text --xhuge --icon-sun">空色 Sky blue</div>
<div class="ds-text --huge --icon-sun">空色 Sky blue</div>
<div class="ds-text --xxlarge --icon-sun">空色 Sky blue</div>
<div class="ds-text --xlarge --icon-sun">空色 Sky blue</div>
<div class="ds-text --large --icon-sun">空色 Sky blue</div>
<div class="ds-text --medium --icon-sun">空色 Sky blue</div>
<div class="ds-text --small --icon-sun">空色 Sky blue</div>
<div class="ds-text --xsmall --icon-sun">空色 Sky blue</div>
<div class="ds-text --xxsmall --icon-sun">空色 Sky blue</div>
<!-- All text sizes with inline icons -->
<div class="ds-text --xxhuge">
  <i class="ds-icon --icon-sun"></i> 空色 Sky blue
</div>
<div class="ds-text --xhuge">
  <i class="ds-icon --icon-sun"></i> 空色 Sky blue
</div>
<div class="ds-text --huge">
  <i class="ds-icon --icon-sun"></i> 空色 Sky blue
</div>
<div class="ds-text --xxlarge">
  <i class="ds-icon --icon-sun"></i> 空色 Sky blue
</div>
<div class="ds-text --xlarge">
  <i class="ds-icon --icon-sun"></i> 空色 Sky blue
</div>
<div class="ds-text --large">
  <i class="ds-icon --icon-sun"></i> 空色 Sky blue
</div>
<div class="ds-text --medium">
  <i class="ds-icon --icon-sun"></i> 空色 Sky blue
</div>
<div class="ds-text --small">
  <i class="ds-icon --icon-sun"></i> 空色 Sky blue
</div>
<div class="ds-text --xsmall">
  <i class="ds-icon --icon-sun"></i> 空色 Sky blue
</div>
<div class="ds-text --xxsmall">
  <i class="ds-icon --icon-sun"></i> 空色 Sky blue
</div>