Basic usage

Our typography primitives have no predefined margins, as they may vary in the final interfaces. You can add them as needed based on your specific requirements.

H1, 48px, --fs-800

Paragraph example.

H2, 36px, --fs-700

Paragraph example.

H3, 32px, --fs-600

Paragraph example.

H4, 24px, --fs-500

Paragraph example.

H5, 20px, --fs-400

Paragraph example.

H6, 16px, --fs-300

Paragraph, 14px, --fs-200

Paragraph example, 16px, --fs-300

Paragraph, 14px, --fs-200

Paragraph, 12px, --fs-200

• •
  I'm gonna make him an offer he can't refuse.
• •
  Carpe diem. Seize the day, boys. Make your lives extraordinary.

1. 1
   I'm gonna make him an offer he can't refuse.
2. 2
   Carpe diem. Seize the day, boys. Make your lives extraordinary.

“I've seen things you people wouldn't believe. Attack ships on fire off the shoulder of Orion. I watched C-beams glitter in the dark near the Tannhäuser Gate. All those moments will be lost in time, like tears in rain. Time to die.Roy Batty

import React from 'react';
import { Blockquote, List, Text } from '@semcore/typography';

const Demo = () => (
  <div>
    <Text size={800} tag='h1' mb={6} mt={0}>
      H1, 48px, --fs-800
    </Text>
    <Text size={300} tag='p' mb={2} mt={0}>
      Paragraph example.
    </Text>
    <Text size={700} tag='h2' mb={4} mt={10}>
      H2, 36px, --fs-700
    </Text>
    <Text tag='p' mb={2} mt={0}>
      Paragraph example.
    </Text>
    <Text size={600} tag='h3' fontWeight={500} mb={4} mt={10}>
      H3, 32px, --fs-600
    </Text>
    <Text tag='p' mb={2} mt={0}>
      Paragraph example.
    </Text>
    <Text size={500} tag='h4' fontWeight={500} mb={3} mt={10}>
      H4, 24px, --fs-500
    </Text>
    <Text tag='p' mb={2} mt={0}>
      Paragraph example.
    </Text>
    <Text size={400} tag='h5' fontWeight={500} mb={2} mt={10}>
      H5, 20px, --fs-400
    </Text>
    <Text tag='p' mb={2} mt={0}>
      Paragraph example.
    </Text>
    <Text size={300} tag='h6' mb={1} mt={10}>
      H6, 16px, --fs-300
    </Text>
    <Text size={200} tag='p' mb={3} mt={0}>
      Paragraph, 14px, --fs-200
    </Text>
    <Text tag='p' mb={2} mt={10}>
      Paragraph example, 16px, --fs-300
    </Text>
    <Text size={200} tag='p' mb={3} mt={0}>
      Paragraph, 14px, --fs-200
    </Text>
    <Text size={100} tag='p' mb={2} mt={0}>
      Paragraph, 12px, --fs-200
    </Text>
    <List mb={2} mt={10}>
      <List.Item>I'm gonna make him an offer he can't refuse.</List.Item>
      <List.Item>Carpe diem. Seize the day, boys. Make your lives extraordinary.</List.Item>
    </List>
    <List tag='ol' mb={10} mt={10}>
      <List.Item marker={1}>I'm gonna make him an offer he can't refuse.</List.Item>
      <List.Item marker={2}>
        Carpe diem. Seize the day, boys. Make your lives extraordinary.
      </List.Item>
    </List>
    <Blockquote author='Roy Batty' my={4.5}>
      I've seen things you people wouldn't believe. Attack ships on fire off the shoulder of Orion.
      I watched C-beams glitter in the dark near the Tannhäuser Gate. All those moments will be lost
      in time, like tears in rain. Time to die.
    </Blockquote>
  </div>
);

export default Demo;

Text styling

You can style text by changing its color, font-weight, font-style, text-transform, and even changing its font-family to monospace.

import React from 'react';
import { Text } from '@semcore/typography';
import { Flex } from '@semcore/flex-box';

