<div class="box box--highlight box--small u-width-1-of-1">This element will occupy the whole width of its parent.</div>
<div class="box box--highlight box--small u-width-3-of-4">This element will occupy three quarters of the width of its parent.</div>
<div class="box box--highlight box--small u-width-2-of-3">This element will occupy two thirds of the width of its parent.</div>
<div class="box box--highlight box--small u-width-1-of-2">This element will occupy half the width of its parent.</div>
<div class="box box--highlight box--small u-width-1-of-3">This element will occupy one third of the width of its parent.</div>
<div class="box box--highlight box--small u-width-1-of-4">This element will occupy one quarter of the width of its parent.</div>
<div class="box box--highlight box--small u-width-1-of-2 u-width-1-of-1-from-small }}">This element will occupy the whole width of its parent from the 'small' breakpoint.</div>
<div class="box box--highlight box--small u-width-1-of-1 u-width-3-of-4-from-small }}">This element will occupy three quarters of the width of its parent from the 'small' breakpoint.</div>
<div class="box box--highlight box--small u-width-1-of-1 u-width-2-of-3-from-small }}">This element will occupy two thirds of the width of its parent from the 'small' breakpoint.</div>
<div class="box box--highlight box--small u-width-1-of-1 u-width-1-of-2-from-small }}">This element will occupy half the width of its parent from the 'small' breakpoint.</div>
<div class="box box--highlight box--small u-width-1-of-1 u-width-1-of-3-from-small }}">This element will occupy one third of the width of its parent from the 'small' breakpoint.</div>
<div class="box box--highlight box--small u-width-1-of-1 u-width-1-of-4-from-small }}">This element will occupy one quarter of the width of its parent from the 'small' breakpoint.</div>
<div class="box box--highlight box--small u-width-1-of-2 u-width-1-of-1-from-medium }}">This element will occupy the whole width of its parent from the 'medium' breakpoint.</div>
<div class="box box--highlight box--small u-width-1-of-1 u-width-3-of-4-from-medium }}">This element will occupy three quarters of the width of its parent from the 'medium' breakpoint.</div>
<div class="box box--highlight box--small u-width-1-of-1 u-width-2-of-3-from-medium }}">This element will occupy two thirds of the width of its parent from the 'medium' breakpoint.</div>
<div class="box box--highlight box--small u-width-1-of-1 u-width-1-of-2-from-medium }}">This element will occupy half the width of its parent from the 'medium' breakpoint.</div>
<div class="box box--highlight box--small u-width-1-of-1 u-width-1-of-3-from-medium }}">This element will occupy one third of the width of its parent from the 'medium' breakpoint.</div>
<div class="box box--highlight box--small u-width-1-of-1 u-width-1-of-4-from-medium }}">This element will occupy one quarter of the width of its parent from the 'medium' breakpoint.</div>
<div class="box box--highlight box--small u-width-1-of-2 u-width-1-of-1-from-large }}">This element will occupy the whole width of its parent from the 'large' breakpoint.</div>
<div class="box box--highlight box--small u-width-1-of-1 u-width-3-of-4-from-large }}">This element will occupy three quarters of the width of its parent from the 'large' breakpoint.</div>
<div class="box box--highlight box--small u-width-1-of-1 u-width-2-of-3-from-large }}">This element will occupy two thirds of the width of its parent from the 'large' breakpoint.</div>
<div class="box box--highlight box--small u-width-1-of-1 u-width-1-of-2-from-large }}">This element will occupy half the width of its parent from the 'large' breakpoint.</div>
<div class="box box--highlight box--small u-width-1-of-1 u-width-1-of-3-from-large }}">This element will occupy one third of the width of its parent from the 'large' breakpoint.</div>
<div class="box box--highlight box--small u-width-1-of-1 u-width-1-of-4-from-large }}">This element will occupy one quarter of the width of its parent from the 'large' breakpoint.</div>
<div class="box box--highlight box--small u-width-1-of-2 u-width-1-of-1-from-x-large }}">This element will occupy the whole width of its parent from the 'x-large' breakpoint.</div>
<div class="box box--highlight box--small u-width-1-of-1 u-width-3-of-4-from-x-large }}">This element will occupy three quarters of the width of its parent from the 'x-large' breakpoint.</div>
<div class="box box--highlight box--small u-width-1-of-1 u-width-2-of-3-from-x-large }}">This element will occupy two thirds of the width of its parent from the 'x-large' breakpoint.</div>
<div class="box box--highlight box--small u-width-1-of-1 u-width-1-of-2-from-x-large }}">This element will occupy half the width of its parent from the 'x-large' breakpoint.</div>
<div class="box box--highlight box--small u-width-1-of-1 u-width-1-of-3-from-x-large }}">This element will occupy one third of the width of its parent from the 'x-large' breakpoint.</div>
<div class="box box--highlight box--small u-width-1-of-1 u-width-1-of-4-from-x-large }}">This element will occupy one quarter of the width of its parent from the 'x-large' breakpoint.</div>
<div class="box box--highlight box--small u-width-1-of-2 u-width-1-of-1-from-complex-layout }}">This element will occupy the whole width of its parent from the 'complex-layout' breakpoint.</div>
<div class="box box--highlight box--small u-width-1-of-1 u-width-3-of-4-from-complex-layout }}">This element will occupy three quarters of the width of its parent from the 'complex-layout' breakpoint.</div>
<div class="box box--highlight box--small u-width-1-of-1 u-width-2-of-3-from-complex-layout }}">This element will occupy two thirds of the width of its parent from the 'complex-layout' breakpoint.</div>
<div class="box box--highlight box--small u-width-1-of-1 u-width-1-of-2-from-complex-layout }}">This element will occupy half the width of its parent from the 'complex-layout' breakpoint.</div>
<div class="box box--highlight box--small u-width-1-of-1 u-width-1-of-3-from-complex-layout }}">This element will occupy one third of the width of its parent from the 'complex-layout' breakpoint.</div>
<div class="box box--highlight box--small u-width-1-of-1 u-width-1-of-4-from-complex-layout }}">This element will occupy one quarter of the width of its parent from the 'complex-layout' breakpoint.</div>
There are no notes for this item.