<style type="text/css">
    article.styleguide .icon-list {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
    }
    article.styleguide .icon-list li {
        list-style: none;
        display: grid;
        justify-items: center;
        margin: 10px;
        font-family: var(--eicui-base-font-family);
        width: 100px;
    }
    article.styleguide .icon-list li i {
        padding: 10px 10px;
        margin: 3px;
        border: 1px solid gray;
        width: 30px;
        display: flex;
        align-content: center;
        justify-content: center;
        font-size: var(--eicui-base-font-size-2xl);
    }
    article.styleguide .icon-list li label { font-size: var(--eicui-base-font-size-xs); }
    article.styleguide .styleguide > header { background: url('/app/assets/images/cards/styleguide.jpg'); }
    article.styleguide .grid-hilite span {
        display: block;
        min-height: 30px;
        border: 1px solid var(--eicui-base-color-primary-100);
    }
    article.styleguide article[eiccard] > header h1 { text-align: left; }
</style>
<article eiccard media class="styleguide">
    <header>
      <h1>Style guide</h1>
    </header>
    <section>
      <article eiccard collapsable collapsed>
        <header>
          <h1>Typography</h1>
          <h2>Utility classes available for text formatting</h2>
          <nav></nav>
        </header>
        <section>
          <h3>Font definition</h3>
          <a href="https://myeic.dev.eismea.eu/files/dg7LP7Tl3Tam8kO0onbrccQ" target="_blank">test1</a>
          <a href="/files/dg7LP7Tl3Tam8kO0onbrccQ" target="_blank">test2</a>
          <table>
            <thead>
              <tr>
                <th class="eui-u-width-20">preview</th>
                <th>Name</th>
                <th>Value</th>
                <th>Utility class</th>
                <th>CSS variable</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <p class="eui-u-font-2xs">Sample text</p>
                </td>
                <td>2xs</td>
                <td>0.625rem</td>
                <td>eui-u-font-2xs</td>
                <td>--eicui-base-font-2xs</td>
              </tr>
              <tr>
                <td>
                  <p class="eui-u-font-xs">Sample text</p>
                </td>
                <td>xs</td>
                <td>0.75rem</td>
                <td>eui-u-font-xs</td>
                <td>--eicui-base-font-xs</td>
              </tr>
              <tr>
                <td>
                  <p class="eui-u-font-s">Sample text</p>
                </td>
                <td>s</td>
                <td>0.875rem</td>
                <td>eui-u-font-s</td>
                <td>--eicui-base-font-s</td>
              </tr>
              <tr>
                <td>
                  <p class="eui-u-font-m">Sample text</p>
                </td>
                <td>m</td>
                <td>1rem</td>
                <td>eui-u-font-m</td>
                <td>--eicui-base-font-m</td>
              </tr>
              <tr>
                <td>
                  <p class="eui-u-font-l">Sample text</p>
                </td>
                <td>l</td>
                <td>1.125rem</td>
                <td>eui-u-font-l</td>
                <td>--eicui-base-font-l</td>
              </tr>
              <tr>
                <td>
                  <p class="eui-u-font-xl">Sample text</p>
                </td>
                <td>xl</td>
                <td>1.25rem</td>
                <td>eui-u-font-xl</td>
                <td>--eicui-base-font-xl</td>
              </tr>
              <tr>
                <td>
                  <p class="eui-u-font-2xl">Sample text</p>
                </td>
                <td>2xl</td>
                <td>1.5rem</td>
                <td>eui-u-font-2xl</td>
                <td>--eicui-base-font-2xl</td>
              </tr>
              <tr>
                <td>
                  <p class="eui-u-font-3xl">Sample text</p>
                </td>
                <td>3xl</td>
                <td>1.75rem</td>
                <td>eui-u-font-3xl</td>
                <td>--eicui-base-font-3xl</td>
              </tr>
              <tr>
                <td>
                  <p class="eui-u-font-4xl">Sample text</p>
                </td>
                <td>4xl</td>
                <td>2rem</td>
                <td>eui-u-font-4xl</td>
                <td>--eicui-base-font-4xl</td>
              </tr>
              <tr>
                <td>
                  <p class="eui-u-font-5xl">Sample text</p>
                </td>
                <td>5xl</td>
                <td>2.25rem</td>
                <td>eui-u-font-5xl</td>
                <td>--eicui-base-font-5xl</td>
              </tr>
              <tr>
                <td>
                  <p class="eui-u-font-6xl">Sample text</p>
                </td>
                <td>6xl</td>
                <td>2.675rem</td>
                <td>eui-u-font-6xl</td>
                <td>--eicui-base-font-6xl</td>
              </tr>
            </tbody>
          </table>
        </section>
      </article>
      <article eiccard collapsable collapsed>
        <header>
          <h1>Grid system</h1>
          <h2></h2>
        </header>
        <section>
          <p>You can organize your contents in columns. The amount of columns to be used is defined through a class entry in the contents container.</p>
          <p>Note that when using this grid system, the app will track interface resizing an adapt the column in order to keep a fluid display.</p>
          <div class="grid-hilite">
            <h6>2 columns (<code>class="cols-2"</code>)</h6>
            <div class="cols-2">
              <span></span>
              <span></span>
            </div>
            <h6>3 columns (<code>class="cols-3"</code>)</h6>
            <div class="cols-3">
              <span></span>
              <span></span>
              <span></span>
            </div>
            <h6>4 columns (<code>class="cols-4"</code>)</h6>
            <div class="cols-4">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>
            <h6>5 columns (<code>class="cols-5"</code>)</h6>
            <div class="cols-5">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>
            <h6>6 columns (<code>class="cols-6"</code>)</h6>
            <div class="cols-6">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>
            <h6>8 columns (<code>class="cols-8"</code>)</h6>
            <div class="cols-8">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>
          </div>
        </section>
      </article>
      <article eiccard collapsable collapsed>
        <header>
          <h1>Color system</h1>
          <h2>Normalized color coding</h2>
        </header>
        <section>
          <h6>Severity</h6>
          <p>EUI provides a reduced set of colors providing a semantic information to the user.</p>
          <table>
            <thead>
              <tr>
                <th>Meaning</th>
                <th>Color</th>
                <th>Attribute*</th>
                <th>css variable name</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Primary</td>
                <td><button eicbutton primary></button></td>
                <td>primary</td>
                <td>--eicui-base-color-primary-100</td>
              </tr>
              <tr>
                <td>Secondary</td>
                <td><button eicbutton ></button></td>
                <td>(used as default)</td>
                <td>--eicui-base-color-secondary-100</td>
              </tr>
              <tr>
                <td>Success</td>
                <td><button eicbutton success></button></td>
                <td>success</td>
                <td>--eicui-base-color-success-100</td>
              </tr>
              <tr>
                <td>Warning</td>
                <td><button eicbutton warning></button></td>
                <td>warning</td>
                <td>--eicui-base-color-warning-100</td>
              </tr>
              <tr>
                <td>Danger/failure</td>
                <td><button eicbutton danger></button></td>
                <td>danger</td>
                <td>--eicui-base-color-danger-100</td>
              </tr>
              <tr>
                <td>Info</td>
                <td><button eicbutton info></button></td>
                <td>info</td>
                <td>--eicui-base-color-info-100</td>
              </tr>
              <tr>
                <td>Accent</td>
                <td><button eicbutton accent></button></td>
                <td>accent</td>
                <td>--eicui-base-color-accent-100</td>
              </tr>
            </tbody>
          </table>
          <p>* See components tagged with <span eicchip xsmall info>severity</span>, indicating they support severity color system</p>
        </section>
      </article>
      <article eiccard collapsable collapsed>
        <header>
          <h1>Headings</h1>
          <h2>Styles available for title formatting</h2>
        </header>
        <section>
          <h1>This is heading 1</h1>
          <h2>This is heading 2</h2>
          <h3>This is heading 3</h3>
          <h4>This is heading 4</h4>
          <h5>This is heading 5</h5>
          <h6>This is heading 6</h6>
        </section>
      </article>
      <article eiccard collapsable collapsed>
        <header>
          <h1>Icons</h1>
          <h2>Set of UI icons</h2>
        </header>
        <section>
          <ul class="icon-list"></ul>
        </section>
      </article>
    </section>
  </article>
