Newskit Logo
View Github

Components

Block

The Block is a simple container component that style and space can be applied to. This is the equivalent to a frame in Figma.

Status

Supported

Introduced

v0.1.0

View code

Status

Supported

Introduced

v0.1.0

Interactive Demo

This demo allows you to preview the Block component, its variations, and configuration options.

This is a block
Render as
spaceStack
spaceInset
stylePreset
1import React from 'react';
2import { Block } from 'newskit';
3
4export default () => <Block>This is a block</Block>;
5

Anatomy

The Block contains one element.

ItemNameDescriptionComponentOptional

Options

The Block has options that can be used to provide an appropriate experience for different use cases.

Render as

By using Render as, the block can be converted to a ‘span’.

Style

Styling can be applied to the block by using style presets.

Spacing

Three types of spacing can be applied to the block; spaceInline, spaceStack, and spaceInset.

Render as

By using Render as, the block can be converted to a ‘span’.

Style

Styling can be applied to the block by using style presets.

Spacing

Three types of spacing can be applied to the block; spaceInline, spaceStack, and spaceInset.

Usage

The following guidance describes how and when to appropriately use the Block.

Do

Use the Block as a container to easily apply spacing and style presets around other elements.

Don’t

Avoid using the Block component when equal spacing needs to be applied to multiple elements. In this case, the Stackcomponent, or the Grid component should be used.

Accessibility Considerations

As this is an HTML element, this component can utilise any aria attribute, such as region. See more details here.

SEO Considerations

There are no SEO considerations for this component.

API

The Block has a range of props that can be used to define an appropriate experience for different use cases.

Block
NameTypeDefaultDescriptionRequired

The Block can utilise any valid HTML attribute..

Compliance

All of the components in the NewsKit design system go through a comprehensive set of checks to ensure that we are producing compliant and best practice components.

FeatureDescriptionStatus

Need Help?

Cant find what you are looking for?

Need Help?

Cant find what you are looking for?