CenterBaseline

Importing

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

Usage

The CenterBaseline component can be used to align content (like icons or images) vertically with text, especially when a center-aligned flex container isn't possible. The component creates a flex container, which includes a pseudo element containing a hidden zero-width space. This ensures the element has a baseline that is consistent with the baseline of text content.

The example below shows a comparison between a plain image, and one using the CenterBaseline component.

Utilities

To allow building custom components with the same behavior as CenterBaseline, we include additional utilities:

CSS

The component's style export

import { PlumaCenterBaseline } from '@customerio/pluma-components/css/components';

is an object which includes:

• classNames - an object with keys containing class names
  • centerBaseline - the main class, which applies the flex and align style
  • centerBaselineInline - to be used in addition to the main class, applies an inline-flex instead
  • centerBaselineBefore - this class contains a the ::before pseudo-element definition for adding the hidden space
• rawStyles - an object with more utilities
  • centerBaselinePseudo - a plain object that contains the styles applied in the centerBaselineBefore class, which can be used to construct custom vanilla-extract styles

Sprinkles

Sprinkles for applying the same styles are also included:

• centerBaseline - which accepts the following values:
  • true/'true' - applies the flex container style, and the pseudo element style
  • 'inline' - applies the inline-flex style, and the pseudo element style
• centerBaselineBefore - can be used to only apply the pseudo element (::before) style on particular elements