Newskit Logo
Newskit Logo
View Github

TextBlock

Overview

TextBlock is a paragraph, which can be used to summarize any text content. It can be in larger or bolder type than regular paragraph text and this is typically to attract the user’s attention to read more of the article.

Usage

Props

childrenstring
The content of the TextBlock is passed as the child of the component.
as'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'span' = p
This is a string name with one of the following html elements: h1, h2, h3, h4, h5, h6 or div, that the TextBlock can be converted to. TextBlock defaults as a p element, but it can be converted to another heading element or div by `as="div"` prop.
noCropboolean
If true, this disables text cropping functionality on the TextBlock.
stylePresetMQ<string>
If provided, this overrides the style preset applied to the TextBlock.
typographyPresetMQ<string>
If provided, this overrides the typography preset applied to the TextBlock.
paddingInlineMQ<string>
It can take one space token to specify the logical inline start and end padding of the container. This space token can also be used on breakpoints.
paddingInlineStartMQ<string>
It can take one space token to specify the logical inline start padding of the container. This space token can also be used on breakpoints.
paddingInlineEndMQ<string>
It can take one space token to specify the logical inline end padding of the container. This space token can also be used on breakpoints.
paddingBlockMQ<string>
It can take one space token to specify the logical block start and end padding of the container. This space token can also be used on breakpoints.
paddingBlockStartMQ<string>
It can take one space token to specify the logical block start padding of the container. This space token can also be used on breakpoints.
paddingBlockEndMQ<string>
It can take one space token to specify the logical block end padding of the container. This space token can also be used on breakpoints.
marginInlineMQ<string>
It can take one space token to specify the logical inline start and end margin of the container. This space token can also be used on breakpoints.
marginInlineStartMQ<string>
It can take one space token to specify the logical inline start margin of the container. This space token can also be used on breakpoints.
marginInlineEndMQ<string>
It can take one space token to specify the logical inline end margin of the container. This space token can also be used on breakpoints.
marginBlockMQ<string>
It can take one space token to specify the logical block start and end margin of the container. This space token can also be used on breakpoints.
marginBlockStartMQ<string>
It can take one space token to specify the logical block start margin of the container. This space token can also be used on breakpoints.
marginBlockEndMQ<string>
It can take one space token to specify the logical block end margin of the container. This space token can also be used on breakpoints.

Playground

TextBlock Content

No Crop
Render Styled Text as
1import React from 'react';
2import { TextBlock } from 'newskit';
3
4export default () => (
5  <TextBlock>TextBlock Content</TextBlock>
6);
7

For more information on overriding component defaults, see the docs here.