webawesome/docs/_includes/visual-tests/size.njk

<h3>Button</h3>

<div class="table-scroll">
<table>
  <thead>
    <th></th>
    <th><code>size=""</code></th>
    <th><code>.wa-size-[s|m|l]</code></th>
  </thead>
  <tbody>
    <tr>
      <th><code>small</code>/<code>s</code></th>
      <td>
        <wa-button size="small">Button</wa-button>
      </td>
      <td>
        <wa-button class="wa-size-s">Button</wa-button>
      </td>
    </tr>
    <tr>
      <th><code>medium</code>/<code>m</code></th>
      <td>
        <wa-button size="medium">Button</wa-button>
      </td>
      <td>
        <wa-button class="wa-size-m">Button</wa-button>
      </td>
    </tr>
    <tr>
      <th><code>large</code>/<code>l</code></th>
      <td>
        <wa-button size="large">Button</wa-button>
      </td>
      <td>
        <wa-button class="wa-size-l">Button</wa-button>
      </td>
    </tr>
  </tbody>
</table>
</div>
<wa-divider></wa-divider>

<h3>Button Group</h3>

<div class="table-scroll">
<table>
  <thead>
    <th></th>
    <th><code>size=""</code></th>
    <th><code>.wa-size-[s|m|l]</code></th>
  </thead>
  <tbody>
    <tr>
      <th><code>small</code>/<code>s</code></th>
      <td>
        <wa-button-group orientation="horizontal" size="small">
          <wa-button value="1">Button L</wa-button>
          <wa-button value="2">Button R</wa-button>
        </wa-button-group>
      </td>
      <td>
        <wa-button-group orientation="horizontal" class="wa-size-s">
          <wa-button value="1">Button L</wa-button>
          <wa-button value="2">Button R</wa-button>
        </wa-button-group>
      </td>
    </tr>
    <tr>
      <th><code>medium</code>/<code>m</code></th>
      <td>
        <wa-button-group orientation="horizontal" size="medium">
          <wa-button value="1">Button L</wa-button>
          <wa-button value="2">Button R</wa-button>
        </wa-button-group>
      </td>
      <td>
        <wa-button-group orientation="horizontal" class="wa-size-m">
          <wa-button value="1">Button L</wa-button>
          <wa-button value="2">Button R</wa-button>
        </wa-button-group>
      </td>
    </tr>
    <tr>
      <th><code>large</code>/<code>l</code></th>
      <td>
        <wa-button-group orientation="horizontal" size="large">
          <wa-button value="1">Button L</wa-button>
          <wa-button value="2">Button R</wa-button>
        </wa-button-group>
      </td>
      <td>
        <wa-button-group orientation="horizontal" class="wa-size-l">
          <wa-button value="1">Button L</wa-button>
          <wa-button value="2">Button R</wa-button>
        </wa-button-group>
      </td>
    </tr>
  </tbody>
</table>
</div>
<wa-divider></wa-divider>

<h3>Callout</h3>

<div class="table-scroll">
<table>
  <thead>
    <th></th>
    <th><code>size=""</code></th>
    <th><code>.wa-size-[s|m|l]</code></th>
  </thead>
  <tbody>
    <tr>
      <th><code>small</code>/<code>s</code></th>
      <td>
        <wa-callout size="small">
          <wa-icon slot="icon" name="circle-star"></wa-icon>
          Callout
        </wa-callout>
      </td>
      <td>
        <wa-callout class="wa-size-s">
          <wa-icon slot="icon" name="circle-star"></wa-icon>
          Callout
        </wa-callout>
      </td>
    </tr>
    <tr>
      <th><code>medium</code>/<code>m</code></th>
      <td>
        <wa-callout size="medium">
          <wa-icon slot="icon" name="circle-star"></wa-icon>
          Callout
        </wa-callout>
      </td>
      <td>
        <wa-callout class="wa-size-m">
          <wa-icon slot="icon" name="circle-star"></wa-icon>
          Callout
        </wa-callout>
      </td>
    </tr>
    <tr>
      <th><code>large</code>/<code>l</code></th>
      <td>
        <wa-callout size="large">
          <wa-icon slot="icon" name="circle-star"></wa-icon>
          Callout
        </wa-callout>
      </td>
      <td>
        <wa-callout class="wa-size-l">
          <wa-icon slot="icon" name="circle-star"></wa-icon>
          Callout
        </wa-callout>
      </td>
    </tr>
  </tbody>
