Em
TypographyBrick 0.1.12

Em

Em renders native stress emphasis while inheriting the surrounding Brick typography and foreground.

Live example

Built from the published package

Interactive

Review this before publishing the release.

Choose with confidence

Know when Em is the right part

Use it when

Use Em inside a sentence when stress emphasis changes meaning or spoken cadence.

Choose another path when

Do not use Em only to obtain italic paint, for important text that needs strong, or as a standalone typography owner.

Installation and imports

tsx
import { Em } from "@flowstack-ui/brick/em";
import "@flowstack-ui/brick/styles.css";

For modular CSS, load:

tsx
import "@flowstack-ui/brick/styles/core.css"; // once at the application root
import "@flowstack-ui/brick/styles/em.css";

Em is also available from @flowstack-ui/brick.

Quick start

tsx
<Text as="p">Review this <Em>before</Em> publishing.</Text>

Visual recipes and states

Em has one inherited recipe: surrounding family, size, weight, line height, tracking, and foreground with italic font style. It has no variants or states.

Examples

tsx
<Heading level={2}>Read this <Em>first</Em></Heading>
Public contract

API

Start with the public parts and root options below. Components with multiple parts separate each area into its own named subsection.

PropValuesDefault
slotstringem

EmProps forwards native HTMLElement attributes and requires children. Public exports are Em and EmProps. The host is intentionally fixed.

Shared responsibility

Accessibility

Native em conveys stress emphasis. Do not add a role or tab stop. Em remains selectable, copyable, and readable in forced colors.

Responsive behavior

Em stays in surrounding inline flow and introduces no breakpoint behavior.

Stable visual contract

Styling and tokens

Customization

Prefer the inherited default. A theme may set the documented variable for a deliberate typographic system decision.

Tokens and CSS hooks

Use .brick-em, data-slot, and --brick-em-font-style.

Advanced reference

Open these details only when you need to inspect DOM ownership, native forwarding, or lower-level composition.

Maintainer resources

Tests, playground evidence, source notes, and release history remain available without crowding the plug-and-play guide.