Components

Axes

Drafting arrows name the main and cross axes around a subject. They sit outside the layout they explain.

Main and cross axis

Main axis
Cross axis
01
02
03

With a measure and a legend

Anatomy of a layout

Main axis
Cross axis
Container Measuring…
01
02
03
  • Subject
  • Comparison
  • Context

Used on the Layout System guide.

Usage and interface

DemoAxes renders div.ui-axes: a ui-axes-inline arrow along the top, a ui-axes-block arrow down the start edge and the subject in ui-axes-content. inline and block replace the default “Main axis” and “Cross axis” names.

<DemoAxes inline="Inline axis" block="Block axis">  <DemoSurface className="flex gap-sm p-md">…</DemoSurface></DemoAxes>
<div class="ui-axes">  <div class="ui-axes-inline"><span>Main axis</span><span class="ui-axes-rule"></span></div>  <div class="ui-axes-block"><span>Cross axis</span><span class="ui-axes-rule"></span></div>  <div class="ui-axes-content">…</div></div>