</table>
</div>
<wa-divider></wa-divider>

<h3>Card</h3>

<div class="table-scroll">
<table>
  <thead>
    <th></th>
    <th><code>size=""</code></th>
    <th><code>.wa-size-[s|m|l]</code></th>
  </thead>
  <tbody>
    <tr>
      <th><code>small</code>/<code>s</code></th>
      <td>
        <wa-card size="small">
          Card
        </wa-card>
      </td>
      <td>
        <wa-card class="wa-size-s">
          Card
        </wa-card>
      </td>
    </tr>
    <tr>
      <th><code>medium</code>/<code>m</code></th>
      <td>
        <wa-card size="medium">
          Card
        </wa-card>
      </td>
      <td>
        <wa-card class="wa-size-m">
          Card
        </wa-card>
      </td>
    </tr>
    <tr>
      <th><code>large</code>/<code>l</code></th>
      <td>
        <wa-card size="large">
          Card
        </wa-card>
      </td>
      <td>
        <wa-card class="wa-size-l">
          Card
        </wa-card>
      </td>
    </tr>
  </tbody>
</table>
</div>
<wa-divider></wa-divider>

<h3>Checkbox</h3>

<div class="table-scroll">
<table>
  <thead>
    <th></th>
    <th><code>size=""</code></th>
    <th><code>.wa-size-[s|m|l]</code></th>
  </thead>
  <tbody>
    <tr>
      <th><code>small</code>/<code>s</code></th>
      <td>
        <wa-checkbox hint="Hint" size="small">Checkbox</wa-checkbox>
      </td>
      <td>
        <wa-checkbox hint="Hint" class="wa-size-s">Checkbox</wa-checkbox>
      </td>
    </tr>
    <tr>
      <th><code>medium</code>/<code>m</code></th>
      <td>
        <wa-checkbox hint="Hint" size="medium">Checkbox</wa-checkbox>
      </td>
      <td>
        <wa-checkbox hint="Hint" class="wa-size-m">Checkbox</wa-checkbox>
      </td>
    </tr>
    <tr>
      <th><code>large</code>/<code>l</code></th>
      <td>
        <wa-checkbox hint="Hint" size="large">Checkbox</wa-checkbox>
      </td>
      <td>
        <wa-checkbox hint="Hint" class="wa-size-l">Checkbox</wa-checkbox>
      </td>
    </tr>
  </tbody>
</table>
</div>
<wa-divider></wa-divider>

<h3>Color Picker</h3>

<div class="table-scroll">
<table>
  <thead>
    <th></th>
    <th><code>size=""</code></th>
    <th><code>.wa-size-[s|m|l]</code></th>
  </thead>
  <tbody>
    <tr>
      <th><code>small</code>/<code>s</code></th>
      <td>
        <wa-color-picker size="small" label="Color Picker" hint="Hint"></wa-color-picker>
      </td>
      <td>
        <wa-color-picker class="wa-size-s" label="Color Picker" hint="Hint"></wa-color-picker>
      </td>
    </tr>
    <tr>
      <th><code>medium</code>/<code>m</code></th>
      <td>
        <wa-color-picker size="medium" label="Color Picker" hint="Hint"></wa-color-picker>
      </td>
      <td>
        <wa-color-picker class="wa-size-m" label="Color Picker" hint="Hint"></wa-color-picker>
      </td>
    </tr>
    <tr>
      <th><code>large</code>/<code>l</code></th>
      <td>
        <wa-color-picker size="large" label="Color Picker" hint="Hint"></wa-color-picker>
      </td>
      <td>
        <wa-color-picker class="wa-size-l" label="Color Picker" hint="Hint"></wa-color-picker>
      </td>
    </tr>
  </tbody>
</table>
</div>
<wa-divider></wa-divider>

<h3>Dropdown</h3>

