Waffles - Paragraph

Usage guidance

The Paragraph component offers three different size values to choose from: small, medium and large. In most cases, the default size should be used.

To highlight the content of importance, use regular strong or em elements. Paragraph also offers a more subtle variant="secondary" for use with less important or supportive content. On top of this, others components such as Code and Link can be used within the content.

Best practices

Examples

Variants

Through hands-on exercises, you’ll learn how to understand data, whether it’s a bar plot on the news or as a statistic shared during a work meeting. You’ll expand your knowledge of key data topics, including data science, machine learning, data visualization, and even data engineering and cloud computing.

Sizes

Python is a general-purpose programming language that is becoming ever more popular for data science. Companies worldwide are using Python to harvest insights from their data and gain a competitive edge. Unlike other Python tutorials, this course focuses on Python specifically for data science.

Playground

import { Paragraph } from '@datacamp/waffles/paragraph';

function Playground() {
  return (
    <Paragraph variant="primary" size="medium">
      Oracle estimated over 2 million R users worldwide in 2012, cementing R as
      a leading programming language in statistics and data science. Every year,
      the number of R users grows by about 40%, and an increasing number of
      organizations are using it in their day-to-day activities.
    </Paragraph>
  );
}

import { Paragraph } from '@datacamp/waffles/paragraph';

function Playground() {
  return (
    <Paragraph variant="primary" size="medium">
      Oracle estimated over 2 million R users worldwide in 2012, cementing R as
      a leading programming language in statistics and data science. Every year,
      the number of R users grows by about 40%, and an increasing number of
      organizations are using it in their day-to-day activities.
    </Paragraph>
  );
}

Live

Props

Paragraph

In addition to the props listed below, Paragraph accepts all props from React.HTMLAttributes<HTMLParagraphElement>.

Name	Type	Description
`children`Required	`React.ReactNode`	The content of the Paragraph.
`inverted`	`boolean`	Sets the style of the Paragraph suitable for dark backgrounds. Default: `false` DEPRECATED Will be removed in `v6` - use Waffles' Theming instead.
`size`	`largemediumsmall`	Defines the font size of the Paragraph. In general, default size should be used. Default: `medium`
`variant`	`primarysecondary`	Defines the variant of the Paragraph. Default: `primary`

Imports

You can import the following components, utilities or types from this module:

import { Paragraph } from '@datacamp/waffles/paragraph';
import type { ParagraphProps } from '@datacamp/waffles/paragraph';