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.

Also see the Inline Form pattern docs for how to use this concept to create well aligned rows of form controls.

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

React

React

Ember

Ember

Lorem ipsum dolor sit amet

Lorem ipsum

dolor sit amet

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

export default function Example() {
	return <>
		<Text as="div">
			Lorem ipsum{' '}
			<Image 
				src="https://images.unsplash.com/photo-1605460375648-278bcbd579a6?q=80&w=300"
				alt="Example image"
				size="icon-v2-md"
				withBoundingBox
			/>{' '}
			dolor sit amet
		</Text>

		<Text as="div" mt="200">
			Lorem ipsum{' '}
			<CenterBaseline isInline={true}>
				<Image 
					src="https://images.unsplash.com/photo-1605460375648-278bcbd579a6?q=80&w=300"
					alt="Example image"
					size="icon-v2-md"
					withBoundingBox
				/>
			</CenterBaseline>{' '}
			dolor sit amet
		</Text>
	</>;
}

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