<div class="table-scroll">
<table>
  <thead>
    <th></th>
    <th><code>size=""</code></th>
    <th><code>.wa-size-[s|m|l]</code></th>
  </thead>
  <tbody>
    <tr>
      <th><code>small</code>/<code>s</code></th>
      <td>
        <wa-dropdown size="small">
          <wa-button slot="trigger" caret>Dropdown</wa-button>
          <wa-menu>
            <wa-menu-item>Menu Item 1</wa-menu-item>
            <wa-menu-item>Menu Item 2</wa-menu-item>
          </wa-menu>
        </wa-dropdown>
      </td>
      <td>
        <wa-dropdown class="wa-size-s">
          <wa-button slot="trigger" caret>Dropdown</wa-button>
          <wa-menu>
            <wa-menu-item>Menu Item 1</wa-menu-item>
            <wa-menu-item>Menu Item 2</wa-menu-item>
          </wa-menu>
        </wa-dropdown>
      </td>
    </tr>
    <tr>
      <th><code>medium</code>/<code>m</code></th>
      <td>
        <wa-dropdown size="medium">
          <wa-button slot="trigger" caret>Dropdown</wa-button>
          <wa-menu>
            <wa-menu-item>Menu Item 1</wa-menu-item>
            <wa-menu-item>Menu Item 2</wa-menu-item>
          </wa-menu>
        </wa-dropdown>
      </td>
      <td>
        <wa-dropdown class="wa-size-m">
          <wa-button slot="trigger" caret>Dropdown</wa-button>
          <wa-menu>
            <wa-menu-item>Menu Item 1</wa-menu-item>
            <wa-menu-item>Menu Item 2</wa-menu-item>
          </wa-menu>
        </wa-dropdown>
      </td>
    </tr>
    <tr>
      <th><code>large</code>/<code>l</code></th>
      <td>
        <wa-dropdown size="large">
          <wa-button slot="trigger" caret>Dropdown</wa-button>
          <wa-menu>
            <wa-menu-item>Menu Item 1</wa-menu-item>
            <wa-menu-item>Menu Item 2</wa-menu-item>
          </wa-menu>
        </wa-dropdown>
      </td>
      <td>
        <wa-dropdown class="wa-size-l">
          <wa-button slot="trigger" caret>Dropdown</wa-button>
          <wa-menu>
            <wa-menu-item>Menu Item 1</wa-menu-item>
            <wa-menu-item>Menu Item 2</wa-menu-item>
          </wa-menu>
        </wa-dropdown>
      </td>
    </tr>
  </tbody>
</table>
</div>
<wa-divider></wa-divider>

<h3>Menu</h3>

<div class="table-scroll">
<table>
  <thead>
    <th></th>
    <th><code>size=""</code></th>
    <th><code>.wa-size-[s|m|l]</code></th>
  </thead>
  <tbody>
    <tr>
      <th><code>small</code>/<code>s</code></th>
      <td>
        <wa-menu size="small">
          <wa-menu-item>Menu Item 1</wa-menu-item>
          <wa-menu-item>Menu Item 2</wa-menu-item>
        </wa-menu>
      </td>
      <td>
        <wa-menu class="wa-size-s">
          <wa-menu-item>Menu Item 1</wa-menu-item>
          <wa-menu-item>Menu Item 2</wa-menu-item>
        </wa-menu>
      </td>
    </tr>
    <tr>
      <th><code>medium</code>/<code>m</code></th>
      <td>
        <wa-menu size="medium">
          <wa-menu-item>Menu Item 1</wa-menu-item>
          <wa-menu-item>Menu Item 2</wa-menu-item>
        </wa-menu>
      </td>
      <td>
        <wa-menu class="wa-size-m">
          <wa-menu-item>Menu Item 1</wa-menu-item>
          <wa-menu-item>Menu Item 2</wa-menu-item>
        </wa-menu>
      </td>
    </tr>
    <tr>
      <th><code>large</code>/<code>l</code></th>
      <td>
        <wa-menu size="large">
          <wa-menu-item>Menu Item 1</wa-menu-item>
          <wa-menu-item>Menu Item 2</wa-menu-item>
        </wa-menu>
      </td>
      <td>
        <wa-menu class="wa-size-l">
          <wa-menu-item>Menu Item 1</wa-menu-item>
          <wa-menu-item>Menu Item 2</wa-menu-item>
        </wa-menu>
      </td>
    </tr>
  </tbody>
</table>
</div>
<wa-divider></wa-divider>

<h3>Input</h3>

