Text

The Text component allows you to control font size, weight, alignment and colour.
Import component
import { Text } from 'rimble-ui';

Examples

Different ways to use the Text component.
Default
By default, the Text component will render text inside a <div> element.
The intent of Ethereum is to...
Text with span
Renders text inside a <span> element.
The intent of Ethereum is to...
Paragraph text
Renders text inside a <p> element.

The intent of Ethereum is to ...

Text with strikethrough
The intent of Ethereum is to...
Bold text
The intent of Ethereum is to...
Italic text
The intent of Ethereum is to...
Caps text
The intent of Ethereum is to...

Props

Prop NameTypeIs RequiredDefault ValueDescription
themeobjectoptionalnone
coloroptional
'copyColor'
fontFamilyoptional
'sansSerif'
fontSizeoptional
2
fontWeightoptional
2
lineHeightoptional
'copy'
textAlignoptional
'left'
Styled System Props
Text uses COMMON, TYPOGRAHY groups of Styed System props.

Design guidelines

Use the Text component for copy. Remember to keep your writing as simple as possible, particularly in the blockchain world. Also, bear in mind users are prone to scanning content, so use small chunks of text broken up by headings to make your text more useful.
Don't center-align your text if it's over 3 lines
Centre-aligned text can make it more difficult to read.
Do
The intent of Ethereum is to create an alternative protocol for building decentralized applications, providing a different set of tradeoffs that we believe will be very useful for a large class of decentralized applications, with particular emphasis on situations where rapid development time, security for small and rarely used applications, and the ability of different applications to very efficiently interact, are important.
Don't
The intent of Ethereum is to create an alternative protocol for building decentralized applications, providing a different set of tradeoffs that we believe will be very useful for a large class of decentralized applications, with particular emphasis on situations where rapid development time, security for small and rarely used applications, and the ability of different applications to very efficiently interact, are important.
Use Heading to break up long copy
Use the Heading component to break up text and make it easier for users to find what they're looking for.
Do

The intent of Ethereum

The intent of Ethereum is to create an alternative protocol for building decentralized applications, providing a different set of tradeoffs that we believe will be very useful for a large class of decentralized applications.

Where is Ethereum most important?

Ethereum is particularly important for building decentralized applications with particular emphasis on rapid development time, security for small and rarely used applications, and the ability of different applications to very efficiently interact, are important.
Don't
The intent of Ethereum is to create an alternative protocol for building decentralized applications, providing a different set of tradeoffs that we believe will be very useful for a large class of decentralized applications, with particular emphasis on situations where rapid development time, security for small and rarely used applications, and the ability of different applications to very efficiently interact, are important.
Aim for a low reading age
Make it easier for your users to read your copy. The lower the reading age, the simpler it will be for them to consume your information.
Hemingway app
makes it easier to simplify your writing.
Do
Write in short sentences and avoid complex terms when there are simpler alternatives.
Don't
Use jargon, technical language or complex sentence structures.
  • Heading – a component to give users scannable titles on your interface.
(ノ◕ヮ◕)ノ*:・゚✧

Are we missing anything?

If you have any extra insight you'd like to add, please raise an issue in Github.
Contribute