Paragraph

Use a Paragraph to lay text blocks vertically

While building any interface, you are faced with a dozen decisions every minute. At the core of every high quality interface, is a set of constraints that help in creating this level of consistency and quality.Not only do constriants help in consistent features, but they also make the decisions and their implementation fast.

<Paragraph>
  <Text>
    While building any interface, you are faced with a dozen decisions
    every minute. At the core of every high quality interface, is a
    set of constraints that help in creating this level of consistency
    and quality.
  </Text>
  <Text>
    Not only do constriants help in consistent features, but they also
    make the decisions and their implementation fast.
  </Text>
</Paragraph>

Props

Name

Type

Default

children

[ Text components ]

gap

number (from theme.space)

Examples

<Paragraph gap={8}>
  <Text>
    While building any interface, you are faced with a dozen decisions
    every minute. At the core of every high quality interface, is a
    set of constraints that help in creating this level of consistency
    and quality.
  </Text>
  <Text>
    Not only do constriants help in consistent features, but they also
    make the decisions and their implementation fast.
  </Text>
</Paragraph>

Customisation

Please read the docs on customising components first.

Paragraph uses the following theme properties:

Property

Theme key

component name

Paragraph

import { tokens, components } from 'react-ui/themes/base'

components.Card = {
  textAlign: 'justify',
  hyphens: 'auto'
}

<ThemeProvider tokens={tokens} components={components}>
  <Paragraph>
    <Text>
      While building any interface, you are faced with a dozen
      decisions every minute. At the core of every high quality
      interface, is a set of constraints that help in creating this
      level of consistency and quality.
    </Text>
    <Text>
      Not only do constriants help in consistent features, but they
      also make the decisions and their implementation fast.
    </Text>
  </Paragraph>
</ThemeProvider>