<div class="table-scroll">
<table>
  <thead>
    <th></th>
    <th><code>size=""</code></th>
    <th><code>.wa-size-[s|m|l]</code></th>
  </thead>
  <tbody>
    <tr>
      <th><code>small</code>/<code>s</code></th>
      <td>
        <wa-input size="small" label="Input" placeholder="Placeholder" hint="Hint"></wa-input>
      </td>
      <td>
        <wa-input class="wa-size-s" label="Input" placeholder="Placeholder" hint="Hint"></wa-input>
      </td>
    </tr>
    <tr>
      <th><code>medium</code>/<code>m</code></th>
      <td>
        <wa-input size="medium" label="Input" placeholder="Placeholder" hint="Hint"></wa-input>
      </td>
      <td>
        <wa-input class="wa-size-m" label="Input" placeholder="Placeholder" hint="Hint"></wa-input>
      </td>
    </tr>
    <tr>
      <th><code>large</code>/<code>l</code></th>
      <td>
        <wa-input size="large" label="Input" placeholder="Placeholder" hint="Hint"></wa-input>
      </td>
      <td>
        <wa-input class="wa-size-l" label="Input" placeholder="Placeholder" hint="Hint"></wa-input>
      </td>
    </tr>
  </tbody>
</table>
</div>
<wa-divider></wa-divider>

<h3>Radio</h3>

<div class="table-scroll">
<table>
  <thead>
    <th></th>
    <th><code>size=""</code></th>
    <th><code>.wa-size-[s|m|l]</code></th>
  </thead>
  <tbody>
    <tr>
      <th><code>small</code>/<code>s</code></th>
      <td>
        <wa-radio size="small">Radio</wa-radio>
      </td>
      <td>
        <wa-radio class="wa-size-s">Radio</wa-radio>
      </td>
    </tr>
    <tr>
      <th><code>medium</code>/<code>m</code></th>
      <td>
        <wa-radio size="medium">Radio</wa-radio>
      </td>
      <td>
        <wa-radio class="wa-size-m">Radio</wa-radio>
      </td>
    </tr>
    <tr>
      <th><code>large</code>/<code>l</code></th>
      <td>
        <wa-radio size="large">Radio</wa-radio>
      </td>
      <td>
        <wa-radio class="wa-size-l">Radio</wa-radio>
      </td>
    </tr>
  </tbody>
</table>
</div>
<wa-divider></wa-divider>

<h3>Radio Button</h3>

<div class="table-scroll">
<table>
  <thead>
    <th></th>
    <th><code>size=""</code></th>
    <th><code>.wa-size-[s|m|l]</code></th>
  </thead>
  <tbody>
    <tr>
      <th><code>small</code>/<code>s</code></th>
      <td>
        <wa-radio-group orientation="horizontal">
          <wa-radio-button size="small" value="1">Radio</wa-radio-button>
          <wa-radio-button size="small" value="2">Button</wa-radio-button>
        </wa-radio-group>
      </td>
      <td>
        <wa-radio-group orientation="horizontal">
          <wa-radio-button class="wa-size-s" value="1">Radio</wa-radio-button>
          <wa-radio-button class="wa-size-s" value="2">Button</wa-radio-button>
        </wa-radio-group>
      </td>
    </tr>
    <tr>
      <th><code>medium</code>/<code>m</code></th>
      <td>
        <wa-radio-group orientation="horizontal">
          <wa-radio-button size="medium" value="1">Radio</wa-radio-button>
          <wa-radio-button size="medium" value="2">Button</wa-radio-button>
        </wa-radio-group>
      </td>
      <td>
        <wa-radio-group orientation="horizontal">
          <wa-radio-button class="wa-size-m" value="1">Radio</wa-radio-button>
          <wa-radio-button class="wa-size-m" value="2">Button</wa-radio-button>
        </wa-radio-group>
      </td>
    </tr>
    <tr>
      <th><code>large</code>/<code>l</code></th>
      <td>
        <wa-radio-group orientation="horizontal">
          <wa-radio-button size="large" value="1">Radio</wa-radio-button>
          <wa-radio-button size="large" value="2">Button</wa-radio-button>
        </wa-radio-group>
      </td>
      <td>
        <wa-radio-group orientation="horizontal">
          <wa-radio-button class="wa-size-l" value="1">Radio</wa-radio-button>
          <wa-radio-button class="wa-size-l" value="2">Button</wa-radio-button>
        </wa-radio-group>
      </td>
    </tr>
  </tbody>
</table>
</div>
<wa-divider></wa-divider>

<h3>Radio Group</h3>

