At times, you'll need to determine the overflow behavior of an element. Atlas provides several classes to do this.
| || || |
As an example we'll use a parent element's border radius in combination with
.overflow-hidden to ensure a child element's background is clipped. This is primarily with images deeply nested in content, but here we'll use a background color for ease.
This box's borders are rounded because we gave the parent container overflow-hidden
<div class="overflow-hidden border-radius-lg"> <div class="background-color-primary padding-xl"> <p class="color-primary-invert font-size-xl"> This box's borders are rounded because we gave the parent container overflow-hidden </p> </div> </div>