Skip to content
MENU

Soracom

Design System

Text

Text is a general component for styling text content.

Options 

Basic usage 

Basic content example
<p class="ds-text">Text content</p>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<p class="ds-text">Text content</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>

Component color 

Basic content example
<p class="ds-text --color-magenta">Text content</p>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<p class="ds-text --color-magenta">Text content</p>
Longer content example
<p class="ds-text --color-orange-mid">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 --color-orange-mid">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>

Icons 

Icon applied direct to ds-text
<p class="ds-text"><i class="ds-icon --icon-basic-user --tiny"></i> Tiny</p>
<p class="ds-text"><i class="ds-icon --icon-basic-user --small"></i> Small</p>
<p class="ds-text"><i class="ds-icon --icon-basic-user --medium"></i> Medium</p>
<p class="ds-text"><i class="ds-icon --icon-basic-user"></i> Default</p>
<p class="ds-text"><i class="ds-icon --icon-basic-user --large"></i> Large</p>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<p class="ds-text"><i class="ds-icon --icon-basic-user --tiny"></i> Tiny</p>
<p class="ds-text"><i class="ds-icon --icon-basic-user --small"></i> Small</p>
<p class="ds-text"><i class="ds-icon --icon-basic-user --medium"></i> Medium</p>
<p class="ds-text"><i class="ds-icon --icon-basic-user"></i> Default</p>
<p class="ds-text"><i class="ds-icon --icon-basic-user --large"></i> Large</p>
Longer content example
<p class="ds-text --icon-basic-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-basic-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>
Examples using inline ds-icon as content
<p class="ds-text"><i class="ds-icon --icon-basic-user --tiny"></i> Tiny</p>
<p class="ds-text"><i class="ds-icon --icon-basic-user --small"></i> Small</p>
<p class="ds-text"><i class="ds-icon --icon-basic-user --medium"></i> Medium</p>
<p class="ds-text"><i class="ds-icon --icon-basic-user"></i> Default</p>
<p class="ds-text"><i class="ds-icon --icon-basic-user --large"></i> Large</p>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<p class="ds-text"><i class="ds-icon --icon-basic-user --tiny"></i> Tiny</p>
<p class="ds-text"><i class="ds-icon --icon-basic-user --small"></i> Small</p>
<p class="ds-text"><i class="ds-icon --icon-basic-user --medium"></i> Medium</p>
<p class="ds-text"><i class="ds-icon --icon-basic-user"></i> Default</p>
<p class="ds-text"><i class="ds-icon --icon-basic-user --large"></i> Large</p>
Example using inline ds-icon as content
<p class="ds-text"><i class="ds-icon --icon-basic-user"></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-basic-user"></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>

Visual states 

<p class="ds-text --alert">Text content</p>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<p class="ds-text --alert">Text content</p>
Longer content example
<p class="ds-text --alert">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 --alert">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 

A label can display a notification indicator (dot) by adding the class ds-text--notification.

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

Size 

Extra Small 

<p class="ds-text --xsmall">Text content</p>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<p class="ds-text --xsmall">Text content</p>
Longer content example
<p class="ds-text --xsmall">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 --xsmall">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>

Small 

<p class="ds-text --small">Text content</p>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<p class="ds-text --small">Text content</p>
Longer content example
<p class="ds-text --small">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 --small">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>

Large 

<p class="ds-text --large">Text content</p>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<p class="ds-text --large">Text content</p>
Longer content example
<p class="ds-text --large">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 --large">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>

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">Text content</p>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<p class="ds-text --inset">Text content</p>

Label style 

Style text to look like a label

<p class="ds-text --label">Text content</p>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<p class="ds-text --label">Text content</p>

Field - tip style 

For use inside ds-field

Example with tip on the right of the field
<div class="ds-field">
  <div class="ds-input">
    <input type="text"/>
  </div>
  <div class="ds-text --tip">Text</div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-field">
  <div class="ds-input">
    <input type="text"/>
  </div>
  <div class="ds-text --tip">Text</div>
</div>
Example with tip on the left of the field
<div class="ds-field">
  <div class="ds-text --tip">Text</div>
  <div class="ds-input">
    <input type="text"/>
  </div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-field">
  <div class="ds-text --tip">Text</div>
  <div class="ds-input">
    <input type="text"/>
  </div>
</div>
Example with tip on the left and right of the field
<div class="ds-field">
  <div class="ds-text --tip">Text</div>
  <div class="ds-input">
    <input type="text"/>
  </div>
  <div class="ds-text --tip">Text</div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-field">
  <div class="ds-text --tip">Text</div>
  <div class="ds-input">
    <input type="text"/>
  </div>
  <div class="ds-text --tip">Text</div>
</div>

Field - addon style 

For use inside ds-field

<div class="ds-field">
  <div class="ds-input">
    <input type="text"/>
  </div>
  <div class="ds-text --addon">Text</div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-field">
  <div class="ds-input">
    <input type="text"/>
  </div>
  <div class="ds-text --addon">Text</div>
</div>
<div class="ds-field">
  <div class="ds-text --addon">Text</div>
  <div class="ds-input">
    <input type="text"/>
  </div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-field">
  <div class="ds-text --addon">Text</div>
  <div class="ds-input">
    <input type="text"/>
  </div>
</div>

Field - addon light style 

For use inside ds-field

<div class="ds-field">
  <div class="ds-input">
    <input type="text"/>
  </div>
  <div class="ds-text --addon-light">Text</div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-field">
  <div class="ds-input">
    <input type="text"/>
  </div>
  <div class="ds-text --addon-light">Text</div>
</div>

Button - addon style 

For use inside ds-button

<div class="ds-field">
  <button class="ds-button --icon-time">
    <span class="ds-text --addon">Text</span>
    <span>Button label</span>
    <i class="ds-icon --icon-ui-arrow-down"></i>
  </button>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-field">
  <button class="ds-button --icon-time">
    <span class="ds-text --addon">Text</span>
    <span>Button label</span>
    <i class="ds-icon --icon-ui-arrow-down"></i>
  </button>
</div>
<div class="ds-field">
  <button class="ds-button --icon-time">
    <span>Button label</span>
    <span class="ds-text --addon">Text</span>
    <i class="ds-icon --icon-ui-arrow-down"></i>
  </button>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-field">
  <button class="ds-button --icon-time">
    <span>Button label</span>
    <span class="ds-text --addon">Text</span>
    <i class="ds-icon --icon-ui-arrow-down"></i>
  </button>
</div>
<div class="ds-field">
  <button class="ds-button --primary --icon-time">
    <span>Button label</span>
    <i class="ds-icon --icon-ui-arrow-down"></i>
    <span class="ds-text --addon">Text</span>
  </button>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-field">
  <button class="ds-button --primary --icon-time">
    <span>Button label</span>
    <i class="ds-icon --icon-ui-arrow-down"></i>
    <span class="ds-text --addon">Text</span>
  </button>
</div>