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

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.