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>

Text content

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

Text content example

<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>

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 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>

Text content

<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>

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 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--icon-basic-user">Icon</p>

<p class="ds-text"><i class="ds-icon--icon-basic-user ds-icon--tiny"></i> Tiny</p>
<p class="ds-text"><i class="ds-icon--icon-basic-user ds-icon--small"></i> Small</p>
<p class="ds-text"><i class="ds-icon--icon-basic-user ds-icon--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 ds-icon--large"></i> Large</p>

Icon

Tiny

Small

Medium

Default

Large

<p class="ds-text--icon-basic-user">Icon</p>

<p class="ds-text"><i class="ds-icon--icon-basic-user ds-icon--tiny"></i> Tiny</p>
<p class="ds-text"><i class="ds-icon--icon-basic-user ds-icon--small"></i> Small</p>
<p class="ds-text"><i class="ds-icon--icon-basic-user ds-icon--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 ds-icon--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>

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 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 ds-icon--tiny"></i> Tiny</p>
<p class="ds-text"><i class="ds-icon--icon-basic-user ds-icon--small"></i> Small</p>
<p class="ds-text"><i class="ds-icon--icon-basic-user ds-icon--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 ds-icon--large"></i> Large</p>

Tiny

Small

Medium

Default

Large

<p class="ds-text"><i class="ds-icon--icon-basic-user ds-icon--tiny"></i> Tiny</p>
<p class="ds-text"><i class="ds-icon--icon-basic-user ds-icon--small"></i> Small</p>
<p class="ds-text"><i class="ds-icon--icon-basic-user ds-icon--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 ds-icon--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>

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 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>

Text content

<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>

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 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>

Text content

<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>

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 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>

Text content

<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>

Text content

<p class="ds-text--notification-success" data-notification-counter="3">Text content</p>

Size 

Extra Small 

<p class="ds-text--xsmall">Text content</p>

Text content

<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>

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 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>

Text content

<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>

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 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>

Text content

<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>

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 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-text-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>

Text content

<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>

Text content

<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">
  <input type="text" id="test-field" name="test-field" class="ds-text-input"/>
  <div class="ds-text--tip">Text</div>
</div>
Text
<div class="ds-field">
  <input type="text" id="test-field" name="test-field" class="ds-text-input"/>
  <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>
  <input type="text" id="test-field" name="test-field" class="ds-text-input"/>
</div>
Text
<div class="ds-field">
  <div class="ds-text--tip">Text</div>
  <input type="text" id="test-field" name="test-field" class="ds-text-input"/>
</div>
Example with tip on the left and right of the field
<div class="ds-field">
  <div class="ds-text--tip">Text</div>
  <input type="text" id="test-field" name="test-field" class="ds-text-input"/>
  <div class="ds-text--tip">Text</div>
</div>
Text
Text
<div class="ds-field">
  <div class="ds-text--tip">Text</div>
  <input type="text" id="test-field" name="test-field" class="ds-text-input"/>
  <div class="ds-text--tip">Text</div>
</div>

Field - addon style 

For use inside ds-field

<div class="ds-field">
  <input type="text" id="test-field" name="test-field" class="ds-text-input"/>
  <div class="ds-text--addon">Text</div>
</div>
Text
<div class="ds-field">
  <input type="text" id="test-field" name="test-field" class="ds-text-input"/>
  <div class="ds-text--addon">Text</div>
</div>

Field - addon light style 

For use inside ds-field

<div class="ds-field">
  <input type="text" id="test-field" name="test-field" class="ds-text-input"/>
  <div class="ds-text--addon-light">Text</div>
</div>
Text
<div class="ds-field">
  <input type="text" id="test-field" name="test-field" class="ds-text-input"/>
  <div class="ds-text--addon-light">Text</div>
</div>