⚠️This version of Waffles Design System is no longer maintained, and was deprecated at the end of 2022. It's main repository is archived. Please migrate your app to the New Waffles.

components

Text

Various specialized text components, from regular paragraphs to headlings and links.

Overview

Waffles exposes following text components:

GlobalFontFaces – A global component that loads the font faces used by the other components. If the waffles scss is not being used, this component should be mounted on the page.
Text – The base text component that can be used as a building block for everthing else.
Paragraph – Renders a block of text.
Heading – Renders various sized headings.
Strong – Renders bold text.
Emphasis – Renders italic text.
Small – Renders text at a size smaller than the default.
Code – Renders inline code.
CodeBlock – Renders a preformatted block of code.
Link – Renders an anchor component.
Badge – Renders a coloured badge.
List – Renders either an ordered or unordered list.

import {
  Badge,
  Code,
  CodeBlock,
  Emphasis,
  Heading,
  Link,
  List,
  Paragraph,
  Small,
  Strong,
} from '@datacamp/waffles-text';
import tokens from '@datacamp/waffles-tokens';

function Playground(): JSX.Element {
  return (
    <Fragment>
      <Heading as="h1" size={700}>
        Live example content
      </Heading>
      <Paragraph>
        This is a paragraph containing some Text, Strong, Emphasis, Link, Code
        and Small children. Lorem ipsum dolor sit amet, consectetur adipiscing
        elit. Donec a enim quis nisi{' '}
        <Link href="https://datacamp.com">sollicitudin tincidunt</Link> in nec
        leo. <Strong>Quisque mattis</Strong> pretium nulla,{' '}
        id malesuada nisi viverra consectetur. Donec auctor
        dapibus nisl sit amet tempor. Integer nec <Code>diam sit amet sem</Code>{' '}
        sollicitudin consectetur. Vestibulum velit turpis, egestas eget massa
        non, consectetur volutpat quam. Sed eu mi eget sem euismod iaculis.
        Aenean a ante <Emphasis>mattis orci</Emphasis> dapibus pulvinar. Quisque
        convallis arcu eu neque tincidunt condimentum.
      </Paragraph>
      <List>
        <List.Item>
          <Badge color={tokens.colors.green}>badge</Badge>{' '}
          First Item
        </List.Item>
        <List.Item>
          <Badge color={tokens.colors.navy} size="large">Badge</Badge>{' '}
          Second Item
        </List.Item>
      </List>
      <Heading as="h3" multiLine size={600}>
        Some extra content with a long name that needs to wrap
      </Heading>
      <CodeBlock>{`gapminder %>%
filter(year == 2007) %>%
arrange(desc(gdpPercap))`}</CodeBlock>
      <Small>Some additional copyright info.</Small>
    </Fragment>
  );
}

import {
  Badge,
  Code,
  CodeBlock,
  Emphasis,
  Heading,
  Link,
  List,
  Paragraph,
  Small,
  Strong,
} from '@datacamp/waffles-text';
import tokens from '@datacamp/waffles-tokens';

function Playground(): JSX.Element {
  return (
    <Fragment>
      <Heading as="h1" size={700}>
        Live example content
      </Heading>
      <Paragraph>
        This is a paragraph containing some Text, Strong, Emphasis, Link, Code
        and Small children. Lorem ipsum dolor sit amet, consectetur adipiscing
        elit. Donec a enim quis nisi{' '}
        <Link href="https://datacamp.com">sollicitudin tincidunt</Link> in nec
        leo. <Strong>Quisque mattis</Strong> pretium nulla,{' '}
        id malesuada nisi viverra consectetur. Donec auctor
        dapibus nisl sit amet tempor. Integer nec <Code>diam sit amet sem</Code>{' '}
        sollicitudin consectetur. Vestibulum velit turpis, egestas eget massa
        non, consectetur volutpat quam. Sed eu mi eget sem euismod iaculis.
        Aenean a ante <Emphasis>mattis orci</Emphasis> dapibus pulvinar. Quisque
        convallis arcu eu neque tincidunt condimentum.
      </Paragraph>
      <List>
        <List.Item>
          <Badge color={tokens.colors.green}>badge</Badge>{' '}
          First Item
        </List.Item>
        <List.Item>
          <Badge color={tokens.colors.navy} size="large">Badge</Badge>{' '}
          Second Item
        </List.Item>
      </List>
      <Heading as="h3" multiLine size={600}>
        Some extra content with a long name that needs to wrap
      </Heading>
      <CodeBlock>{`gapminder %>%
filter(year == 2007) %>%
arrange(desc(gdpPercap))`}</CodeBlock>
      <Small>Some additional copyright info.</Small>
    </Fragment>
  );
}

Live

Examples

