# modal

The markup of every demo on <https://kuiper.oeds.it/modal/>, extracted from that
page. It is generated, so it cannot disagree with what the page renders.

Load the framework from the origin and read <https://kuiper.oeds.it/docs/KUIPER.md> first:
a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`.

## default

The component with no options set -- what the markup alone gives you, before any parameter is tuned. Read this one first: every other panel on the page is a departure from it.

Varies: 22 specimens.

```html
<div class="grid-xs grid-collapse" data-grid>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-xs" data-grid>
    <div class="width-1-1 width-1-3@s width-1-3@m width-1-3@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-default;">default</button></div></div>
    <div class="width-1-1 width-1-3@s width-1-3@m width-1-3@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-bg-close-false;">bg-close:false</button></div></div>
    <div class="width-1-1 width-1-3@s width-1-3@m width-1-3@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-esc-close-false;">esc-close:false</button></div></div>
    <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-2-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-bg-esc-close-false;">esc-close:false bg-close:false</button></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1" id="modal-default" data-modal>
     <div class="modal-dialog">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">header</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
    <div class="width-1-1" id="modal-bg-close-false" data-modal="bg-close:false;">
     <div class="modal-dialog">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">header</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
    <div class="width-1-1" id="modal-esc-close-false" data-modal="esc-close:false;">
     <div class="modal-dialog">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">header</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
    <div class="width-1-1" id="modal-bg-esc-close-false" data-modal="bg-close:false; esc-close:false;">
     <div class="modal-dialog">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">header</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>
```

## size

One specimen per size rung, so the ladder reads as a single column. A rung sets the height, the type size and the horizontal padding together, and the sizeless specimen is identical to `-m` by construction.

Varies: 42 specimens.

```html
<div class="grid-xs grid-collapse" data-grid>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-xs" data-grid>
    <div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-size-default;">default</button></div></div>
    <div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-size-xs;">xs</button></div></div>
    <div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-size-s;">s</button></div></div>
    <div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-size-m;">m</button></div></div>
    <div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-size-l;">l</button></div></div>
    <div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-size-xl;">xl</button></div></div>
    <div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-size-expand;">expand</button></div></div>
    <div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-size-full;">full</button></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1" id="modal-size-default" data-modal>
     <div class="modal-dialog">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">default</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
    <div class="width-1-1" id="modal-size-xs" data-modal="size:xs;">
     <div class="modal-dialog">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">header</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
    <div class="width-1-1" id="modal-size-s" data-modal="size:s;">
     <div class="modal-dialog">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">header</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
    <div class="width-1-1" id="modal-size-m" data-modal="size:m;">
     <div class="modal-dialog">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">header</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
    <div class="width-1-1" id="modal-size-l" data-modal="size:l;">
     <div class="modal-dialog">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">header</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
    <div class="width-1-1" id="modal-size-xl" data-modal="size:xl;">
     <div class="modal-dialog">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">header</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
    <div class="width-1-1" id="modal-size-expand" data-modal="size:expand;">
     <div class="modal-dialog">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">header</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
    <div class="width-1-1" id="modal-size-full" data-modal="size:full;">
     <div class="modal-dialog">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">header</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>
```

## align

Varies: 22 specimens.

```html
<div class="grid-xs grid-collapse" data-grid>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-xs" data-grid>
    <div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-align-default;">default</button></div></div>
    <div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-align-top;">top</button></div></div>
    <div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-align-center;">center</button></div></div>
    <div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-align-bottom;">bottom</button></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1" id="modal-align-default" data-modal>
     <div class="modal-dialog">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">default</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
    <div class="width-1-1" id="modal-align-top" data-modal="align:top;">
     <div class="modal-dialog">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">header</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
    <div class="width-1-1" id="modal-align-center" data-modal="align:center;">
     <div class="modal-dialog">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">header</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
    <div class="width-1-1" id="modal-align-bottom" data-modal="align:bottom;">
     <div class="modal-dialog">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">header</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>
