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
<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
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><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><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<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><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
Link style
Html anchors a with the class --link will automatically be styled as links with an appropriate icon appened.
<!-- 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
<!-- 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 -->
<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>