Security News
npm Updates Search Experience with New Objective Sorting Options
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
@commercetools-uikit/text
Advanced tools
The Text component implements the typography elements such as headings, paragraphs, etc.
The Text
component implements the typography elements such as headings, paragraphs, etc.
<Text.Headline>
Wraps the given text in the given HTML header size
.
import Text from '@commercetools-uikit/text';
<Text.Headline as="h1">{'The title'}</Text.Headline>;
Props | Type | Required | Values | Default | Description |
---|---|---|---|---|---|
as | String | ✅ | ['h1', 'h2', 'h3'] | - | - |
children | PropTypes.node | ✅ (*) | - | - | - |
intlMessage | intl message | ✅ (*) | - | - | An intl message object that will be rendered with FormattedMessage |
id | String | - | - | - | Used as HTML id property |
title | String | - | - | - | Text to show in a tooltip on hover over the element |
truncate | Bool | - | - | false | Option for truncate content in case the screen has small width |
nowrap | Bool | - | - | false | The content in the element will not be wrapped to a new line unless explicitly specified. |
*
:children
is required only ifintlMessage
is not provided
The component further forwards all data-
attributes to the underlying component.
Title of pages.
<Text.Subheadline>
Wraps the given text in the given HTML header size
.
import Text from '@commercetools-uikit/text';
<Text.Subheadline as="h4">{'The subtitle'}</Text.Subheadline>;
Props | Type | Required | Values | Default | |
---|---|---|---|---|---|
as | String | ✅ | ['h4', 'h5'] | - | |
id | String | - | - | - | Used as HTML id property |
isBold | Boolean | - | - | false | |
tone | String | - | ['primary', 'secondary', 'tertiary', 'information', 'positive', 'negative'] | - | |
children | PropTypes.node | ✅ (*) | - | - | |
intlMessage | intl message | ✅ (*) | - | - | An intl message object that will be rendered with FormattedMessage |
title | String | - | - | - | |
truncate | Bool | - | - | false | |
nowrap | Bool | - | - | false | The content in the element will not be wrapped to a new line unless explicitly specified. |
*
:children
is required only ifintlMessage
is not provided
The component further forwards all data-
attributes to the underlying component.
Subtitle of pages.
<Text.Wrap>
Wraps the given text in its container. And for long text, text will be wrapped to new line.
import Text from '@commercetools-uikit/text';
<Text.Wrap>{'Sooo long text'}</Text.Wrap>;
When we render value that may be vey long, and we prefer to wrap text to new line after it exceeds its wrapper's width.
<Text.Body>
Wraps the given text in a <p>
element, for normal content.
import Text from '@commercetools-uikit/text';
<Text.Body>{'This is a content'}</Text.Body>;
Props | Type | Required | Values | Default | |
---|---|---|---|---|---|
as | String | - | ['p', 'span'] | - | |
id | String | - | - | - | Used as HTML id property |
isBold | Boolean | - | - | false | This prop is being deprecated in favor of the fontWeight prop |
fontWeight | String | - | ['regular', 'medium', 'bold'] | regular | |
isItalic | Boolean | - | - | false | |
isStrikethrough | Boolean | - | - | false | |
tone | String | - | ['primary', 'secondary', 'tertiary', 'information', 'positive', 'negative', 'inverted'] | - | |
children | PropTypes.node | ✅ (*) | - | - | |
intlMessage | intl message | ✅ (*) | - | - | An intl message object that will be rendered with FormattedMessage |
title | String | - | - | - | |
truncate | Bool | - | - | false | |
nowrap | Bool | - | - | false | The content in the element will not be wrapped to a new line unless explicitly specified. |
*
:children
is required only ifintlMessage
is not provided
The component further forwards all data-
attributes to the underlying component.
Content text in general.
<Text.Detail>
Wraps the given text in a <small>
semantic tag. It accepts a tone
prop to
properly style the text.
import Text from '@commercetools-uikit/text';
<Text.Detail>{'This would be something small'}</Text.Detail>
<Text.Detail tone="secondary">{'This would be something small with the secondary tone applied'}</Text.Detail>
Props | Type | Required | Values | Default | |
---|---|---|---|---|---|
as | string | - | ['small', 'span'] [^] | false | |
id | String | - | - | - | Used as HTML id property |
isBold | Boolean | - | - | false | This prop is being deprecated in favor of the fontWeight prop |
fontWeight | String | - | ['regular', 'medium', 'bold'] | regular | |
isItalic | Boolean | - | - | false | |
isStrikethrough | Boolean | - | - | false | |
tone | String | - | ['primary', 'secondary', 'tertiary', 'information', 'positive', 'negative', 'warning''] | - | |
children | PropTypes.node | ✅ (*) | - | - | |
intlMessage | intl message | ✅ (*) | - | - | An intl message object that will be rendered with FormattedMessage |
title | String | - | - | - | |
truncate | Bool | - | - | false | |
aria-labelledby | String | - | - | - | HTML ID of an element containing the label for the text rendered in this component |
nowrap | Bool | - | - | false | The content in the element will not be wrapped to a new line unless explicitly specified. |
*
:children
is required only ifintlMessage
is not provided.[^]
: Useas
prop to render an inline element.
The component further forwards all data-
attributes to the underlying component.
Details text of form boxes.
<Text.Caption>
Wraps the text in the smallest available font size and accepts tone
and fontWeight
props.
import Text from '@commercetools-uikit/text';
<Text.Caption as="h4">{'The caption'}</Text.Caption>;
Props | Type | Required | Values | Default | Description |
---|---|---|---|---|---|
id | String | - | - | - | Used as HTML id property |
isItalic | Boolean | - | - | false | |
isStrikethrough | Boolean | - | - | false | |
tone | String | - | ['primary', 'secondary','tertiary', 'information', 'positive','negative', 'critical', 'inherit','warning','inverted'] | ||
fontWeight | String | - | ['regular', 'medium', 'bold'] | regular | |
truncate | Bool | - | - | false | Option for truncate content in case the screen has small width |
nowrap | Bool | - | - | false | The content in the element will not be wrapped to a new line unless explicitly specified. |
aria-labelledby | String | - | - | - | HTML ID of an element containing the label for the text rendered in this component |
title | String | - | - | - | Text to show in a tooltip on hover over the element |
children | PropTypes.node | ✅ (*) | - | - | - |
intlMessage | intl message | ✅ (*) | - | - | An intl message object that will be rendered with FormattedMessage |
*
:children
is required only ifintlMessage
is not provided
Text.Caption is the smallest available font size in our design system. From the visual hierarchy perspective, it sits on the last spot of the importance scale and therefor should be used sparingly only in specific situations:
FAQs
The Text component implements the typography elements such as headings, paragraphs, etc.
We found that @commercetools-uikit/text demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
Security News
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.