Skip to content

Soracom

Design System
Home Design System Elements 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
<!-- Native html elements -->
<p class="ds-text">空色 Sky blue</p>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<!-- Native html elements -->
<p class="ds-text">空色 Sky blue</p>
Mixed content example
<p class="ds-text">Text <a href="#">content</a> example</p>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<p class="ds-text">Text <a href="#">content</a> example</p>
Longer content example
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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

Sample Element Typeface Size

空色 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
Sample Element Typeface Size

空色 Sky blue

P

Size classes 

<div class="ds-text --xxlarge-">空色 Sky blue</div>
<div class="ds-text --xlarge">空色 Sky blue</div>
<p class="ds-text --xxlarge">空色 Sky blue</p>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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

Sample Class Typeface Size
空色 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 

<p class="ds-text --alert">空色 Sky blue</p>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<p class="ds-text --alert">空色 Sky blue</p>

Component color 

Basic content example
<p class="ds-text --color-magenta">空色 Sky blue</p>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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:

<p class="ds-text --icon-user">空色 Sky blue</p>
<p class="ds-text --xxlarge --icon-user">空色 Sky blue</p>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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:

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

<p class="ds-text --notification">空色 Sky blue</p>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<p class="ds-text --notification">空色 Sky blue</p>
Longer content example
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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.

<p class="ds-text --notification-success">空色 Sky blue</p>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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.

<p class="ds-text --notification-success" data-notification-counter="3">空色 Sky blue</p>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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.

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

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

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

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

<p class="ds-text --inset">空色 Sky blue</p>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<p class="ds-text --inset">空色 Sky blue</p>

Label style 

Style text to look like a label

<p class="ds-text --label">空色 Sky blue</p>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<p class="ds-text --label">空色 Sky blue</p>
<p class="ds-text --label --icon-settings">空色 Sky blue</p>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<p class="ds-text --label --icon-settings">空色 Sky blue</p>
<label class="ds-text --label --icon-settings">空色 Sky blue</label>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<label class="ds-text --label --icon-settings">空色 Sky blue</label>

Code style 

Use mono-space Source Sans Code font
<p class="ds-text --code">空色 Sky blue 1234567890</p>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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
<!-- 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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<!-- 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>

Tests 

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