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
Anatomy
The Block contains one element.
| Item | Name | Description | Component | Optional |
|---|---|---|---|---|
1 | Block | The 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.
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.
| Name | Type | Default | Description | Required |
|---|---|---|---|---|
| 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. |
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.
| Feature | Description | Status |
|---|---|---|
| Variations | Relevant variations (style, size, orientation etc.) | |
| Interactive states | All interactive states that are applicable (hover, active, focus, focus, disabled, error etc). | |
| Defined behaviours | Guidelines for layout, animation, interactions, etc. | |
| Usage guidelines | Includes a list of dos and don’ts that highlight best practices and common mistakes to avoid. | |
| Accessibility guidelines | Follows WCAG 2.0 standards (AA). Accessibility documentation defined including focus order, keyboard interactions and ARIA. | |
| SEO guidelines | Conforms to best practice SEO techniques. SEO considerations defined. | |
| Props | Details of component properties - their name, type, options, default, whether it’s required and their description have been defined. | |
| Technical performance considerations | Details on how this component may impact performance. | |
| Available in UI kit | Included within Figma Web Gallery file. | |
| Design specifications | Detailed design specification including sizing, spacing and design tokens defined. | |
| Themes | Displays correctly across light and dark themes. |
Cant find what you are looking for?
Cant find what you are looking for?