```

## padding

Varies: the `padding-*` ladder over 10 rungs, `5xs` to `2xl`.

```html
<div class="grid-xs grid-collapse" data-grid>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-xs" data-grid>
    <div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-padding-default;">default</button></div></div>
    <div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-padding-5xs;">5xs</button></div></div>
    <div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-padding-5xs;">5xs</button></div></div>
    <div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-padding-4xs;">4xs</button></div></div>
    <div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-padding-4xs;">4xs</button></div></div>
    <div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-padding-3xs;">3xs</button></div></div>
    <div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-padding-3xs;">3xs</button></div></div>
    <div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-padding-2xs;">2xs</button></div></div>
    <div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-padding-2xs;">2xs</button></div></div>
    <div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-padding-2xs;">2xs</button></div></div>
    <div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-padding-xs;">xs</button></div></div>
    <div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-padding-xs;">5xs</button></div></div>
    <div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-padding-xs;">4xs</button></div></div>
    <div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-padding-s;">3xs</button></div></div>
    <div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-padding-s;">2xs</button></div></div>
    <div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-padding-s;">xs</button></div></div>
    <div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-padding-m;">m</button></div></div>
    <div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-padding-l;">xl</button></div></div>
    <div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-padding-l;">3xl</button></div></div>
    <div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-padding-xl;">4xl</button></div></div>
    <div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-padding-xl;">5xl</button></div></div>
    <div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-padding-2xl;">2xl</button></div></div>
    <div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-padding-remove;">remove</button></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1" id="modal-padding-default" data-modal>
     <div class="modal-dialog">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">default</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
    <div class="width-1-1" id="modal-padding-5xs" data-modal>
     <div class="modal-dialog padding-5xs">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">header</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
    <div class="width-1-1" id="modal-padding-5xs" data-modal>
     <div class="modal-dialog padding-5xs">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">header</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
    <div class="width-1-1" id="modal-padding-4xs" data-modal>
     <div class="modal-dialog padding-4xs">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">header</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
    <div class="width-1-1" id="modal-padding-4xs" data-modal>
     <div class="modal-dialog padding-4xs">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">header</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
    <div class="width-1-1" id="modal-padding-3xs" data-modal>
     <div class="modal-dialog padding-3xs">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">header</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
    <div class="width-1-1" id="modal-padding-3xs" data-modal>
     <div class="modal-dialog padding-3xs">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">header</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
    <div class="width-1-1" id="modal-padding-2xs" data-modal>
     <div class="modal-dialog padding-2xs">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">header</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
    <div class="width-1-1" id="modal-padding-2xs" data-modal>
     <div class="modal-dialog padding-2xs">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">header</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
    <div class="width-1-1" id="modal-padding-2xs" data-modal>
     <div class="modal-dialog padding-2xs">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">header</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
    <div class="width-1-1" id="modal-padding-xs" data-modal>
     <div class="modal-dialog padding-xs">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">header</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
    <div class="width-1-1" id="modal-padding-xs" data-modal>
     <div class="modal-dialog padding-xs">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">header</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
    <div class="width-1-1" id="modal-padding-xs" data-modal>
     <div class="modal-dialog padding-xs">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">header</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
    <div class="width-1-1" id="modal-padding-s" data-modal>
     <div class="modal-dialog padding-s">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">header</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
    <div class="width-1-1" id="modal-padding-s" data-modal>
     <div class="modal-dialog padding-s">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">header</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
    <div class="width-1-1" id="modal-padding-s" data-modal>
     <div class="modal-dialog padding-s">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">header</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
    <div class="width-1-1" id="modal-padding-m" data-modal>
     <div class="modal-dialog padding-m">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">header</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
    <div class="width-1-1" id="modal-padding-l" data-modal>
     <div class="modal-dialog padding-l">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">header</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
    <div class="width-1-1" id="modal-padding-l" data-modal>
     <div class="modal-dialog padding-l">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">header</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
    <div class="width-1-1" id="modal-padding-xl" data-modal>
     <div class="modal-dialog padding-xl">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">header</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
    <div class="width-1-1" id="modal-padding-xl" data-modal>
     <div class="modal-dialog padding-xl">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">header</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
    <div class="width-1-1" id="modal-padding-2xl" data-modal>
     <div class="modal-dialog padding-2xl">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">header</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
    <div class="width-1-1" id="modal-padding-remove" data-modal>
     <div class="modal-dialog padding-remove">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">header</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>
```

## color

The same specimen repeated on each ground Kuiper paints. The point is what you do NOT write: the ink, the border and the placeholder follow the ground through the `--foreground-*` tokens, so no color class appears on the specimen itself.

Varies: 17 specimens.

```html
<div class="grid-xs grid-collapse" data-grid>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-xs" data-grid>
    <div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-color-default;">default</button></div></div>
    <div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-color-black;">black</button></div></div>
    <div class="width-1-1 width-1-2@s width-1-3@m width-1-4@l width-1-5@xl"><div class="card"><button class="width-1-1" data-toggle="target:#modal-color-white;">white</button></div></div>
   </div>
  </div>
 </div>
 <div class="width-1-1">
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1" id="modal-color-default" data-modal>
     <div class="modal-dialog">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">default</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
    <div class="width-1-1" id="modal-color-black" data-modal>
     <div class="modal-dialog overlay-black-85">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">default</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
    <div class="width-1-1" id="modal-color-white" data-modal>
     <div class="modal-dialog overlay-white-85">
      <div class="modal-content">
       <div class="card card-white">
        <div class="card-header">
         <div class="grid-xs grid-collapse flex-middle" data-grid>
          <div class="width-expand">
           <div class="card">
            <h3 class="card-title">default</h3>
           </div>
          </div>
          <div class="width-auto">
           <div class="card">
            <button class="button-icon" data-icon="close" data-modal-close aria-label="Close"></button>
           </div>
          </div>
         </div>
        </div>
        <div class="card-body" data-overflow-auto><p>body</p></div>
        <div class="card-footer"><p>footer</p></div>
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>
```
