dialog
Dialog is a highly composable container component that comes with a variety of elements. The most basic implementation being dialog and a dialog__body element:
This is some dialog content...
<div class="dialog">
<div class="dialog__body">
...
</div>
</div>
dialog__close
Use the dialog__close element as a hook for providing users a way to dismiss dialogs arbitrarily. This can either be placed before the dialog__body element which will add appropriate padding, or inside the dialog__header element along side a dialog__title.
This is some dialog content...
<div class="dialog">
<button class="dialog__close icon-action">
<svg role="img" class="icon">
<use xlink:href="#x"></use>
</svg>
</button>
<div class="dialog__body">
...
</div>
</div>
dialog__title
Used for adding a title to the dialog.
Dialog Title
This is some dialog content...
<div class="dialog">
<button class="dialog__close">
...
</button>
<div class="dialog__body">
<h2 class="dialog__title">...</h2>
<p>...</p>
</div>
</div>
dialog__header + dialog__footer
Used to separate distinct dialog sections for headers and footers. Typically the dialog__header element will contain the dialog__title and dialog__close elements while the dialog__footer contains a dialogs call to actions. It’s also possible to include multiple dialog__body elements as needed.
Dialog Title
This is some dialog content...
<div class="dialog">
<div class="dialog__header">
...
</div>
<div class="dialog__body">
...
</div>
<div class="dialog__footer">
...
</div>
</div>
Sass Variables
| Variable | Default | Description |
|---|---|---|
$prefix-block | null | String to prefix blocks with. |
$prefix-element | "__" | String to prefix elements with. |
$prefix-modifier | "_" | String to prefix modifiers with. |
$prefix-modifier-value | "_" | String to prefix modifier values with. |
$z-index | 500 | Sets the z-index property. |
$padding | 1em | Sets the padding property. |
$spacing | 0.5em | Sets the horizontal spacing between elements in the dialog__header and dialog__footer elements. |
$background | core.$white | Sets the background property. |
$border | null | Sets the border property. |
$sep-border | core.$border | Sets the border property that separates dialog elements. |
$border-radius | core.$border-radius | Sets the border-radius property. |
$box-shadow | core.$box-shadow-3 | Sets the box-shadow property. |
$color | null | Sets the color property. |
$title-font-size | core.$font-size-lg | Sets the font-size property on the dialog__title element. |
$title-line-height | core.$line-height-lg | Sets the line-height property on the dialog__title element. |
$title-font-weight | core.$font-weight-semi-bold | Sets the font-weight property on the dialog__title element. |