Components
Structure
Text

Text

Tags are used for items that need to be labeled, categorized, or organized using keywords that describe them.

Import statement

import { Text } from "@wfp/react"

Usage

Example

Editable Example

import { Text } from "@wfp/react";

<Text>Some text here</Text>;

Headings Example

Expand code

Editable Example

import { Card } from "@wfp/react";

<>
  <Text kind="h1">Heading 1</Text>
  <div
    style={{ color: "#A9A9A9", marginBottom: "1rem" }}
  >
    29px, SemiBold"
  </div>
  <Text kind="h2">Heading 2</Text>
  <div
    style={{ color: "#A9A9A9", marginBottom: "1rem" }}
  >
    25px, SemiBold"
  </div>
  <Text kind="h3">Heading 3</Text>
  <div
    style={{ color: "#A9A9A9", marginBottom: "1rem" }}
  >
    22px, SemiBold"
  </div>
  <Text kind="h4">Heading 4</Text>
  <div
    style={{ color: "#A9A9A9", marginBottom: "1rem" }}
  >
    20px, SemiBold"
  </div>
  <Text kind="h5">Heading 5</Text>
  <div
    style={{ color: "#A9A9A9", marginBottom: "1rem" }}
  >
    18px, SemiBold"
  </div>
  <Text kind="h6">Heading 6</Text>
  <div
    style={{ color: "#A9A9A9", marginBottom: "1rem" }}
  >
    16px, SemiBold"
  </div>
</>;

Text Example

Expand code

Editable Example

import { Text } from "@wfp/react";

<>
  <Text kind="p">Body copy, paragraph</Text>
  <div
    style={{ color: "#A9A9A9", marginBottom: "1rem" }}
  >
    16px, Regular
  </div>
  <Text kind="code">Code</Text>
  <div
    style={{ color: "#A9A9A9", marginBottom: "1rem" }}
  >
    Monospace, 16px, Regular
  </div>
  <Text kind="inline-highlight">Inline highlight</Text>
  <div
    style={{ color: "#A9A9A9", marginBottom: "1rem" }}
  >
    14px, SemiBold
  </div>
</>;

Page title Example

Expand code

Editable Example

import { Text } from "@wfp/react";

<>
  <Text kind="title">Title</Text>
  <div
    style={{ color: "#A9A9A9", marginBottom: "1rem" }}
  >
    58px, Light
  </div>
  <Text kind="subtitle">Overline</Text>
  <div
    style={{ color: "#A9A9A9", marginBottom: "1rem" }}
  >
    14px, SemiBold
  </div>
</>;

Links Example

Expand code

Editable Example

import { Text, Link } from "@wfp/react";

<>
  <Text kind="a">Link</Text>
  <div
    style={{ color: "#A9A9A9", marginBottom: "1rem" }}
  >
    16px, Regular
  </div>
  <Link className="wfp--link--hover">Link</Link>
  <div
    style={{ color: "#A9A9A9", marginBottom: "1rem" }}
  >
    16px, Regular
  </div>
</>;

Emphasis Example

Expand code

Editable Example

import { Text } from "@wfp/react";

<>
  <Text kind="strong">Bold</Text>
  <div
    style={{ color: "#A9A9A9", marginBottom: "1rem" }}
  >
    16px, Bold
  </div>
  <Text kind="bold">SemiBold</Text>
  <div
    style={{ color: "#A9A9A9", marginBottom: "1rem" }}
  >
    16px, SemiBold
  </div>
  <Text kind="i">Italic</Text>
  <div
    style={{ color: "#A9A9A9", marginBottom: "1rem" }}
  >
    16px, Italic
  </div>
</>;

Lists Example

Expand code

Editable Example

import { Text, List, ListItem } from "@wfp/react";

<>
  <Text kind="h4">Ordered lists</Text>
  <List kind="simple">
    <ListItem>Numbered List 1</ListItem>
    <ListItem>Numbered List 2</ListItem>
    <ListItem>Numbered List 3</ListItem>
  </List>
  <div
    style={{ color: "#A9A9A9", marginBottom: "1rem" }}
  >
    16px, Regular
  </div>
  <Text kind="h4">Bullet lists</Text>
  <List kind="bullets">
    <ListItem>Numbered List 1</ListItem>
    <ListItem>Numbered List 2</ListItem>
    <ListItem>Numbered List 3</ListItem>
  </List>
  <div
    style={{ color: "#A9A9A9", marginBottom: "1rem" }}
  >
    16px, Regular
  </div>
  <Text kind="h4">Ordered lists</Text>
  <List kind="ordered">
    <ListItem>Numbered List 1</ListItem>
    <ListItem>Numbered List 2</ListItem>
    <ListItem>Numbered List 3</ListItem>
  </List>
  <div
    style={{ color: "#A9A9A9", marginBottom: "1rem" }}
  >
    16px, Regular
  </div>
</>;

Colours Example

Expand code

Editable Example

import { Text } from "@wfp/react";

<>
  <div style={{ display: "flex" }}>
    <div>
      <Text>#text-01</Text>
      <div
        style={{
          color: "#A9A9A9",
          marginBottom: "3rem",
        }}
      >
        16px, #031C2D
      </div>
    </div>
    <div
      style={{
        backgroundColor: "#031C2D",
        width: "50px",
        height: "50px",
        borderRadius: "50%",
        marginLeft: "1.5rem",
      }}
    ></div>
  </div>
  <div style={{ display: "flex" }}>
    <div>
      <Text>#text-02</Text>
      <div
        style={{
          color: "#A9A9A9",
          marginBottom: "3rem",
        }}
      >
        16px, #5A6872
      </div>
    </div>
    <div
      style={{
        backgroundColor: "#5A6872",
        width: "50px",
        height: "50px",
        borderRadius: "50%",
        marginLeft: "1.5rem",
      }}
    ></div>
  </div>
  <div style={{ display: "flex" }}>
    <div>
      <Text>#text-03</Text>
      <div
        style={{
          color: "#A9A9A9",
          marginBottom: "3rem",
        }}
      >
        16px, #DFE6EB
      </div>
    </div>
    <div
      style={{
        backgroundColor: "#DFE6EB",
        width: "50px",
        height: "50px",
        borderRadius: "50%",
        marginLeft: "1.5rem",
      }}
    ></div>
  </div>
</>;

On this page

References