NewsKit Mobile Logo

Block

Overview

The Block is a simple container component that can take margin, padding and style presets. For more information on the spacing preset, please refer to page here.

Props

asstring = div
This is a string name of the html element that the block can be converted to. Block defaults as a div element, but it can be converted to a `span` by using this prop.
stylePresetMQ<string>
If provided, applies style on the Block.
spaceInlineMQ<string>
This is a spacing preset token which is applied as a margin on the right of the Block. Use this to space inline content across the page.
spaceStackMQ<string>
This is a spacing preset token which is applied as a margin on the bottom of the Block. Use this to space stacking content down the page.
spaceInsetMQ<string>
If provided, applies padding on the Block. The padding space is evenly distributed on either side when `spaceInsetXXX` token is passed. Tokens like `spaceInsetSquishXXX` and `spaceInsetStretchXXX` will also populated space values on all sides but values for horizontal and vertical space will be different depending on the token type.

Playground

This is a block
Props
Render as
spaceInline
spaceStack
spaceInset
stylePreset
import React from 'react';
import { Block } from 'newskit';

export default () => <Block>This is a block</Block>;