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 PlayroomAPI Reference

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.