Box

Usage & behaviour

Boxes come in two styles default and semantic

Default styles have the following behaviours:

  • Flat: Most basic implementation, no interaction whatsoever. Defines a flat elevation context wherein all buttons behave normally.
  • Flat bordered: same as above, except this variation also has a border.
  • Sunken: The "opposite" of flat, strictly referring to the color of its surface. Creates a sunken elevation context wherein certain button type have their background altered to stand out enough.
  • Raised: Usually highlights interaction. To be used when a box is nested in another box. Typically, this applies only to flat boxes and is used to distinguish nested boxes of the same type. The sunken variant has no interaction, thus is never used in that manner. Elevation context is flat.
  • Overlaid: Usually highlights interaction. To be used when the box is floating or hovering above other content (such as dropdown, modals, popovers etc). Elevation context is flat.

Data attribute alternative

Box styles can either be applied through classes or data attributes. In the event you'd need, for any given component, an elevation context stripped of any predefined spacings or interaction, use data attributes.

Data attribute usage

First you need to describe which type of wrapper you need to form an elevation context. For boxes, use : [data-scope-wrapper="box"].

The available types for now are:

  • [data-scope="flat"]
  • [data-scope="sunken"]
<!-- Flat -->
<div class="sds-box -boxInsetLg">
    <p>This is a short box text to illustrate how it changes based on the box's background.</p>
</div>


<!-- Flat Bordered -->
<div class="sds-box -boxInsetLg -boxBordered">
    <p>This is a short box text to illustrate how it changes based on the box's background.</p>
</div>


<!-- Sunken -->
<div class="sds-box -boxInsetLg -boxSunken">
    <p>This is a short box text to illustrate how it changes based on the box's background.</p>
</div>


<!-- Raised -->
<div class="sds-box -boxInsetLg sds-scaleInteraction">
    <p>This is a short box text to illustrate how it changes based on the box's background.</p>
</div>


<!-- Overlaid -->
<div class="sds-box -boxInsetLg sds-scaleInteraction">
    <p>This is a short box text to illustrate how it changes based on the box's background.</p>
</div>


<!-- Highlight -->
<div class="sds-box -boxInsetLg -boxHighlight">
    <p>This is a short box text to illustrate how it changes based on the box's background.</p>
</div>


<!-- Highlight Outline -->
<div class="sds-box -boxInsetLg -boxHighlight -boxOutline">
    <p>This is a short box text to illustrate how it changes based on the box's background.</p>
</div>


<!-- Warning -->
<div class="sds-box -boxInsetLg -boxWarning">
    <p>This is a short box text to illustrate how it changes based on the box's background.</p>
</div>


<!-- Warning Outline -->
<div class="sds-box -boxInsetLg -boxWarning -boxOutline">
    <p>This is a short box text to illustrate how it changes based on the box's background.</p>
</div>


<!-- Danger -->
<div class="sds-box -boxInsetLg -boxDanger">
    <p>This is a short box text to illustrate how it changes based on the box's background.</p>
</div>


<!-- Danger Outline -->
<div class="sds-box -boxInsetLg -boxDanger -boxOutline">
    <p>This is a short box text to illustrate how it changes based on the box's background.</p>
</div>


<!-- Success -->
<div class="sds-box -boxInsetLg -boxSuccess">
    <p>This is a short box text to illustrate how it changes based on the box's background.</p>
</div>


<!-- Success Outline -->
<div class="sds-box -boxInsetLg -boxSuccess -boxOutline">
    <p>This is a short box text to illustrate how it changes based on the box's background.</p>
</div>


<!-- Neutral Outline -->
<div class="sds-box -boxInsetLg -boxNeutral -boxOutline">
    <p>This is a short box text to illustrate how it changes based on the box's background.</p>
</div>


<div class="{{ namespace }}box{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	<p>This is a short box text to illustrate how it changes based on the box's background.</p>
</div>