CSS utility classes

The following CSS-only classes are provided as helper utilities. They are useful for making micro-adjustments to existing React components.

Scroll utilities have moved

For overflow and scrolling specific utilities, go to

the Scroll documentation page.

Text utilities have moved

For text and typography specific utilities, go to the Text documentation page.

Responsive utilities have moved

For responsive specific utilities, go to the Breakpoint utilities page.

Display

eui-displayBlock className

Changes the element's display property to display: block;

Displaying block

✄𐘗
tsx code block:
✄𐘗<span className="eui-displayBlock">
/* Your content */
</span>

eui-displayInline className

Changes the element's display property to display: inline;

Displaying inline

✄𐘗
tsx code block:
✄𐘗<div className="eui-displayInline">
/* Your content */
</div>

eui-displayInlineBlock className

Changes the element's display property to display: inline-block;

Displaying inline block

✄𐘗
tsx code block:
✄𐘗<span className="eui-displayInlineBlock">
/* Your content */
</span>

eui-fullWidth className

Changes the element's display property to display: inline-block; and adds width: 100%;

Displaying full width

✄𐘗
tsx code block:
✄𐘗<span className="eui-fullWidth">
/* Your content */
</span>

Vertical alignment

eui-alignTop className

Changes the element's vertical alignment property to vertical-align: top;

Icon is aligned to the top of the text

✄𐘗
tsx code block:
✄𐘗<EuiIcon className="eui-alignTop" type="logoElasticStack" />

eui-alignMiddle className

Changes the element's vertical alignment property to vertical-align: middle;

Icon is aligned to the middle of the text

✄𐘗
tsx code block:
✄𐘗<EuiIcon className="eui-alignMiddle" type="logoElasticStack" />

eui-alignBottom className

Changes the element's vertical alignment property to vertical-align: bottom;

Icon is aligned to the bottom of the text

✄𐘗
tsx code block:
✄𐘗<EuiIcon className="eui-alignBottom" type="logoElasticStack" />

eui-alignBaseline className

Changes the element's vertical alignment property to vertical-align: baseline;

Icon is aligned to the baseline of the text

✄𐘗
tsx code block:
✄𐘗<EuiIcon className="eui-alignBaseline" type="logoElasticStack" />