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>The intent of Ethereum is to...</Text>
Text with span
Renders text inside a <span> element.
The intent of Ethereum is to...
<Text.span>The intent of Ethereum is to...</Text.span>
Paragraph text
Renders text inside a <p> element.
The intent of Ethereum is to ...
<Text.p>The intent of Ethereum is to ...</Text.p>
Text with strikethrough
The intent of Ethereum is to...
<Text.s>The intent of Ethereum is to...</Text.s>
Bold text
The intent of Ethereum is to...
<Text fontWeight={"bold"}>The intent of Ethereum is to...</Text>
Italic text
The intent of Ethereum is to...
<Text italic>The intent of Ethereum is to...</Text>
Caps text
The intent of Ethereum is to...
<Text caps>The intent of Ethereum is to...</Text>
Serif text
The intent of Ethereum is to...
<Text fontFamily="serif">The intent of Ethereum is to...</Text>
Sans serif text
The intent of Ethereum is to...
<Text fontFamily="sansSerif">The intent of Ethereum is to...</Text>
Props
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.
Content guidelines evidence
Don't center-align your text if it's over 3 lines
Left-align blocks of text to make it easier to read.
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.
Centre-aligned text is harder to read across multiple lines because the starting point of each line changes.
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.
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.
Avoid large blocks of text without signposts. Reader behaviour suggests users will scan a page to look for headings that represent the information they're interested in.
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, 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
Hemingway app makes it easier to simplify your writing.
A low reading age isn't about dumbing down content it's about being more respectful of your users time.
Write in short sentences and avoid complex terms when there are simpler alternatives.
Assumed knowledge and complex terminology only makes your product more difficult and less enjoyable to use.
Use jargon, technical language or complex sentence structures.
- Heading – a component to give users scannable titles on your interface.
