text.mdx

keywords	EuiText

Text

EuiText is a generic catchall wrapper that will apply our standard typography styling and spacing to naked HTML. Because of its forced styles, it only accepts raw XHTML.

:::warning

• All your XHTML elements should be direct descendants of EuiText. You should avoid wrapping them in a div or span. This will ensure styles are applied correctly.
• Avoid nesting React components which would break their styling. :::

EuiText can ensure proper line-length for readability by setting a max-width on the entire component. To add the max-width setting, set grow=false.

import React from 'react';
import { EuiText, EuiHorizontalRule } from '@elastic/eui';

export default () => (
  <div>
    <EuiText grow={false}>
      <h1>This is Heading One</h1>
      <p>
        Far out in the uncharted backwaters of the <a href="#">unfashionable</a>{' '}
        end of the western spiral arm of the Galaxy lies a small unregarded
        yellow sun. When suddenly some wild JavaScript code appeared!{' '}
        <code>const whoa = &quot;!&quot;</code>
      </p>

      <pre>
        <code>const completelyUnexpected = &quot;the audacity!&quot;;</code>
      </pre>

      <p>That was close.</p>

      <blockquote>
        <p>
          I&apos;ve seen things you people wouldn&apos;t believe. Attack ships
          on fire off the shoulder of Orion. I watched C-beams glitter in the
          dark near the Tannhäuser Gate. All those moments will be lost in time,
          like tears in rain. Time to die.
        </p>
      </blockquote>

      <p>
        Orbiting this at a distance of roughly ninety-two million miles is an
        utterly insignificant little blue green planet whose ape- descended life
        forms are so amazingly primitive that they still think digital watches
        are a pretty neat idea.
      </p>

      <ul>
        <li>List item one</li>
        <li>List item two</li>
        <li>Dolphins</li>
      </ul>

      <p>
        This planet has - or rather had - a problem, which was this: most of the
        people living on it were unhappy for pretty much of the time. Many
        solutions were suggested for this problem, but most of these were
        largely concerned with the movements of small green pieces of paper,
        which is odd because on the whole it was not the small green pieces of
        paper that were unhappy.
      </p>

      <h2>This is Heading Two</h2>

      <ol>
        <li>Number one</li>
        <li>Number two</li>
        <li>Dolphins again</li>
      </ol>

      <p>
        But the dog wasn&rsquo;t lazy, it was just practicing mindfulness, so it
        had a greater sense of life-satisfaction than that fox with all its
        silly jumping.
      </p>

      <p>
        And from the fox&rsquo;s perspective, life was full of hoops to jump{' '}
        <em>through</em>, low-hanging fruit to jump <em>for</em>, and dead car
        batteries to jump-<em>start</em>.
      </p>

      <h3>This is Heading Three</h3>

      <p>
        So it thought the dog was making a poor life choice by focusing so much
        on mindfulness. What if its car broke down?
      </p>

      <h4>This is Heading Four</h4>

      <ol>
        <li>
          C
          <ol>
            <li>Procedural</li>
            <li>Structured</li>
            <li>Low-level</li>
          </ol>
        </li>
        <li>
          Java
          <ol>
            <li>Object-oriented</li>
            <li>Class-based</li>
            <li>Compiled</li>
          </ol>
        </li>
        <li>
          Python
          <ol>
            <li>Interpreted</li>
            <li>High-level</li>
            <li>Scripting</li>
            <li>
              Object-oriented
              <ol>
                <li>Dynamic typing</li>
                <li>Garbage collection</li>
              </ol>
            </li>
            <li>Functional</li>
          </ol>
        </li>
      </ol>

      <h5>This is Heading Five</h5>

      <p>
        <small>
          So it thought the dog was making a poor life choice by focusing so
          much on mindfulness. What if its car broke down?
        </small>
      </p>

      <h6>This is Heading Six</h6>

      <ul>
        <li>
          Programming Languages
          <ul>
            <li>
              Backend
              <ul>
                <li>Java</li>
                <li>Python</li>
                <li>PHP</li>
              </ul>
            </li>
            <li>
              Frontend
              <ul>
                <li>
                  JavaScript
                  <ul>
                    <li>React.js</li>
                    <li>Angular.js</li>
                    <li>Vue.js</li>
                  </ul>
                </li>
                <li>
                  CSS
                  <ul>
                    <li>SASS</li>
                    <li>Less</li>
                    <li>Stylus</li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>

      <EuiHorizontalRule />

      <dl>
        <dt>The Elder Scrolls: Morrowind</dt>
        <dd>The opening music alone evokes such strong memories.</dd>
        <dt>TIE Fighter</dt>
        <dd>
          The sequel to XWING, join the dark side and fly for the Emperor.
        </dd>
        <dt>Quake 2</dt>
        <dd>The game that made me drop out of college.</dd>
      </dl>

      <EuiHorizontalRule />

      <dl className="eui-definitionListReverse">
        <dt>Name</dt>
        <dd>The Elder Scrolls: Morrowind</dd>
        <dt>Game style</dt>
        <dd>Open-world, fantasy, action role-playing</dd>
        <dt>Release date</dt>
        <dd>2002</dd>
      </dl>

      <p>
        Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text (Windows).
      </p>

      <p>
        Press <kbd>Cmd</kbd> + <kbd>C</kbd> to copy text (Mac OS).
      </p>
    </EuiText>
  </div>
);

