Row
Horizontal layout with wrapping.
Basic
Tag 1
Tag 2
Tag 3
Tag 4
Base
| Class | Description |
|---|---|
.ui-row | Base class |
Size
| Class | Value |
|---|---|
.ui-row--xs | xs |
.ui-row--sm | sm |
.ui-row--md | md |
.ui-row--lg | lg |
.ui-row--start | start |
.ui-row--center | center |
.ui-row--end | end |
.ui-row--between | between |
Sizes
xs
xs
xs
lg
lg
lg
sm
sm
sm
<div class="ui-row ui-row--xs">
<div class="ui-bg-muted ui-p-1">xs</div>
<div class="ui-bg-muted ui-p-1">xs</div>
<div class="ui-bg-muted ui-p-1">xs</div>
</div>
<div class="ui-row ui-row--lg">
<div class="ui-bg-muted ui-p-1">lg</div>
<div class="ui-bg-muted ui-p-1">lg</div>
<div class="ui-bg-muted ui-p-1">lg</div>
</div>
<div class="ui-row ui-row--sm">
<div class="ui-bg-muted ui-p-1">sm</div>
<div class="ui-bg-muted ui-p-1">sm</div>
<div class="ui-bg-muted ui-p-1">sm</div>
</div>Alignment
Start
Center
End
Between A
Between B
<div class="ui-row ui-row--start ui-bg-muted">
<div class="ui-bg ui-p-2">Start</div>
</div>
<div class="ui-row ui-row--center ui-bg-muted">
<div class="ui-bg ui-p-2">Center</div>
</div>
<div class="ui-row ui-row--end ui-bg-muted">
<div class="ui-bg ui-p-2">End</div>
</div>
<div class="ui-row ui-row--between ui-bg-muted">
<div class="ui-bg ui-p-2">Between A</div>
<div class="ui-bg ui-p-2">Between B</div>
</div>