<div class="table-scroll">
<table>
  <thead>
    <th></th>
    <th><code>size=""</code></th>
    <th><code>.wa-size-[s|m|l]</code></th>
  </thead>
  <tbody>
    <tr>
      <th><code>small</code>/<code>s</code></th>
      <td>
        <div class="wa-stack">
          <wa-radio-group label="Radio Group" hint="Hint" size="small">
            <wa-radio value="1">Radio 1</wa-radio>
            <wa-radio value="2">Radio 2</wa-radio>
          </wa-radio-group>
          <wa-radio-group orientation="horizontal" label="Radio Button Group" hint="Hint" size="small">
            <wa-radio-button value="1">Radio 1</wa-radio-button>
            <wa-radio-button value="2">Radio 2</wa-radio-button>
          </wa-radio-group>
        </div>
      </td>
      <td>
        <div class="wa-stack">
          <wa-radio-group label="Radio Group" hint="Hint" class="wa-size-s">
            <wa-radio value="1">Radio 1</wa-radio>
            <wa-radio value="2">Radio 2</wa-radio>
          </wa-radio-group>
          <wa-radio-group orientation="horizontal" label="Radio Button Group" hint="Hint" class="wa-size-s">
            <wa-radio-button value="1">Radio 1</wa-radio-button>
            <wa-radio-button value="2">Radio 2</wa-radio-button>
          </wa-radio-group>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>medium</code>/<code>m</code></th>
      <td>
        <div class="wa-stack">
          <wa-radio-group label="Radio Group" hint="Hint" size="medium">
            <wa-radio value="1">Radio 1</wa-radio>
            <wa-radio value="2">Radio 2</wa-radio>
          </wa-radio-group>
          <wa-radio-group orientation="horizontal" label="Radio Button Group" hint="Hint" size="medium">
            <wa-radio-button value="1">Radio 1</wa-radio-button>
            <wa-radio-button value="2">Radio 2</wa-radio-button>
          </wa-radio-group>
        </div>
      </td>
      <td>
        <div class="wa-stack">
          <wa-radio-group label="Radio Group" hint="Hint" class="wa-size-m">
            <wa-radio value="1">Radio 1</wa-radio>
            <wa-radio value="2">Radio 2</wa-radio>
          </wa-radio-group>
          <wa-radio-group orientation="horizontal" label="Radio Button Group" hint="Hint" class="wa-size-m">
            <wa-radio-button value="1">Radio 1</wa-radio-button>
            <wa-radio-button value="2">Radio 2</wa-radio-button>
          </wa-radio-group>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>large</code>/<code>l</code></th>
      <td>
        <div class="wa-stack">
          <wa-radio-group label="Radio Group" hint="Hint" size="large">
            <wa-radio value="1">Radio 1</wa-radio>
            <wa-radio value="2">Radio 2</wa-radio>
          </wa-radio-group>
          <wa-radio-group orientation="horizontal" label="Radio Button Group" hint="Hint" size="large">
            <wa-radio-button value="1">Radio 1</wa-radio-button>
            <wa-radio-button value="2">Radio 2</wa-radio-button>
          </wa-radio-group>
        </div>
      </td>
      <td>
        <div class="wa-stack">
          <wa-radio-group label="Radio Group" hint="Hint" class="wa-size-l">
            <wa-radio value="1">Radio 1</wa-radio>
            <wa-radio value="2">Radio 2</wa-radio>
          </wa-radio-group>
          <wa-radio-group orientation="horizontal" label="Radio Button Group" hint="Hint" class="wa-size-l">
            <wa-radio-button value="1">Radio 1</wa-radio-button>
            <wa-radio-button value="2">Radio 2</wa-radio-button>
          </wa-radio-group>
        </div>
      </td>
    </tr>
  </tbody>
</table>
</div>
<wa-divider></wa-divider>

<h3>Rating</h3>

<div class="table-scroll">
<table>
  <thead>
    <th></th>
    <th><code>size=""</code></th>
    <th><code>.wa-size-[s|m|l]</code></th>
  </thead>
  <tbody>
    <tr>
      <th><code>small</code>/<code>s</code></th>
      <td>
        <wa-rating size="small"></wa-rating>
      </td>
      <td>
        <wa-rating class="wa-size-s"></wa-rating>
      </td>
    </tr>
    <tr>
      <th><code>medium</code>/<code>m</code></th>
      <td>
        <wa-rating size="medium"></wa-rating>
      </td>
      <td>
        <wa-rating class="wa-size-m"></wa-rating>
      </td>
    </tr>
    <tr>
      <th><code>large</code>/<code>l</code></th>
      <td>
        <wa-rating size="large"></wa-rating>
      </td>
      <td>
        <wa-rating class="wa-size-l"></wa-rating>
      </td>
    </tr>
  </tbody>