Text can come in various sizes

Using the size prop on EuiText you can get smaller sizes of text than the default. This demo compares the scaling for all sizes. The goal is that the every line-height lands on the 4px baseline grid.

import React, { useState, useContext } from 'react';
import { css } from '@emotion/react';
import {
  EuiText,
  EuiFlexGroup,
  EuiFlexItem,
  EuiHorizontalRule,
  EuiButtonGroup,
  useEuiTheme,
} from '@elastic/eui';

const text = [
  <h1 key={0}>This is Heading One</h1>,

  <p key={1}>
    Far out in the uncharted backwaters of the unfashionable end of the western
    spiral arm of the Galaxy lies a small unregarded yellow sun.
  </p>,

  <pre key={0.25}>
    <code>const completelyUnexpected = &quot;the audacity!&quot;;</code>
  </pre>,

  <h2 key={0.5}>This is Heading Two</h2>,

  <p key={2}>
    Orbiting this at a distance of roughly ninety-two million miles is an
    utterly insignificant little blue green planet whose ape- descended life
    forms are so amazingly primitive that they still think digital watches are a
    pretty neat idea.
  </p>,

  <ul key={3}>
    <li>List item one</li>
    <li>List item two</li>
    <li>Dolphins</li>
  </ul>,

  <p key={4}>
    This planet has - or rather had - a problem, which was this: most of the
    people living on it were unhappy for pretty much of the time. Many solutions
    were suggested for this problem, but most of these were largely concerned
    with the movements of small green pieces of paper, which is odd because on
    the whole it was not the small green pieces of paper that were unhappy.
  </p>,

  <h3 key={5}>This is Heading Three</h3>,

  <ol key={6}>
    <li>Number one</li>
    <li>Number two</li>
    <li>Dolphins again</li>
  </ol>,

  <p key={7}>
    But the dog wasn&rsquo;t lazy, it was just practicing mindfulness, so it had
    a greater sense of life-satisfaction than that fox with all its silly
    jumping.
  </p>,

  <p key={8}>
    And from the fox&rsquo;s perspective, life was full of hoops to jump{' '}
    <em>through</em>, low-hanging fruit to jump <em>for</em>, and dead car
    batteries to jump-<em>start</em>.
  </p>,

  <h4 key={9}>This is Heading Four</h4>,

  <p key={10}>
    So it thought the dog was making a poor life choice by focusing so much on
    mindfulness. What if its car broke down?
  </p>,

  <h5 key={11}>This is Heading Five</h5>,

  <p key={12}>
    <small>
      So it thought the dog was making a poor life choice by focusing so much on
      mindfulness. What if its car broke down?
    </small>
  </p>,

  <h6 key={13}>This is Heading Six</h6>,
];

