Pluma

Theme

Overview

About

MCP server

CLI

Codemods

3.0.0

Button Variant Rename

Banner Description Prop

~~LabelIcon~~

~~ToggleButton~~

FormattedRelativeTime

~~Label~~

Alpha

Menu keyboard shortcuts

Emphasis

Github

Storybook

Marks text that has stress emphasis.

Importing

The component can be imported via:

import { Emphasis } from '@customerio/pluma-components/react';

Usage

The component renders an <em> tag with an italic style.

It must be used in another typography component, like Text or Paragraph.

Loading editor

API

`PlumaEmphasis` `extends Text`

`color"critical" | "caution" | "success" | "bold" | "accent" | "active" | "base" | "black" | "code" | "information" | "invert" | "minimal" | "placeholder" | "subtle" | "white" | "disabled" | "inherit" | undefined`

Default:inherit

The text color. _{^{(See text color tokens)}}

`family"mono" | "sans" | undefined`

The font family. _{^{(See font family tokens)}}

`fontStyle"normal" | "italic" | undefined`

Default:italic

The font style. _{^{(See MDN font-style)}}

`size"m" | "l" | "s" | "button" | "xl" | "xs" | "xxl" | "xxs" | "xxxl" | undefined`

The text size. _{^{(See font size tokens)}}

`text"product-code" | "product-h1" | "product-h2" | "product-h3" | "product-h4" | "product-label" | "product-label-secondary" | "product-link" | "product-link-secondary" | "product-p" | "product-p-active" | "product-p-secondary" | "product-ps" | "product-ps-active" | "product-pxs" | "product-pxs-active" | "product-pxs-secondary" | undefined`

A predefined typography style. _{^{(See text tokens)}}

`weight"bold" | "heavy" | "light" | "medium" | "regular" | "semibold" | undefined`

The font weight. _{^{(See font weight tokens)}}

Emphasis

Importing

Usage

API

PlumaEmphasis extends Text

color"critical" | "caution" | "success" | "bold" | "accent" | "active" | "base" | "black" | "code" | "information" | "invert" | "minimal" | "placeholder" | "subtle" | "white" | "disabled" | "inherit" | undefined

family"mono" | "sans" | undefined

fontStyle"normal" | "italic" | undefined

size"m" | "l" | "s" | "button" | "xl" | "xs" | "xxl" | "xxs" | "xxxl" | undefined

weight"bold" | "heavy" | "light" | "medium" | "regular" | "semibold" | undefined

On this page

`PlumaEmphasis` `extends Text`

`color"critical" | "caution" | "success" | "bold" | "accent" | "active" | "base" | "black" | "code" | "information" | "invert" | "minimal" | "placeholder" | "subtle" | "white" | "disabled" | "inherit" | undefined`

`family"mono" | "sans" | undefined`

`fontStyle"normal" | "italic" | undefined`

`size"m" | "l" | "s" | "button" | "xl" | "xs" | "xxl" | "xxs" | "xxxl" | undefined`

`weight"bold" | "heavy" | "light" | "medium" | "regular" | "semibold" | undefined`