Options
Basic usage
HTML P defaults
SDS styles native <p> elements without requiring a class. The default size is --text-size-medium (1.3rem) and the default unitless line height is --text-line-height-medium (1.54), before scaling.
| Sample | Element |
|---|---|
空色 Sky blue |
P |
Site-wide scaling
Set the scales on :root in a stylesheet loaded after SDS. Inside a shadow root, use :host instead. Both factors default to 1 and are independent: changing the text scales does not change heading typography.
Line height is relative to the scaled font size. A size scale of 1.1 and a line-height scale of 1.2 produce line boxes that are 32% taller, not 20% taller.
Scoped scaling and resets
Set the same properties on any element or container to limit their scope. Descendants inherit the factors; a nested scale replaces its inherited value rather than multiplying it again. Reset either factor to 1 to use the corresponding unscaled token values.
Native paragraphs and .ds-text respond to a scale set directly on them too. An element that only inherits font-size, such as a plain <span>, needs .ds-text or its own CSS calculation to respond to its own scale override.
Size classes
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
Component colors
Icons
You can include an icon at the beginning of a ds-text element by simply including an icon class:
If you need more control over the size, color or location of the icon, you can use an Icon component:
Notification indicators
Text can display a notification indicator (dot) by adding the class --notification.
Notification indicators adhere to 4x preset visual states - alert, warning, success and info.
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.
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.
Addon text
The --addon styles slightly modify the text to ‘join’ the containing component.
Addon default style
Addon light style
With --addon-light style:
Addon dark style
With --addon-dark style:
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.
Label style
Style text to look like a label
Code style
Link style
Html anchors a with the class --link will automatically be styled as links with an appropriate icon appened.
Fee style
WCAG text contrast
The results below use the normal-text threshold of 4.5:1 for AA.
Core styles
Default text
Default
Inset text
--inset
Label
--label
Note
--note
Visual states
Alert
--alert
Warning
--warning
Success
--success
Info
--info
Examples
Manifest
The component manifest describes this component's API: its modifiers, structure, data attributes, CSS custom properties, accessibility notes, and example markup. It is consumed by tooling such as AI assistants and code generators.
Latest version: https://assets.soracom.io/sds/3.45.0/ds-text/manifest.json?v=3.45.0