Basic usage

The following heading styles are an example of a text scale used for product landing pages and text-heavy pages. You can set any heading tag to text of any size. However, we recommend setting heading levels on the page so that the visual hierarchy matches the semantic hierarchy in the code.

Our typography primitives don’t have predefined margins, as these may vary depending on the use case. You can add margins as needed based on your specific layout requirements.

INFO

H5 and H6 are shown here for illustrative purposes. We recommend avoiding the use of more than 4 heading levels in the interface.

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

const Demo = () => (
  <div>
    <Text size={800} tag='h1' fontWeight={600} 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' fontWeight={600} 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={600} 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={600} 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={600} mb={2} mt={10}>
      H5, 20px, --fs-400
    </Text>
    <Text tag='p' mb={2} mt={0}>
      Paragraph example.
    </Text>
    <Text size={300} tag='h6' fontWeight={700} mb={1} mt={10}>
      H6, 16px, --fs-300
    </Text>
    <Text size={200} tag='p' mb={3} mt={0}>
      Paragraph example.
    </Text>
    <Text tag='p' mb={2} mt={10}>
      Paragraph example, 16px, --fs-300
    </Text>
    <Text size={200} tag='p' mb={3} mt={0}>
      Paragrap example, 14px, --fs-200
    </Text>
    <Text size={100} tag='p' mb={2} mt={0}>
      Paragraph example, 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 { Flex } from '@semcore/ui/base-components';
import { Text } from '@semcore/ui/typography';
import React from 'react';

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 the List.Item component.

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

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 Text component from the @semcore/typography package with formatTags=true property.

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

import { Text } from '@semcore/ui/typography';
import type { TextProps } from '@semcore/ui/typography';
import React from 'react';

const Demo = (props: TextProps) => (
  <Text formatTags={props.formatTags}>
    <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>
  </Text>
);

export const defaultProps: TextProps = {
  formatTags: true,
};

Demo.defaultProps = defaultProps;

export default Demo;

Nested lists

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

import { Text } from '@semcore/ui/typography';
import type { TextProps } from '@semcore/ui/typography';
import React from 'react';

const Demo = (props: TextProps) => (
  <Text formatTags={props.formatTags}>
    <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>
  </Text>
);

export const defaultProps: TextProps = {
  formatTags: true,
};

Demo.defaultProps = defaultProps;

export default Demo;