Newskit Logo
Newskit Logo
Newskit Logo
About
Guides
Foundations
Components
Patterns
About
Guides
Foundations
Components
Patterns

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
View Design

Status

Supported

Introduced

v0.1.0
View code
View Design

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
1
BlockThe HTML element.

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.

Do not

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
as
string
div
If provided, renders the Block as this element. e.g span.
stylePreset
MQ<string>
If provided, applies style on the Block.
spaceInline
MQ<string>
Set the spacing which is applied as a margin on the right of the Block.
spaceStack
MQ<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.
spaceInset
MQ<string>
Overrides the space inset applied to the Block.
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
VariationsRelevant variations (style, size, orientation etc.)
Interactive statesAll interactive states that are applicable (hover, active, focus, focus, disabled, error etc).
Defined behavioursGuidelines for layout, animation, interactions, etc.
Usage guidelinesIncludes a list of dos and don’ts that highlight best practices and common mistakes to avoid.
Accessibility guidelinesFollows WCAG 2.0 standards (AA). Accessibility documentation defined including focus order, keyboard interactions and ARIA.
SEO guidelinesConforms to best practice SEO techniques. SEO considerations defined.
PropsDetails of component properties - their name, type, options, default, whether it’s required and their description have been defined.
Technical performance considerationsDetails on how this component may impact performance.
Available in UI kitIncluded within Figma Web Gallery file.
Design specificationsDetailed design specification including sizing, spacing and design tokens defined.
ThemesDisplays correctly across light and dark themes.

Need Help?

Cant find what you are looking for?

Need Help?

Cant find what you are looking for?