Examples #
<div class="d-p-100 d-ba d-baw4 d-bar-300 d-bc-default d-bgc-moderate d-d-block"> <dt-stack direction="row" align="center" justify="center" class="d-fl1 d-as-stretch d-p-100 d-bgc-moderate-opaque d-bar-200 d-code--sm">d-d-block</dt-stack> </div> <div class="d-d-contents"> <dt-stack direction="row" align="center" justify="center" class="d-fl1 d-as-stretch d-p-100 d-bgc-moderate-opaque d-bar-200 d-code--sm">d-d-contents</dt-stack> </div> <dt-stack direction="row" gap="100" class="d-p-100 d-ba d-baw4 d-bar-300 d-bgc-moderate"> <div> <dt-stack direction="row" align="center" justify="center" class="d-fl1 d-as-stretch d-p-100 d-bgc-moderate-opaque d-bar-200 d-code--sm d-d-inline-block">d-d-inline-block</dt-stack> </div> <div> <dt-stack direction="row" align="center" justify="center" class="d-fl1 d-as-stretch d-p-100 d-bgc-moderate-opaque d-bar-200 d-code--sm d-d-inline-block">d-d-inline-block</dt-stack> </div> <div> <dt-stack direction="row" align="center" justify="center" class="d-fl1 d-as-stretch d-p-100 d-bgc-moderate-opaque d-bar-200 d-code--sm d-d-inline-block">d-d-inline-block</dt-stack> </div> </dt-stack> <dt-stack direction="row" gap="100" class="d-p-100 d-ba d-baw4 d-bar-300 d-bgc-moderate"> <div> <dt-stack direction="row" align="center" justify="center" class="d-fl1 d-as-stretch d-p-50 d-bgc-moderate-opaque d-bar-200 d-code--sm d-d-inline">d-d-inline</dt-stack> </div> <div> <dt-stack direction="row" align="center" justify="center" class="d-fl1 d-as-stretch d-p-50 d-bgc-moderate-opaque d-bar-200 d-code--sm d-d-inline">d-d-inline</dt-stack> </div> <div> <dt-stack direction="row" align="center" justify="center" class="d-fl1 d-as-stretch d-p-50 d-bgc-moderate-opaque d-bar-200 d-code--sm d-d-inline">d-d-inline</dt-stack> </div> </dt-stack>
Flex Display #
While d-d-flex and d-d-inline-flex technically are display utilities, use the DtStack component instead.
<dt-stack gap="200" direction="row" class="d-bgc-moderate-opaque d-bar-400" > <div class="d-bgc-moderate-opaque d-p-200 d-bar-400"> Stack item 1 </div> <div class="d-bgc-moderate-opaque d-p-200 d-bar-400"> Stack item 2 </div> <div class="d-bgc-moderate-opaque d-p-200 d-bar-400"> Stack item 3 </div> </dt-stack>
Classes #
Class
|
Output
|
|---|---|
d-d-unset | display: unset !important; |
d-d-block | display: block !important; |
d-d-contents | display: contents !important; |
d-d-flex | display: flex !important; |
d-d-grid | display: grid !important; |
d-d-inline | display: inline !important; |
d-d-inline-block | display: inline-block !important; |
d-d-inline-flex | display: inline-flex !important; |
d-d-inline-grid | display: inline-grid !important; |
d-d-none | display: none !important; |