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>
Mixed 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>
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:
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>
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>
Component color
Basic content example
<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>
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>
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>
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>
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>
Notification indicators
Text can display a notification indicator (dot) by adding the class --notification
.
<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>
Notification indicators adhere to 4x preset visual states - alert, warning, success and info.
<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>
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>
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>
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>
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>
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>
Label style
Style text to look like a label
<p class="ds-text --label">空色 Sky blue</p>
<p class="ds-text --label --icon-settings">空色 Sky blue</p>
<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>
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
<!-- 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
<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 & Fee Schedule</a
>.
</p>
<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 & Fee Schedule</a
>.</span
>
</p>
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>
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>