Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
@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. |
tone | String | - | ['primary', 'secondary', 'tertiary', 'information', 'positive', 'negative'] | - |
*
: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.
The npm package @commercetools-uikit/text receives a total of 17 weekly downloads. As such, @commercetools-uikit/text popularity was classified as not popular.
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
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
Security News
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.