Components
Styling
Styles, including resets, are only provided to KeystarUI components. We do this to avoid polluting the global CSS scope, so third-party and consumer styles aren’t unexpectedly affected by our styling opinions (and vice versa).
These styling decisions are especially important when considering how spacing behaves between typographic elements.
Text component
Paragraph element
Primitives
KeystarUI exports two typographic primitives Text and Heading, which should be used in most cases when rendering text elements in an interface.
Utilities
Utility components Emoji and Numeral can be composed together with the typographic primitives. Use Emoji to display emoji characters accessibly. Use Numeral to format numeric content.
Formatting
Emphasis
Use emphasis <em> for placing emphasis on part of a sentence, rendering the text as italic.
Do NOT use underline for emphasis. Underline text is reserved for text links.
Strong
Use strong emphasis <strong> for placing importance on part of a sentence, rendering the text at a heavier font weight.
Layout and appearance
Platform scales
Platform scales ensure that different sizes of text work together harmoniously, on both desktop and mobile.
A medium scale for devices with fine grained pointers (e.g. mouses), and a large scale for devices with coarser input (e.g. touch). Typographic primitives automatically switch between scales according to these device characteristics.
Semantic elements
By default, Text renders a span element. You can customise this using the elementType prop.
Paragraph text
Style props
The typographic primitives provide a handful of common style props. These style props are recommended where possible to reduce the amount of custom CSS in your application.
Spacing
KeystarUI’s typographic primitives implement Capsize, letting us control leading-trim.
What is a design system?
A set of interconnected patterns and shared practices coherently organised.Aiding the design and development of applications and websites.You’ll notice that there’s no space between the elements by default, which is intentional! Spacing between elements should be owned by layout primitives, like Flex and Grid, ensuring the system is composable while keeping white space predictable.
What is a design system?
A set of interconnected patterns and shared practices coherently organised.Aiding the design and development of applications and websites.Truncating (cropping) text
Use truncate for displaying user-generated content that may not fit within a particular layout, by limiting the contents of the element to the specified number of lines.
A flat-file CMS is a file-based content management system (CMS) that stores data in text files and folders rather than a database. Keystatic is a tool that makes Markdown, JSON and YAML content in your codebase editable by humans.
A flat-file CMS is a file-based content management system (CMS) that stores data in text files and folders rather than a database. Keystatic is a tool that makes Markdown, JSON and YAML content in your codebase editable by humans.When to truncate
Generally, you should only truncate content that isn’t essential to users' comprehension of a task or interface. In these cases you may want to indicate that more content is available, and allow the user to reveal the complete content via some interaction.
Allow text to wrap when the user needs to see the full text to understand what is expected. Note that some languages have longer line lengths.
Don’t truncate text in UI controls like buttons and menus, where it will impede users' understanding of what is expected. Note that touch devices won’t have tooltips on hover.
Content disclosure
The title attribute is populated automatically when children is a string. If children contains elements or components use the title prop to manually set the title attribute.