An overlay visually separates foreground content from the background. It is commonly used to de-emphasize underlying content and direct attention to the active interface layer.
<div className="c-overlay relative">
<div className="c-overlay__inner relative">
<div className="c-overlay__header">
<div className="c-overlay__title">
<h1>Overlay</h1>
</div>
<button className="c-overlay__close">
<FontAwesomeIcon className="align-middle" icon={faTimes}/>
</button>
</div>
<div className="c-overlay__content">
<div className="c-box mb-0">
<div className="c-box__header">Box title</div>
<div className="p-5">This is an overlay</div>
</div>
</div>
</div>
</div>
|
Elements |
Classes |
|---|---|
|
Wrapper |
.c-overlay |
|
Inner container |
.c-overlay__inner |
|
Header |
.c-overlay__header |
|
Title |
.c-overlay__title |
|
Close button |
.c-overlay__close |
|
Content container |
.c-overlay__content |
|
Variants |
Classes |
|---|---|
|
Small |
.c-overlay__inner--sm |
|
Medium |
.c-overlay__inner--md |
|
Large |
.c-overlay__inner--lg |
|
Extra large |
.c-overlay__inner--xl |
|
2XL |
.c-overlay__inner--2xl |
|
Full |
.c-overlay__inner--full |