Text

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.

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

Sample	Class
空色 Sky blue	`--4xhuge`
空色 Sky blue	`--3xhuge`
空色 Sky blue	`--2xhuge`
空色 Sky blue	`--xhuge`
空色 Sky blue	`--huge`
空色 Sky blue	`--4xlarge`
空色 Sky blue	`--3xlarge`
空色 Sky blue	`--2xlarge`
空色 Sky blue	`--xlarge`
空色 Sky blue	`--large`
空色 Sky blue	`--medium`
空色 Sky blue	`--small`
空色 Sky blue	`--xsmall`
空色 Sky blue	`--2xsmall`
空色 Sky blue	`--3xsmall`
空色 Sky blue	`--4xsmall`

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>

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>

Link style

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>