</table>
</div>
<wa-divider></wa-divider>

<h3>Select</h3>

<div class="table-scroll">
<table>
  <thead>
    <th></th>
    <th><code>size=""</code></th>
    <th><code>.wa-size-[s|m|l]</code></th>
  </thead>
  <tbody>
    <tr>
      <th><code>small</code>/<code>s</code></th>
      <td>
        <wa-select size="small" label="Select" placeholder="Placeholder" hint="Hint">
          <wa-option value="1">Option</wa-option>
        </wa-select>
      </td>
      <td>
        <wa-select class="wa-size-s" label="Select" placeholder="Placeholder" hint="Hint">
          <wa-option value="1">Option</wa-option>
        </wa-select>
      </td>
    </tr>
    <tr>
      <th><code>medium</code>/<code>m</code></th>
      <td>
        <wa-select size="medium" label="Select" placeholder="Placeholder" hint="Hint">
          <wa-option value="1">Option</wa-option>
        </wa-select>
      </td>
      <td>
        <wa-select class="wa-size-m" label="Select" placeholder="Placeholder" hint="Hint">
          <wa-option value="1">Option</wa-option>
        </wa-select>
      </td>
    </tr>
    <tr>
      <th><code>large</code>/<code>l</code></th>
      <td>
        <wa-select size="large" label="Select" placeholder="Placeholder" hint="Hint">
          <wa-option value="1">Option</wa-option>
        </wa-select>
      </td>
      <td>
        <wa-select class="wa-size-l" label="Select" placeholder="Placeholder" hint="Hint">
          <wa-option value="1">Option</wa-option>
        </wa-select>
      </td>
    </tr>
  </tbody>
</table>
</div>
<wa-divider></wa-divider>

<h3>Switch</h3>

<div class="table-scroll">
<table>
  <thead>
    <th></th>
    <th><code>size=""</code></th>
    <th><code>.wa-size-[s|m|l]</code></th>
  </thead>
  <tbody>
    <tr>
      <th><code>small</code>/<code>s</code></th>
      <td>
        <wa-switch hint="Hint" size="small">Switch</wa-switch>
      </td>
      <td>
        <wa-switch hint="Hint" class="wa-size-s">Switch</wa-switch>
      </td>
    </tr>
    <tr>
      <th><code>medium</code>/<code>m</code></th>
      <td>
        <wa-switch hint="Hint" size="medium">Switch</wa-switch>
      </td>
      <td>
        <wa-switch hint="Hint" class="wa-size-m">Switch</wa-switch>
      </td>
    </tr>
    <tr>
      <th><code>large</code>/<code>l</code></th>
      <td>
        <wa-switch hint="Hint" size="large">Switch</wa-switch>
      </td>
      <td>
        <wa-switch hint="Hint" class="wa-size-l">Switch</wa-switch>
      </td>
    </tr>
  </tbody>
</table>
</div>
<wa-divider></wa-divider>

<h3>Textarea</h3>

<div class="table-scroll">
<table>
  <thead>
    <th></th>
    <th><code>size=""</code></th>
    <th><code>.wa-size-[s|m|l]</code></th>
  </thead>
  <tbody>
    <tr>
      <th><code>small</code>/<code>s</code></th>
      <td>
        <wa-textarea size="small" label="Textarea" placeholder="Placeholder" hint="Hint"></wa-textarea>
      </td>
      <td>
        <wa-textarea class="wa-size-s" label="Textarea" placeholder="Placeholder" hint="Hint"></wa-textarea>
      </td>
    </tr>
    <tr>
      <th><code>medium</code>/<code>m</code></th>
      <td>
        <wa-textarea size="medium" label="Textarea" placeholder="Placeholder" hint="Hint"></wa-textarea>
      </td>
      <td>
        <wa-textarea class="wa-size-m" label="Textarea" placeholder="Placeholder" hint="Hint"></wa-textarea>
      </td>
    </tr>
    <tr>
      <th><code>large</code>/<code>l</code></th>
      <td>
        <wa-textarea size="large" label="Textarea" placeholder="Placeholder" hint="Hint"></wa-textarea>
      </td>
      <td>
        <wa-textarea class="wa-size-l" label="Textarea" placeholder="Placeholder" hint="Hint"></wa-textarea>
      </td>
    </tr>
  </tbody>
</table>
</div>