export default () => {
  const { euiTheme } = useEuiTheme();

  const textLinesCss = () => css`
    background-image: linear-gradient(${euiTheme.focus.backgroundColor} 1px, transparent 1px);
    background-size: 100% 4px;
    background-position-y: -1px;

    & > * {
      background-color: ${euiTheme.colors.highlight};
    }
  `;

  const textSizeArray = ['xs', 's', 'm'];
  const textSizeNamesArray = ['Extra small', 'Small', 'Medium'];

  const textSizeOptions = textSizeArray.map((name, i) => {
    return {
      value: name,
      label: textSizeNamesArray[i],
    };
  });

  const firstOptions = textSizeOptions.map((option) => {
    return {
      id: `first${option.value}`,
      ...option,
    };
  });

  const secondOptions = textSizeOptions.map((option) => {
    return {
      id: `second${option.value}`,
      ...option,
    };
  });

  const [firstIdSelected, setFirstIdSelected] = useState('firsts');
  const [secondIdSelected, setSecondIdSelected] = useState('secondxs');
  const [firstSize, setFirstSize] = useState('s');
  const [secondSize, setSecondSize] = useState('xs');

  return (
    <>
      <EuiFlexGroup>
        <EuiFlexItem>
          <EuiButtonGroup
            isFullWidth
            legend={'First text size'}
            name={'first'}
            idSelected={firstIdSelected}
            onChange={(optionId) => {
              setFirstIdSelected(optionId);
              setFirstSize(
                firstOptions.find(({ id }) => id === optionId).value
              );
            }}
            options={firstOptions}
          />
          <EuiHorizontalRule />
          <EuiText css={textLinesCss} size={firstSize}>
            {text}
          </EuiText>
        </EuiFlexItem>
        <EuiFlexItem>
          <EuiButtonGroup
            isFullWidth
            legend={'Second text size'}
            name={'second'}
            idSelected={secondIdSelected}
            onChange={(optionId) => {
              setSecondIdSelected(optionId);
              setSecondSize(
                secondOptions.find(({ id }) => id === optionId).value
              );
            }}
            options={secondOptions}
          />
          <EuiHorizontalRule />
          <EuiText css={textLinesCss} size={secondSize}>
            {text}
          </EuiText>
        </EuiFlexItem>
      </EuiFlexGroup>
    </>
  );
};

Coloring text

There are two ways to color text. Either individually by applying EuiTextColor on individual text objects, or by passing the color prop directly on EuiText for a blanket approach across the entirety of your text.

import React from 'react';
import { EuiSpacer, EuiText, EuiTextColor, EuiTitle } from '@elastic/eui';

export default () => (
  <div>
    <EuiTitle>
      <h2>
        <EuiTextColor color="default">You </EuiTextColor>
        <EuiTextColor color="success">use </EuiTextColor>
        <EuiTextColor color="accent">it </EuiTextColor>
        <EuiTextColor color="warning">on </EuiTextColor>
        <EuiTextColor color="danger">anything!</EuiTextColor>
      </h2>
    </EuiTitle>

    <EuiSpacer size="l" />

    <EuiText>
      <p>
        <EuiTextColor color="default">Default text color</EuiTextColor>
      </p>
      <p>
        <EuiTextColor color="subdued">Subdued text color</EuiTextColor>
      </p>
      <p>
        <EuiTextColor color="success">Success text color</EuiTextColor>
      </p>
      <p>
        <EuiTextColor color="accent">Accent text color</EuiTextColor>
      </p>
      <p>
        <EuiTextColor color="warning">Warning text color</EuiTextColor>
      </p>
      <p>
        <EuiTextColor color="danger">Danger text color</EuiTextColor>
      </p>
      <p>
        <EuiTextColor color="#c561dc">Custom text color</EuiTextColor>
      </p>
      <p>
        <span style={{ background: '#222' }}>
          <EuiTextColor color="ghost">
            Ghost text color is always white regardless of theme.
          </EuiTextColor>
        </span>
      </p>
    </EuiText>

    <EuiSpacer />

    <EuiText color="danger">
      <h2>Works on EuiText as well.</h2>
      <p>
        Sometimes you need to color entire blocks of text, no matter what is in
        them. You can always apply color directly (versus using the separated
        component) to make it easy. Links should still{' '}
        <a href="#">properly color</a>.
      </p>
    </EuiText>
  </div>
);

Alignment

There are two ways to align text. Either individually by applying EuiTextAlign on individual text objects, or by passing the textAlign prop directly on EuiText for a blanket approach across the entirety of your text.

import React from 'react';
import { EuiText, EuiTextAlign, EuiSpacer } from '@elastic/eui';

export default () => (
  <div>
    <EuiText>
      <EuiTextAlign textAlign="left">
        <p>Left aligned paragraph.</p>
      </EuiTextAlign>
      <EuiTextAlign textAlign="center">
        <p>Center aligned paragraph.</p>
      </EuiTextAlign>
      <EuiTextAlign textAlign="right">
        <p>Right aligned paragraph.</p>
      </EuiTextAlign>
    </EuiText>
    <EuiSpacer />
    <EuiText textAlign="center">
      <p>
        You can also pass alignment to <strong>EuiText</strong> directly with a
        prop
      </p>
    </EuiText>
    <EuiText textAlign="center" color="success">
      <p>And in conjunction with coloring.</p>
    </EuiText>
  </div>
);

Props

import docgen from '@elastic/eui-docgen/dist/components/text';