graycoreio/daffodil

<h1>Container</h1>
<p>Container is a basic structural element that restricts page content to a specific maximum width.</p>

<h2>Overview</h2>
Container comes with pre-defined sizes that work well with common breakpoints. It's not responsible for providing padding or margin.

<h2>Size</h2>
<p>The size of a container can be defined by using the <code>size</code> property. There is no default size set.</p>

<p>Supported sizes: <code>xs | sm | md | lg | xl</code></p>

<table>
  <thead>
    <tr>
      <th>Description</th>
      <th>Max Width</th>
      <th>Value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Extra Small</td>
      <td>640px</td>
      <td>xs</td>
    </tr>
    <tr>
      <td>Small</td>
      <td>800px</td>
      <td>sm</td>
    </tr>
    <tr>
      <td>Medium</td>
      <td>1040px</td>
      <td>md</td>
    </tr>
    <tr>
      <td>Large</td>
      <td>1340px</td>
      <td>lg</td>
    </tr>
    <tr>
      <td>Extra Large</td>
      <td>1920px</td>
      <td>xl</td>
    </tr>
  </tbody>
</table>

<h2>Usage</h2>
<design-land-example-viewer-container example="container-sizes"></design-land-example-viewer-container>