Skip to main content

Typography

Concrete has two components for text. Title and Text which has different size type according to the usage.

Title​

Title is a styled header component and should be use as such to keep a clean html structure.

Types​

headerMaxi

headerBig

header

headerSmall

section

regular

Text​

The Text component should be used for any text that is not directly in a component like a Button or a Title. This will allow keeping consistent ui across your application.

Types​

veryLarge
large
emphasis
regular
small
caption
captionSmall

Variations​

Sometimes you will want to highlight or add some variations to your text. Text comes with a variation prop with a set of predefined variations

title
button
text
lowContrast

Markdown​

Sometimes your text will come from server and users will want to have rich text UI. With the props markdown, you will allow the display of rich text in markdown format.

Markdown example​

<Text markdown>**I'm bold**</Text>

Font Family​

To use the right font with Concrete you will need to add the EuclidFont component at the root of your app.

import { EuclidFont, Provider } from "@habx/ui-core";
export const App = () => {
  return (
    <Provider>
      <EuclidFont />
    </Provider>
  );
};