AlignChildToText

Component that uses a zero-width space to vertically align a child element such as an icon with a line of text. This is especially useful when text needs to wrap.

View in StorybookView in Playroom

Quick Start

Installation
npm install @adaptavant/eds-core
Import
import { AlignChildToText } from '@adaptavant/eds-core';

Icon inside text​

​
Anywhere is the freedom to boldly go... well,
Anywhere; untethered from geographic constraints and free to think outside the cubicle.
<Track
  className="p-4"
  railStart={
    <AlignChildToText>
      <MapPinIcon size="32" />
    </AlignChildToText>
  }
  verticalAlign="top"
>
  Anywhere is the freedom to boldly go... well, <br />
  Anywhere; untethered from geographic constraints and free to think outside the
  cubicle.
</Track>
View in Playroom

API Reference​

AlignChildToText

PropDefaultDescription
as?'span'React.ElementType
The element type to render.
children_React.ReactNode
The content that aligns with text.
className?''string
CSS class names to apply to the root element.
style?{}React.CSSProperties
Inline styles to apply to the root element.

Style API​

Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.

Please refer to the Style API documentation for more insights.