Text

Text makes your text fit in your boxes will built-in ellipsis support.

Basic

This is a simple text, nothing fancy.
import React from 'react'
import { Text, Box } from '@smooth-ui/core-sc'

function Example() {
  return <Text>This is a simple text, nothing fancy.</Text>
}

render(<Example />)
import React from 'react'
import { Text, Box } from '@smooth-ui/core-sc'
function Example() {
  return <Text>This is a simple text, nothing fancy.</Text>
}
render(<Example />)

Headings

Text component has built-in variants for h* elements.

h1. Heading
h2. Heading
h3. Heading
h4. Heading
h5. Heading
h6. Heading
import React from 'react'
import { Text, Boxer } from '@smooth-ui/core-sc'

function Example() {
  return (
    <Boxer my={10}>
      <Text variant="h1">h1. Heading</Text>
      <Text variant="h2">h2. Heading</Text>
      <Text variant="h3">h3. Heading</Text>
      <Text variant="h4">h4. Heading</Text>
      <Text variant="h5">h5. Heading</Text>
      <Text variant="h6">h6. Heading</Text>
    </Boxer>
  )
}

render(<Example />)
import React from 'react'
import { Text, Boxer } from '@smooth-ui/core-sc'
function Example() {
  return (
    <Boxer my={10}>
      <Text variant="h1">h1. Heading</Text>
      <Text variant="h2">h2. Heading</Text>
      <Text variant="h3">h3. Heading</Text>
      <Text variant="h4">h4. Heading</Text>
      <Text variant="h5">h5. Heading</Text>
      <Text variant="h6">h6. Heading</Text>
    </Boxer>
  )
}
render(<Example />)

Customize Headings

Variant and semantic are two different things, you could use a variant h1 and choose to use a h2 tag using forwardedAs. In the following example, we use div for each of them.

h1. Heading
h2. Heading
h3. Heading
h4. Heading
h5. Heading
h6. Heading
import React from 'react'
import { Text, Boxer } from '@smooth-ui/core-sc'

function Example() {
  return (
    <Boxer my={10}>
      <Text forwardedAs="div" variant="h1">
        h1. Heading
      </Text>
      <Text forwardedAs="div" variant="h2">
        h2. Heading
      </Text>
      <Text forwardedAs="div" variant="h3">
        h3. Heading
      </Text>
      <Text forwardedAs="div" variant="h4">
        h4. Heading
      </Text>
      <Text forwardedAs="div" variant="h5">
        h5. Heading
      </Text>
      <Text forwardedAs="div" variant="h6">
        h6. Heading
      </Text>
    </Boxer>
  )
}

render(<Example />)
import React from 'react'
import { Text, Boxer } from '@smooth-ui/core-sc'
function Example() {
  return (
    <Boxer my={10}>
      <Text forwardedAs="div" variant="h1">
        h1. Heading
      </Text>
      <Text forwardedAs="div" variant="h2">
        h2. Heading
      </Text>
      <Text forwardedAs="div" variant="h3">
        h3. Heading
      </Text>
      <Text forwardedAs="div" variant="h4">
        h4. Heading
      </Text>
      <Text forwardedAs="div" variant="h5">
        h5. Heading
      </Text>
      <Text forwardedAs="div" variant="h6">
        h6. Heading
      </Text>
    </Boxer>
  )
}
render(<Example />)

Display Headings

Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style. Keep in mind these headings are not responsive by default.

Display 1
Display 2
Display 3
Display 4
import React from 'react'
import { Text, Boxer } from '@smooth-ui/core-sc'

function Example() {
  return (
    <Boxer my={10}>
      <Text variant="display-1">Display 1</Text>
      <Text variant="display-2">Display 2</Text>
      <Text variant="display-3">Display 3</Text>
      <Text variant="display-4">Display 4</Text>
    </Boxer>
  )
}

render(<Example />)
import React from 'react'
import { Text, Boxer } from '@smooth-ui/core-sc'
function Example() {
  return (
    <Boxer my={10}>
      <Text variant="display-1">Display 1</Text>
      <Text variant="display-2">Display 2</Text>
      <Text variant="display-3">Display 3</Text>
      <Text variant="display-4">Display 4</Text>
    </Boxer>
  )
}
render(<Example />)

Add a new variant

Variants are defined in texts section of your theme, you can add a variant by customizing your theme.

Hello world
import React from 'react'
import { css, ThemeProvider } from 'styled-components'
import { Text } from '@smooth-ui/core-sc'

const theme = {
  texts: {
    'comic-title': {
      // If you don't specify a `forwardedAs` in your component, it will use this one
      // by default it uses a `span`
      defaultAs: 'h1',
      style: css`
        font-family: 'comic sans ms', sans-serif;
        font-size: 5rem;
      `,
    },
  },
}

function Example() {
  return <Text variant="comic-title">Hello world</Text>
}

render(
  <ThemeProvider theme={theme}>
    <Example />
  </ThemeProvider>,
)
import React from 'react'
import { css, ThemeProvider } from 'styled-components'
import { Text } from '@smooth-ui/core-sc'
const theme = {
  texts: {
    'comic-title': {
      // If you don't specify a `forwardedAs` in your component, it will use this one
      // by default it uses a `span`
      defaultAs: 'h1',
      style: css`
        font-family: 'comic sans ms', sans-serif;
        font-size: 5rem;
      `,
    },
  },
}
function Example() {
  return <Text variant="comic-title">Hello world</Text>
}
render(
  <ThemeProvider theme={theme}>
    <Example />
  </ThemeProvider>,
)

Ellispis & multilines

Make your text fit on one line or several lines using lines property.

This text should fit on one line.
This text should fit on two lines, and takes the space of two lines.
import React from 'react'
import { Text, Box, Separator } from '@smooth-ui/core-sc'

function Example() {
  return (
    <Box width={200}>
      <Text lines={1}>This text should fit on one line.</Text>
      <Separator />
      <Text lines={2}>
        This text should fit on two lines, and takes the space of two lines.
      </Text>
    </Box>
  )
}

render(<Example />)
import React from 'react'
import { Text, Box, Separator } from '@smooth-ui/core-sc'
function Example() {
  return (
    <Box width={200}>
      <Text lines={1}>This text should fit on one line.</Text>
      <Separator />
      <Text lines={2}>
        This text should fit on two lines, and takes the space of two lines.
      </Text>
    </Box>
  )
}
render(<Example />)

Accessibility

• The ellipsis uses line-clamp, it means your text stay in the page and is visible by screen reader.
• By default, variants induces the HTML element that will be used, but your are free to use yours.

API

Text