const Demo = () => (
  <Flex gap={1} direction='column'>
    <Text size={300} tag='p' mb={2} mt={0}>
      Example sentence with a <Text bold>bold text</Text>.
    </Text>
    <Text size={300} tag='p' mb={2} mt={0}>
      Example sentence with a <Text semibold>semibold text</Text>.
    </Text>
    <Text size={300} tag='p' mb={2} mt={0}>
      Example sentence with a <Text italic>italic text</Text>.
    </Text>
    <Text size={300} tag='p' mb={2} mt={0}>
      Example sentence with a <Text color='text-success'>colored text</Text>.
    </Text>
    <Text size={300} tag='p' mb={2} mt={0}>
      Example sentence with a <Text tag='s'>strikethrough text</Text>.
    </Text>
    <Text size={300} tag='p' mb={2} mt={0}>
      Example sentence with a <Text monospace>monospace text</Text>.
    </Text>
    <Text size={300} tag='p' mb={2} mt={0}>
      Example sentence with an <Text uppercase>uppercase text</Text>.
    </Text>
    <Text size={300} tag='p' mb={2} mt={0}>
      Example sentence with a <Text capitalize>capitalized text</Text>.
    </Text>
    <Text size={300} tag='p' mb={2} mt={0}>
      Example sentence with a <Text lowercase>LOWERCASE TEXT</Text>.
    </Text>
  </Flex>
);

export default Demo;

Custom list bullets

You can add custom bullets to our List.Item component.

import React from 'react';
import { List } from '@semcore/typography';
import CheckM from '@semcore/icon/Check/m';

const Demo = () => (
  <div>
    <List size={300} marker={<CheckM color='icon-secondary-success' mt={1} />}>
      <List.Item>List item with custom bullet.</List.Item>
      <List.Item marker={<CheckM color='icon-secondary-neutral' mt={1} />}>
        List item with other custom bullet.
      </List.Item>
    </List>
  </div>
);

export default Demo;

Native typography tags

To style native tags, use the FormatText component from the @semcore/format-text package.

Styling third-party HTML is acceptable, but for other cases, we recommend using the Text component.

import React from 'react';
import FormatText from '@semcore/format-text';

const Demo = () => (
  <FormatText>
    <h1>
      H1, <small>48px, --fs-800</small>
    </h1>
    <p>
      Paragraph example with a <strong>bold text</strong>.
    </p>
    <h2>
      H2, <small>36px, --fs-700</small>
    </h2>
    <p>
      Paragraph example with a <em>italic text</em>.
    </p>
    <h3>
      H3, <small>32px, --fs-600</small>
    </h3>
    <p>
      Paragraph example with a link: <a href='/'>Go to the main page</a> .
    </p>
    <h4>
      H4, <small>24px, --fs-500</small>
    </h4>
    <p>
      Paragraph example with a <abbr>abbreviation</abbr>.
    </p>
    <h5>
      H5, <small>20px, --fs-400</small>
    </h5>
    <p>
      Paragraph example with a <s>strikethrough text</s>.
    </p>
    <h6>
      H6, <small>16px, --fs-300</small>
    </h6>
    <p>
      Paragraph example with a <code>code</code>.
    </p>
    <ul>
      <li>I'm gonna make him an offer he can't refuse.</li>
      <li>Carpe diem. Seize the day, boys. Make your lives extraordinary.</li>
    </ul>
    <ol>
      <li>I'm gonna make him an offer he can't refuse.</li>
      <li>Carpe diem. Seize the day, boys. Make your lives extraordinary.</li>
    </ol>
    <blockquote>
      I've seen things you people wouldn't believe. Attack ships on fire off the shoulder of Orion.
      I watched C-beams glitter in the dark near the Tannhäuser Gate. All those moments will be lost
      in time, like tears in rain. Time to die.
      <cite>Roy Batty</cite>
    </blockquote>
  </FormatText>
);

export default Demo;

FormatText nested lists

For correct numbering in nested ordered lists, you must explicitly specify the start, reversed, or type attribute.

import React from 'react';
import FormatText from '@semcore/format-text';

const Demo = () => (
  <FormatText>
    <ol start={1}>
      <li>List item one</li>
      <li>
        List item two with subitems:
        <ul>
          <li>Subitem 1</li>
          <li>Subitem 2</li>
        </ul>
      </li>
      <li>Final list item</li>
    </ol>
  </FormatText>
);

export default Demo;

Hint with button role

WARNING

The ButtonLink component has been implemented to replace the Hint component. Using Hint as a button or a pseudo-link is no longer recommended.