Basic paragraph

Just a basic text.

Simple link

A simple link to the DataCamp website.

Inline code

Waffles exposes various text custom elements. For example you can import Paragraph from @datacamp/waffles-text directly.

Large badge

Large badge

Ordered list of items

Fruits

apples
oranges
bananas

Props

Text

Name	Value	Default	Description
children	custom \| arrayOf	Required	The content to display. Can contain a combination of strings, Small components, and Strong Components.
className	string		Sets the css class of the rendered element. Can be used to apply custom styles.
dataAttributes	object		As with all the other waffles components, dataAttributes can be used to set data- html attributes on the element.

Heading

Name	Value	Default	Description
as	'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'	Required	The html element to render.
children	ReactNode	Required	The content of the Heading. This should be a string, but it can also contain Strong components.
className	string		Sets the css class of the rendered element. Can be used to apply custom styles.
dataAttributes	object		As with all the other waffles components, dataAttributes can be used to set data- html attributes on the element.
multiLine	boolean	false	When true, the Heading will wrap text. By default the text will be truncated.
size	200 \| 300 \| 400 \| 500 \| 600 \| 650 \| 700 \| 800 \| 900	Required	The size of the Heading to render.

Paragraph

Name	Value	Default	Description
children	ReactNode	Required	The content to display. Can contain a combination of strings, Text components, Strong components, Small components, Emphasis components, and Code components.
className	string		Sets the css class of the rendered element. Can be used to apply custom styles.
dataAttributes	object		As with all the other waffles components, dataAttributes can be used to set data- html attributes on the element.

Link

Name	Value	Default	Description
children	string	Required	The content of the Link.
className	string		Sets the css class of the rendered element. Can be used to apply custom styles.
dataAttributes	object		As with all the other waffles components, dataAttributes can be used to set data- html attributes on the element.
href	string		The url to navigate to, when the user clicks.
onClick	ReactMouseEventHandler		Callback fired on click, can be used with client side navigation, but shouldn't be used in place of a button.
onMouseEnter	ReactMouseEventHandler		Callback fired when the mouse enters the element
ref	HTMLAnchorElement		—

Strong

Name	Value	Default	Description
children	custom \| arrayOf	Required	The content to display. Can contain a combination of strings, Text components, and Emphasis Components.
className	string		Sets the css class of the rendered element. Can be used to apply custom styles.
dataAttributes	object		As with all the other waffles components, dataAttributes can be used to set data- html attributes on the element.

Emphasis

Name	Value	Default	Description
children	custom \| arrayOf	Required	The content to display. Can contain a combination of strings, Text components, and Strong Components.
className	string		Sets the css class of the rendered element. Can be used to apply custom styles.
dataAttributes	object		As with all the other waffles components, dataAttributes can be used to set data- html attributes on the element.

Small

Name	Value	Default	Description
children	custom \| arrayOf	Required	The content to display. Can contain a combination of strings, Strong components, and Emphasis Components.
className	string		Sets the css class of the rendered element. Can be used to apply custom styles.
dataAttributes	object		As with all the other waffles components, dataAttributes can be used to set data- html attributes on the element.

CodeBlock

Name	Value	Default	Description
children	string	Required	The code to display.
className	string		Sets the css class of the rendered element. Can be used to apply custom styles.
dataAttributes	object		As with all the other waffles components, dataAttributes can be used to set data- html attributes on the element.

Code

Name	Value	Default	Description
children	string	Required	The code to display.
className	string		Sets the css class of the rendered element. Can be used to apply custom styles.
dataAttributes	object		As with all the other waffles components, dataAttributes can be used to set data- html attributes on the element.

Badge

Name	Value	Default	Description
children	string	Required	The content to render in the Badge
className	string		Additionaly css className to add to the rendered element
color	string	Required	The colour of the Badge. This can be any HEX color, but it is recommended to use a color from @datacamp/waffles-tokens. The text color will be set automatically.
size	'small' \| 'large'	'small'	The size of the Badge to render.

List

Name	Value	Default	Description
children	ReactNode	Required	The content to display. Should only be List.Item components
className	string		Sets the css class of the rendered element. Can be used to apply custom styles.
dataAttributes	object		As with all the other waffles components, dataAttributes can be used to set data- html attributes on the element.
ordered	boolean		Blah Blah Blah docs

List.Item

Name	Value	Default	Description
children	ReactNode	Required	—
className	string		—

Imports

You can import following components or utilities from this module:

import {
  Text,
  Strong,
  Small,
  Paragraph,
  Heading,
  Emphasis,
  CodeBlock,
  Code,
  Link,
  GlobalFontFaces,
  Badge,
  List,
  alternateComponents,
} from '@datacamp/waffles-text';