Options
Basic usage
HTML P defaults
SDS sets the standard html paragraph element (P) to a default style.
| Sample | Element |
|---|---|
空色 Sky blue | P |
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 color
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
Tests
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/latest/ds-rows/index.mjs