Text
EuiText is a generic catchall wrapper that will apply our standard typography styling and spacing to naked HTML. Because of its forced style it only accepts raw HTML and can not / should not be used to wrap 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.
This is Heading One
Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies a small unregarded yellow sun. When suddenly some wild JavaScript code appeared! const whoa = "!"
const completelyUnexpected = "the audacity!";That was close.
I've seen things you people wouldn'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.
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.
- List item one
- List item two
- Dolphins
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.
This is Heading Two
- Number one
- Number two
- Dolphins again
But the dog wasn’t lazy, it was just practicing mindfulness, so it had a greater sense of life-satisfaction than that fox with all its silly jumping.
And from the fox’s perspective, life was full of hoops to jump through, low-hanging fruit to jump for, and dead car batteries to jump-start.
This is Heading Three
So it thought the dog was making a poor life choice by focusing so much on mindfulness. What if its car broke down?
This is Heading Four
So it thought the dog was making a poor life choice by focusing so much on mindfulness. What if its car broke down?
This is Heading Five
So it thought the dog was making a poor life choice by focusing so much on mindfulness. What if its car broke down?
This is Heading Six
- The Elder Scrolls: Morrowind
- The opening music alone evokes such strong memories.
- TIE Fighter
- The sequel to XWING, join the dark side and fly for the Emporer.
- Quake 2
- The game that made me drop out of college.
- Name
- The Elder Scrolls: Morrowind
- Game style
- Open-world, fantasy, action role-playing
- Release date
- 2002
Text can come in various sizes
Using the size prop on EuiText you can get smaller sizes of text than the default.
This is Heading One
Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies a small unregarded yellow sun. When suddenly some wild JavaScript code appeared! const whoa = "!"
const completelyUnexpected = "the audacity!";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.
- List item one
- List item two
- Dolphins
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.
This is Heading Two
- Number one
- Number two
- Dolphins again
But the dog wasn’t lazy, it was just practicing mindfulness, so it had a greater sense of life-satisfaction than that fox with all its silly jumping.
And from the fox’s perspective, life was full of hoops to jump through, low-hanging fruit to jump for, and dead car batteries to jump-start.
This is Heading Three
So it thought the dog was making a poor life choice by focusing so much on mindfulness. What if its car broke down?
This is Heading Four
So it thought the dog was making a poor life choice by focusing so much on mindfulness. What if its car broke down?
This is Heading Five
So it thought the dog was making a poor life choice by focusing so much on mindfulness. What if its car broke down?
This is Heading Six
- The Elder Scrolls: Morrowind
- The opening music alone evokes such strong memories.
- TIE Fighter
- The sequel to XWING, join the dark side and fly for the Emporer.
- Quake 2
- The game that made me drop out of college.
This is Heading One
Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies a small unregarded yellow sun. When suddenly some wild JavaScript code appeared! const whoa = "!"
const completelyUnexpected = "the audacity!";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.
- List item one
- List item two
- Dolphins
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.
This is Heading Two
- Number one
- Number two
- Dolphins again
But the dog wasn’t lazy, it was just practicing mindfulness, so it had a greater sense of life-satisfaction than that fox with all its silly jumping.
And from the fox’s perspective, life was full of hoops to jump through, low-hanging fruit to jump for, and dead car batteries to jump-start.
This is Heading Three
So it thought the dog was making a poor life choice by focusing so much on mindfulness. What if its car broke down?
This is Heading Four
So it thought the dog was making a poor life choice by focusing so much on mindfulness. What if its car broke down?
This is Heading Five
So it thought the dog was making a poor life choice by focusing so much on mindfulness. What if its car broke down?
This is Heading Six
- The Elder Scrolls: Morrowind
- The opening music alone evokes such strong memories.
- TIE Fighter
- The sequel to XWING, join the dark side and fly for the Emporer.
- Quake 2
- The game that made me drop out of college.
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.
You use it on anything!
Default text color
Subdued text color
Secondary text color
Accent text color
Warning text color
Danger text color
Ghost text color is always white regardless of theme.
Works on EuiText as well.
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 properly color.
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.
Left aligned paragraph.
Center aligned paragraph.
Right aligned paragraph.
You can also pass alignment to EuiText directly with a prop
And in conjunction with coloring.