Waffles
© 2021 DataCamp, Inc.

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.
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

  1. apples
  2. oranges
  3. bananas

Props

Text

NameValueDefaultDescription
childrencustom | arrayOfRequiredThe content to display. Can contain a combination of strings, Small components, and Strong Components.
classNamestringSets the css class of the rendered element. Can be used to apply custom styles.
dataAttributesobjectAs with all the other waffles components, dataAttributes can be used to set data- html attributes on the element.

Heading

NameValueDefaultDescription
as'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'RequiredThe html element to render.
childrenReactNodeRequiredThe content of the Heading. This should be a string, but it can also contain Strong components.
classNamestringSets the css class of the rendered element. Can be used to apply custom styles.
dataAttributesobjectAs with all the other waffles components, dataAttributes can be used to set data- html attributes on the element.
multiLinebooleanfalseWhen true, the Heading will wrap text. By default the text will be truncated.
size200 | 300 | 400 | 500 | 600 | 650 | 700 | 800 | 900RequiredThe size of the Heading to render.

Paragraph

NameValueDefaultDescription
childrenReactNodeRequiredThe content to display. Can contain a combination of strings, Text components, Strong components, Small components, Emphasis components, and Code components.
classNamestringSets the css class of the rendered element. Can be used to apply custom styles.
dataAttributesobjectAs with all the other waffles components, dataAttributes can be used to set data- html attributes on the element.

Link

NameValueDefaultDescription
childrenstringRequiredThe content of the Link.
classNamestringSets the css class of the rendered element. Can be used to apply custom styles.
dataAttributesobjectAs with all the other waffles components, dataAttributes can be used to set data- html attributes on the element.
hrefstringThe url to navigate to, when the user clicks.
onClickReactMouseEventHandlerCallback fired on click, can be used with client side navigation, but shouldn't be used in place of a button.
onMouseEnterReactMouseEventHandlerCallback fired when the mouse enters the element
refHTMLAnchorElement

Strong

NameValueDefaultDescription
childrencustom | arrayOfRequiredThe content to display. Can contain a combination of strings, Text components, and Emphasis Components.
classNamestringSets the css class of the rendered element. Can be used to apply custom styles.
dataAttributesobjectAs with all the other waffles components, dataAttributes can be used to set data- html attributes on the element.

Emphasis

NameValueDefaultDescription
childrencustom | arrayOfRequiredThe content to display. Can contain a combination of strings, Text components, and Strong Components.
classNamestringSets the css class of the rendered element. Can be used to apply custom styles.
dataAttributesobjectAs with all the other waffles components, dataAttributes can be used to set data- html attributes on the element.

Small

NameValueDefaultDescription
childrencustom | arrayOfRequiredThe content to display. Can contain a combination of strings, Strong components, and Emphasis Components.
classNamestringSets the css class of the rendered element. Can be used to apply custom styles.
dataAttributesobjectAs with all the other waffles components, dataAttributes can be used to set data- html attributes on the element.

CodeBlock

NameValueDefaultDescription
childrenstringRequiredThe code to display.
classNamestringSets the css class of the rendered element. Can be used to apply custom styles.
dataAttributesobjectAs with all the other waffles components, dataAttributes can be used to set data- html attributes on the element.

Code

NameValueDefaultDescription
childrenstringRequiredThe code to display.
classNamestringSets the css class of the rendered element. Can be used to apply custom styles.
dataAttributesobjectAs with all the other waffles components, dataAttributes can be used to set data- html attributes on the element.

Badge

NameValueDefaultDescription
childrenstringRequiredThe content to render in the Badge
classNamestringAdditionaly css className to add to the rendered element
colorstringRequiredThe 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

NameValueDefaultDescription
childrenReactNodeRequiredThe content to display. Should only be List.Item components
classNamestringSets the css class of the rendered element. Can be used to apply custom styles.
dataAttributesobjectAs with all the other waffles components, dataAttributes can be used to set data- html attributes on the element.
orderedbooleanBlah Blah Blah docs

List.Item

NameValueDefaultDescription
childrenReactNodeRequired
classNamestring

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';