NewsKit Mobile Logo

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.
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.

Playground

TextBlock Content

Props
Render Styled Text as
import React from 'react';
import { TextBlock } from 'newskit';

export default () => (
  <TextBlock>TextBlock Content</TextBlock>
);

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