Component Test

Github
TextBoxLeft
TextBoxLeft is applied. 
                 

<div class="TestBoxLeft">TextBoxLeft</div>
TextBoxLeft is rendered.
TextBoxLeft
TextBox
TextBox is applied. 
                 

<div class="TestBox">TextBox</div>
TextBox is rendered.
TextBox
TestCanvas
TestCanvas is applied with --TestCanvas-min-width: 20rem; and with --TestCanvas-min-height: 10rem;. variable overrides. 
                 

<div class="TestCanvas 
            u-background-color-md-blue-grey-100">
</div>
TestCanvas is rendered.
u-flex
u-flex is applied. 
                 

<div class="u-flex">
  <div class="TestBoxLeft">TestBoxLeft</div>
  <div class="TestBox">TestBox</div>
</div>
Test boxes are rendered as flex items.
TestBoxLeft
TestBox
TestContainer--column
TestContainer--column and TestOutput--column is used to contain the test markup (Look at TestTemplate.njk source code to see markup). 
                 

<div class="u-flex">
  <div class="TestBoxLeft">TestBoxLeft</div>
  <div class="TestBox">TestBox</div>
</div>
Test containers are rendered in columns regardless of viewport size.
TestBoxLeft
TestBox