npm - @ippon-ui/styles - Versions diffs - 0.0.2 - Mend

@ippon-ui/styles 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (618) hide show

package/dist/organism/organism.html ADDED Viewed

@@ -0,0 +1,1542 @@
+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Tikui - Organisms</title><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><meta name="description" content="Tikui is a Pattern Library generator."><link rel="stylesheet" href="../documentation/style.css"><link rel="stylesheet" href="../documentation/lib/@fontsource/montserrat/index.css"><link rel="stylesheet" href="../documentation/lib/@fontsource/montserrat/700.css"><link rel="stylesheet" href="../lib/prismjs/prism-okaidia.css"></head><body><div class="tikui-template-page"><div class="tikui-template-page--header"><div class="tikui-template-page--header-container"><header class="tikui-header"><div class="tikui-header--slot"><a class="tikui-title-brand" href="../index.html">Tikui</a></div><div class="tikui-header--slot"><nav><ul class="tikui-header-navigation"><li class="tikui-header-navigation--slot"><a class="tikui-header-item" href="../token/token.html"><span class="tikui-header-item--text">Tokens</span><span class="tikui-header-item--feedback"></span></a></li><li class="tikui-header-navigation--slot"><a class="tikui-header-item" href="../atom/atom.html"><span class="tikui-header-item--text">Atoms</span><span class="tikui-header-item--feedback"></span></a></li><li class="tikui-header-navigation--slot"><a class="tikui-header-item" href="../molecule/molecule.html"><span class="tikui-header-item--text">Molecules</span><span class="tikui-header-item--feedback"></span></a></li><li class="tikui-header-navigation--slot"><a class="tikui-header-item -selected" href="../organism/organism.html"><span class="tikui-header-item--text">Organisms</span><span class="tikui-header-item--feedback"></span></a></li><li class="tikui-header-navigation--slot"><a class="tikui-header-item" href="../template/template.html"><span class="tikui-header-item--text">Templates</span><span class="tikui-header-item--feedback"></span></a></li></ul></nav></div></header></div></div><div class="tikui-template-page--body" data-navigable><div class="tikui-template-page--container"><div class="tikui-template-page--container-content"><div class="tikui-vertical-spacing -s32"><div class="tikui-vertical-spacing--line"><h1 class="tikui-title-main" id="organisms">Organisms</h1></div><div class="tikui-vertical-spacing--line"><figure class="tikui-quote"><blockquote class="tikui-quote--text" cite="http://bradfrost.com/blog/post/atomic-web-design/#organisms"><p>Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.</p><p>Building up from molecules to organisms encourages creating standalone, portable, reusable components.</p></blockquote><figcaption class="tikui-quote--author"><cite>Atomic Design</cite> by Brad Frost</figcaption></figure></div><div class="tikui-vertical-spacing--line"><div class="tikui-component"><div class="tikui-component--markdown markdown"><h2 id="buttoncard">Button card</h2>
+<p>A clickable card component that acts as an interactive surface. It extends the base card styles with cursor pointer and hover/active states, making it suitable for navigation or selection purposes.</p>
+<p><strong>Sizes:</strong></p>
+<ul>
+<li>Small <code>-small</code></li>
+<li>Medium (Default)</li>
+<li>Large <code>-large</code></li>
+</ul>
+<p><strong>Shadows:</strong></p>
+<ul>
+<li>No shadow (default)</li>
+<li>Shadow level 1 <code>-shadow-l1</code></li>
+<li>Shadow level 2 <code>-shadow-l2</code></li>
+<li>Shadow level 3 <code>-shadow-l3</code></li>
+<li>Shadow level 4 <code>-shadow-l4</code></li>
+<li>Shadow level 5 <code>-shadow-l5</code></li>
+</ul>
+<p><strong>Border:</strong></p>
+<ul>
+<li>No border (default)</li>
+<li>Border <code>-border</code></li>
+</ul>
+<p><strong>Width:</strong></p>
+<ul>
+<li>Inline (default)</li>
+<li>Full width <code>-full-width</code></li>
+</ul></div><div class="tikui-component--render render"><iframe class="doc-iframe" src="../organism/button-card/button-card.render.html" height="330" title="Component rendering"></iframe></div><div class="tikui-component--code code"><div class="tikui-line-section -s24"><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-html">&lt;button class=&quot;ippon-button-card -shadow-l1 -small&quot;&gt;
+  &lt;div class=&quot;ippon-h-space -gap-16 -middle&quot;&gt;
+    &lt;span class=&quot;ippon-icon -size-24 -color-brand-primary ippon-ion-hardware-chip-sharp&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+    &lt;div class=&quot;ippon-v-space -gap-4 -left&quot;&gt;
+      &lt;span class=&quot;ippon-text -body -color-neutral-tertiary-inversed&quot;&gt;Some key
+      &lt;/span&gt;
+      &lt;span class=&quot;ippon-text -large -label&quot;&gt;Description value
+      &lt;/span&gt;
+    &lt;/div&gt;
+    &lt;span class=&quot;ippon-icon -size-24 ippon-ion-chevron-forward&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button-card -shadow-l2&quot;&gt;
+  &lt;div class=&quot;ippon-h-space -gap-16 -middle&quot;&gt;
+    &lt;span class=&quot;ippon-icon -size-24 -color-brand-primary ippon-ion-hardware-chip-sharp&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+    &lt;div class=&quot;ippon-v-space -gap-4 -left&quot;&gt;
+      &lt;span class=&quot;ippon-text -body -color-neutral-tertiary-inversed&quot;&gt;Some key
+      &lt;/span&gt;
+      &lt;span class=&quot;ippon-text -large -label&quot;&gt;Description value
+      &lt;/span&gt;
+    &lt;/div&gt;
+    &lt;span class=&quot;ippon-icon -size-24 ippon-ion-chevron-forward&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button-card -shadow-l3 -large&quot;&gt;
+  &lt;div class=&quot;ippon-h-space -gap-16 -middle&quot;&gt;
+    &lt;span class=&quot;ippon-icon -size-24 -color-brand-primary ippon-ion-hardware-chip-sharp&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+    &lt;div class=&quot;ippon-v-space -gap-4 -left&quot;&gt;
+      &lt;span class=&quot;ippon-text -body -color-neutral-tertiary-inversed&quot;&gt;Some key
+      &lt;/span&gt;
+      &lt;span class=&quot;ippon-text -large -label&quot;&gt;Description value
+      &lt;/span&gt;
+    &lt;/div&gt;
+    &lt;span class=&quot;ippon-icon -size-24 ippon-ion-chevron-forward&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button-card -shadow-l4&quot;&gt;
+  &lt;div class=&quot;ippon-h-space -gap-16 -middle&quot;&gt;
+    &lt;span class=&quot;ippon-icon -size-24 -color-brand-primary ippon-ion-hardware-chip-sharp&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+    &lt;div class=&quot;ippon-v-space -gap-4 -left&quot;&gt;
+      &lt;span class=&quot;ippon-text -body -color-neutral-tertiary-inversed&quot;&gt;Some key
+      &lt;/span&gt;
+      &lt;span class=&quot;ippon-text -large -label&quot;&gt;Description value
+      &lt;/span&gt;
+    &lt;/div&gt;
+    &lt;span class=&quot;ippon-icon -size-24 ippon-ion-chevron-forward&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button-card -shadow-l5&quot;&gt;
+  &lt;div class=&quot;ippon-h-space -gap-16 -middle&quot;&gt;
+    &lt;span class=&quot;ippon-icon -size-24 -color-brand-primary ippon-ion-hardware-chip-sharp&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+    &lt;div class=&quot;ippon-v-space -gap-4 -left&quot;&gt;
+      &lt;span class=&quot;ippon-text -body -color-neutral-tertiary-inversed&quot;&gt;Some key
+      &lt;/span&gt;
+      &lt;span class=&quot;ippon-text -large -label&quot;&gt;Description value
+      &lt;/span&gt;
+    &lt;/div&gt;
+    &lt;span class=&quot;ippon-icon -size-24 ippon-ion-chevron-forward&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button-card -border&quot;&gt;
+  &lt;div class=&quot;ippon-h-space -gap-16 -middle&quot;&gt;
+    &lt;span class=&quot;ippon-icon -size-24 -color-brand-primary ippon-ion-hardware-chip-sharp&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+    &lt;div class=&quot;ippon-v-space -gap-4 -left&quot;&gt;
+      &lt;span class=&quot;ippon-text -body -color-neutral-tertiary-inversed&quot;&gt;Some key
+      &lt;/span&gt;
+      &lt;span class=&quot;ippon-text -large -label&quot;&gt;Description value
+      &lt;/span&gt;
+    &lt;/div&gt;
+    &lt;span class=&quot;ippon-icon -size-24 ippon-ion-chevron-forward&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button-card -shadow-l5 -border&quot;&gt;
+  &lt;div class=&quot;ippon-h-space -gap-16 -middle&quot;&gt;
+    &lt;span class=&quot;ippon-icon -size-24 -color-brand-primary ippon-ion-hardware-chip-sharp&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+    &lt;div class=&quot;ippon-v-space -gap-4 -left&quot;&gt;
+      &lt;span class=&quot;ippon-text -body -color-neutral-tertiary-inversed&quot;&gt;Some key
+      &lt;/span&gt;
+      &lt;span class=&quot;ippon-text -large -label&quot;&gt;Description value
+      &lt;/span&gt;
+    &lt;/div&gt;
+    &lt;span class=&quot;ippon-icon -size-24 ippon-ion-chevron-forward&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button-card -border -full-width&quot;&gt;
+  &lt;div class=&quot;ippon-h-space -gap-16 -middle&quot;&gt;
+    &lt;span class=&quot;ippon-icon -size-24 -color-brand-primary ippon-ion-hardware-chip-sharp&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+    &lt;div class=&quot;ippon-v-space -gap-4 -left&quot;&gt;
+      &lt;span class=&quot;ippon-text -body -color-neutral-tertiary-inversed&quot;&gt;Some key
+      &lt;/span&gt;
+      &lt;span class=&quot;ippon-text -large -label&quot;&gt;Description value
+      &lt;/span&gt;
+    &lt;/div&gt;
+    &lt;span class=&quot;ippon-icon -size-24 ippon-ion-chevron-forward&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/button&gt;</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+&lt;button class=&quot;ippon-button-card -shadow-l1 -small&quot;&gt;
+  &lt;div class=&quot;ippon-h-space -gap-16 -middle&quot;&gt;
+    &lt;span class=&quot;ippon-icon -size-24 -color-brand-primary ippon-ion-hardware-chip-sharp&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+    &lt;div class=&quot;ippon-v-space -gap-4 -left&quot;&gt;
+      &lt;span class=&quot;ippon-text -body -color-neutral-tertiary-inversed&quot;&gt;Some key
+      &lt;/span&gt;
+      &lt;span class=&quot;ippon-text -large -label&quot;&gt;Description value
+      &lt;/span&gt;
+    &lt;/div&gt;
+    &lt;span class=&quot;ippon-icon -size-24 ippon-ion-chevron-forward&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button-card -shadow-l2&quot;&gt;
+  &lt;div class=&quot;ippon-h-space -gap-16 -middle&quot;&gt;
+    &lt;span class=&quot;ippon-icon -size-24 -color-brand-primary ippon-ion-hardware-chip-sharp&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+    &lt;div class=&quot;ippon-v-space -gap-4 -left&quot;&gt;
+      &lt;span class=&quot;ippon-text -body -color-neutral-tertiary-inversed&quot;&gt;Some key
+      &lt;/span&gt;
+      &lt;span class=&quot;ippon-text -large -label&quot;&gt;Description value
+      &lt;/span&gt;
+    &lt;/div&gt;
+    &lt;span class=&quot;ippon-icon -size-24 ippon-ion-chevron-forward&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button-card -shadow-l3 -large&quot;&gt;
+  &lt;div class=&quot;ippon-h-space -gap-16 -middle&quot;&gt;
+    &lt;span class=&quot;ippon-icon -size-24 -color-brand-primary ippon-ion-hardware-chip-sharp&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+    &lt;div class=&quot;ippon-v-space -gap-4 -left&quot;&gt;
+      &lt;span class=&quot;ippon-text -body -color-neutral-tertiary-inversed&quot;&gt;Some key
+      &lt;/span&gt;
+      &lt;span class=&quot;ippon-text -large -label&quot;&gt;Description value
+      &lt;/span&gt;
+    &lt;/div&gt;
+    &lt;span class=&quot;ippon-icon -size-24 ippon-ion-chevron-forward&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button-card -shadow-l4&quot;&gt;
+  &lt;div class=&quot;ippon-h-space -gap-16 -middle&quot;&gt;
+    &lt;span class=&quot;ippon-icon -size-24 -color-brand-primary ippon-ion-hardware-chip-sharp&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+    &lt;div class=&quot;ippon-v-space -gap-4 -left&quot;&gt;
+      &lt;span class=&quot;ippon-text -body -color-neutral-tertiary-inversed&quot;&gt;Some key
+      &lt;/span&gt;
+      &lt;span class=&quot;ippon-text -large -label&quot;&gt;Description value
+      &lt;/span&gt;
+    &lt;/div&gt;
+    &lt;span class=&quot;ippon-icon -size-24 ippon-ion-chevron-forward&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button-card -shadow-l5&quot;&gt;
+  &lt;div class=&quot;ippon-h-space -gap-16 -middle&quot;&gt;
+    &lt;span class=&quot;ippon-icon -size-24 -color-brand-primary ippon-ion-hardware-chip-sharp&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+    &lt;div class=&quot;ippon-v-space -gap-4 -left&quot;&gt;
+      &lt;span class=&quot;ippon-text -body -color-neutral-tertiary-inversed&quot;&gt;Some key
+      &lt;/span&gt;
+      &lt;span class=&quot;ippon-text -large -label&quot;&gt;Description value
+      &lt;/span&gt;
+    &lt;/div&gt;
+    &lt;span class=&quot;ippon-icon -size-24 ippon-ion-chevron-forward&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button-card -border&quot;&gt;
+  &lt;div class=&quot;ippon-h-space -gap-16 -middle&quot;&gt;
+    &lt;span class=&quot;ippon-icon -size-24 -color-brand-primary ippon-ion-hardware-chip-sharp&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+    &lt;div class=&quot;ippon-v-space -gap-4 -left&quot;&gt;
+      &lt;span class=&quot;ippon-text -body -color-neutral-tertiary-inversed&quot;&gt;Some key
+      &lt;/span&gt;
+      &lt;span class=&quot;ippon-text -large -label&quot;&gt;Description value
+      &lt;/span&gt;
+    &lt;/div&gt;
+    &lt;span class=&quot;ippon-icon -size-24 ippon-ion-chevron-forward&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button-card -shadow-l5 -border&quot;&gt;
+  &lt;div class=&quot;ippon-h-space -gap-16 -middle&quot;&gt;
+    &lt;span class=&quot;ippon-icon -size-24 -color-brand-primary ippon-ion-hardware-chip-sharp&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+    &lt;div class=&quot;ippon-v-space -gap-4 -left&quot;&gt;
+      &lt;span class=&quot;ippon-text -body -color-neutral-tertiary-inversed&quot;&gt;Some key
+      &lt;/span&gt;
+      &lt;span class=&quot;ippon-text -large -label&quot;&gt;Description value
+      &lt;/span&gt;
+    &lt;/div&gt;
+    &lt;span class=&quot;ippon-icon -size-24 ippon-ion-chevron-forward&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/button&gt;
+&lt;button class=&quot;ippon-button-card -border -full-width&quot;&gt;
+  &lt;div class=&quot;ippon-h-space -gap-16 -middle&quot;&gt;
+    &lt;span class=&quot;ippon-icon -size-24 -color-brand-primary ippon-ion-hardware-chip-sharp&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+    &lt;div class=&quot;ippon-v-space -gap-4 -left&quot;&gt;
+      &lt;span class=&quot;ippon-text -body -color-neutral-tertiary-inversed&quot;&gt;Some key
+      &lt;/span&gt;
+      &lt;span class=&quot;ippon-text -large -label&quot;&gt;Description value
+      &lt;/span&gt;
+    &lt;/div&gt;
+    &lt;span class=&quot;ippon-icon -size-24 ippon-ion-chevron-forward&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/button&gt;">Copy</button></div><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-pug">button.ippon-button-card.-shadow-l1.-small
+  .ippon-h-space.-gap-16.-middle
+    span.ippon-icon.-size-24.-color-brand-primary.ippon-ion-hardware-chip-sharp(role=&quot;presentation&quot;)
+    .ippon-v-space.-gap-4.-left
+      span.ippon-text.-body.-color-neutral-tertiary-inversed Some key
+      span.ippon-text.-large.-label Description value
+    span.ippon-icon.-size-24.ippon-ion-chevron-forward(role=&quot;presentation&quot;)
+button.ippon-button-card.-shadow-l2
+  .ippon-h-space.-gap-16.-middle
+    span.ippon-icon.-size-24.-color-brand-primary.ippon-ion-hardware-chip-sharp(role=&quot;presentation&quot;)
+    .ippon-v-space.-gap-4.-left
+      span.ippon-text.-body.-color-neutral-tertiary-inversed Some key
+      span.ippon-text.-large.-label Description value
+    span.ippon-icon.-size-24.ippon-ion-chevron-forward(role=&quot;presentation&quot;)
+button.ippon-button-card.-shadow-l3.-large
+  .ippon-h-space.-gap-16.-middle
+    span.ippon-icon.-size-24.-color-brand-primary.ippon-ion-hardware-chip-sharp(role=&quot;presentation&quot;)
+    .ippon-v-space.-gap-4.-left
+      span.ippon-text.-body.-color-neutral-tertiary-inversed Some key
+      span.ippon-text.-large.-label Description value
+    span.ippon-icon.-size-24.ippon-ion-chevron-forward(role=&quot;presentation&quot;)
+button.ippon-button-card.-shadow-l4
+  .ippon-h-space.-gap-16.-middle
+    span.ippon-icon.-size-24.-color-brand-primary.ippon-ion-hardware-chip-sharp(role=&quot;presentation&quot;)
+    .ippon-v-space.-gap-4.-left
+      span.ippon-text.-body.-color-neutral-tertiary-inversed Some key
+      span.ippon-text.-large.-label Description value
+    span.ippon-icon.-size-24.ippon-ion-chevron-forward(role=&quot;presentation&quot;)
+button.ippon-button-card.-shadow-l5
+  .ippon-h-space.-gap-16.-middle
+    span.ippon-icon.-size-24.-color-brand-primary.ippon-ion-hardware-chip-sharp(role=&quot;presentation&quot;)
+    .ippon-v-space.-gap-4.-left
+      span.ippon-text.-body.-color-neutral-tertiary-inversed Some key
+      span.ippon-text.-large.-label Description value
+    span.ippon-icon.-size-24.ippon-ion-chevron-forward(role=&quot;presentation&quot;)
+button.ippon-button-card.-border
+  .ippon-h-space.-gap-16.-middle
+    span.ippon-icon.-size-24.-color-brand-primary.ippon-ion-hardware-chip-sharp(role=&quot;presentation&quot;)
+    .ippon-v-space.-gap-4.-left
+      span.ippon-text.-body.-color-neutral-tertiary-inversed Some key
+      span.ippon-text.-large.-label Description value
+    span.ippon-icon.-size-24.ippon-ion-chevron-forward(role=&quot;presentation&quot;)
+button.ippon-button-card.-shadow-l5.-border
+  .ippon-h-space.-gap-16.-middle
+    span.ippon-icon.-size-24.-color-brand-primary.ippon-ion-hardware-chip-sharp(role=&quot;presentation&quot;)
+    .ippon-v-space.-gap-4.-left
+      span.ippon-text.-body.-color-neutral-tertiary-inversed Some key
+      span.ippon-text.-large.-label Description value
+    span.ippon-icon.-size-24.ippon-ion-chevron-forward(role=&quot;presentation&quot;)
+button.ippon-button-card.-border.-full-width
+  .ippon-h-space.-gap-16.-middle
+    span.ippon-icon.-size-24.-color-brand-primary.ippon-ion-hardware-chip-sharp(role=&quot;presentation&quot;)
+    .ippon-v-space.-gap-4.-left
+      span.ippon-text.-body.-color-neutral-tertiary-inversed Some key
+      span.ippon-text.-large.-label Description value
+    span.ippon-icon.-size-24.ippon-ion-chevron-forward(role=&quot;presentation&quot;)</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+button.ippon-button-card.-shadow-l1.-small
+  .ippon-h-space.-gap-16.-middle
+    span.ippon-icon.-size-24.-color-brand-primary.ippon-ion-hardware-chip-sharp(role=&quot;presentation&quot;)
+    .ippon-v-space.-gap-4.-left
+      span.ippon-text.-body.-color-neutral-tertiary-inversed Some key
+      span.ippon-text.-large.-label Description value
+    span.ippon-icon.-size-24.ippon-ion-chevron-forward(role=&quot;presentation&quot;)
+button.ippon-button-card.-shadow-l2
+  .ippon-h-space.-gap-16.-middle
+    span.ippon-icon.-size-24.-color-brand-primary.ippon-ion-hardware-chip-sharp(role=&quot;presentation&quot;)
+    .ippon-v-space.-gap-4.-left
+      span.ippon-text.-body.-color-neutral-tertiary-inversed Some key
+      span.ippon-text.-large.-label Description value
+    span.ippon-icon.-size-24.ippon-ion-chevron-forward(role=&quot;presentation&quot;)
+button.ippon-button-card.-shadow-l3.-large
+  .ippon-h-space.-gap-16.-middle
+    span.ippon-icon.-size-24.-color-brand-primary.ippon-ion-hardware-chip-sharp(role=&quot;presentation&quot;)
+    .ippon-v-space.-gap-4.-left
+      span.ippon-text.-body.-color-neutral-tertiary-inversed Some key
+      span.ippon-text.-large.-label Description value
+    span.ippon-icon.-size-24.ippon-ion-chevron-forward(role=&quot;presentation&quot;)
+button.ippon-button-card.-shadow-l4
+  .ippon-h-space.-gap-16.-middle
+    span.ippon-icon.-size-24.-color-brand-primary.ippon-ion-hardware-chip-sharp(role=&quot;presentation&quot;)
+    .ippon-v-space.-gap-4.-left
+      span.ippon-text.-body.-color-neutral-tertiary-inversed Some key
+      span.ippon-text.-large.-label Description value
+    span.ippon-icon.-size-24.ippon-ion-chevron-forward(role=&quot;presentation&quot;)
+button.ippon-button-card.-shadow-l5
+  .ippon-h-space.-gap-16.-middle
+    span.ippon-icon.-size-24.-color-brand-primary.ippon-ion-hardware-chip-sharp(role=&quot;presentation&quot;)
+    .ippon-v-space.-gap-4.-left
+      span.ippon-text.-body.-color-neutral-tertiary-inversed Some key
+      span.ippon-text.-large.-label Description value
+    span.ippon-icon.-size-24.ippon-ion-chevron-forward(role=&quot;presentation&quot;)
+button.ippon-button-card.-border
+  .ippon-h-space.-gap-16.-middle
+    span.ippon-icon.-size-24.-color-brand-primary.ippon-ion-hardware-chip-sharp(role=&quot;presentation&quot;)
+    .ippon-v-space.-gap-4.-left
+      span.ippon-text.-body.-color-neutral-tertiary-inversed Some key
+      span.ippon-text.-large.-label Description value
+    span.ippon-icon.-size-24.ippon-ion-chevron-forward(role=&quot;presentation&quot;)
+button.ippon-button-card.-shadow-l5.-border
+  .ippon-h-space.-gap-16.-middle
+    span.ippon-icon.-size-24.-color-brand-primary.ippon-ion-hardware-chip-sharp(role=&quot;presentation&quot;)
+    .ippon-v-space.-gap-4.-left
+      span.ippon-text.-body.-color-neutral-tertiary-inversed Some key
+      span.ippon-text.-large.-label Description value
+    span.ippon-icon.-size-24.ippon-ion-chevron-forward(role=&quot;presentation&quot;)
+button.ippon-button-card.-border.-full-width
+  .ippon-h-space.-gap-16.-middle
+    span.ippon-icon.-size-24.-color-brand-primary.ippon-ion-hardware-chip-sharp(role=&quot;presentation&quot;)
+    .ippon-v-space.-gap-4.-left
+      span.ippon-text.-body.-color-neutral-tertiary-inversed Some key
+      span.ippon-text.-large.-label Description value
+    span.ippon-icon.-size-24.ippon-ion-chevron-forward(role=&quot;presentation&quot;)">Copy</button></div></div></div></div></div><div class="tikui-vertical-spacing--line"><div class="tikui-component"><div class="tikui-component--markdown markdown"><h2 id="card">Card</h2>
+<p>A basic card component that serves as a container for content. It provides a consistent surface with rounded corners, padding, and optional shadow and border styling.</p>
+<p><strong>Sizes:</strong></p>
+<ul>
+<li>Small <code>-small</code></li>
+<li>Medium (Default)</li>
+<li>Large <code>-large</code></li>
+</ul>
+<p><strong>Shadows:</strong></p>
+<ul>
+<li>No shadow (default)</li>
+<li>Shadow level 1 <code>-shadow-l1</code></li>
+<li>Shadow level 2 <code>-shadow-l2</code></li>
+<li>Shadow level 3 <code>-shadow-l3</code></li>
+<li>Shadow level 4 <code>-shadow-l4</code></li>
+<li>Shadow level 5 <code>-shadow-l5</code></li>
+</ul>
+<p><strong>Border:</strong></p>
+<ul>
+<li>No border (default)</li>
+<li>Border <code>-border</code></li>
+</ul></div><div class="tikui-component--render render"><iframe class="doc-iframe" src="../organism/card/card.render.html" height="200" title="Component rendering"></iframe></div><div class="tikui-component--code code"><div class="tikui-line-section -s24"><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-html">&lt;div class=&quot;ippon-card -shadow-l1 -small&quot;&gt;Card level 1 small
+&lt;/div&gt;
+&lt;div class=&quot;ippon-card -shadow-l2&quot;&gt;Card level 2
+&lt;/div&gt;
+&lt;div class=&quot;ippon-card -shadow-l3 -large&quot;&gt;Card level 3 large
+&lt;/div&gt;
+&lt;div class=&quot;ippon-card -shadow-l4&quot;&gt;Card level 4
+&lt;/div&gt;
+&lt;div class=&quot;ippon-card -shadow-l5&quot;&gt;Card level 5
+&lt;/div&gt;
+&lt;div class=&quot;ippon-card -border&quot;&gt;Card with border
+&lt;/div&gt;
+&lt;div class=&quot;ippon-card -shadow-l3 -border -small&quot;&gt;Card combination
+&lt;/div&gt;</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+&lt;div class=&quot;ippon-card -shadow-l1 -small&quot;&gt;Card level 1 small
+&lt;/div&gt;
+&lt;div class=&quot;ippon-card -shadow-l2&quot;&gt;Card level 2
+&lt;/div&gt;
+&lt;div class=&quot;ippon-card -shadow-l3 -large&quot;&gt;Card level 3 large
+&lt;/div&gt;
+&lt;div class=&quot;ippon-card -shadow-l4&quot;&gt;Card level 4
+&lt;/div&gt;
+&lt;div class=&quot;ippon-card -shadow-l5&quot;&gt;Card level 5
+&lt;/div&gt;
+&lt;div class=&quot;ippon-card -border&quot;&gt;Card with border
+&lt;/div&gt;
+&lt;div class=&quot;ippon-card -shadow-l3 -border -small&quot;&gt;Card combination
+&lt;/div&gt;">Copy</button></div><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-pug">.ippon-card.-shadow-l1.-small Card level 1 small
+.ippon-card.-shadow-l2 Card level 2
+.ippon-card.-shadow-l3.-large Card level 3 large
+.ippon-card.-shadow-l4 Card level 4
+.ippon-card.-shadow-l5 Card level 5
+.ippon-card.-border Card with border
+.ippon-card.-shadow-l3.-border.-small Card combination</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+.ippon-card.-shadow-l1.-small Card level 1 small
+.ippon-card.-shadow-l2 Card level 2
+.ippon-card.-shadow-l3.-large Card level 3 large
+.ippon-card.-shadow-l4 Card level 4
+.ippon-card.-shadow-l5 Card level 5
+.ippon-card.-border Card with border
+.ippon-card.-shadow-l3.-border.-small Card combination">Copy</button></div></div></div></div></div><div class="tikui-vertical-spacing--line"><div class="tikui-component"><div class="tikui-component--markdown markdown"><h2 id="container">Container</h2>
+<p>A container component that establishes a container query context. It allows child elements to use container queries to respond to the container's dimensions rather than the viewport size.</p>
+<p>The container uses <code>container-type: inline-size</code> to enable queries based on the container's inline (width) dimension.</p></div><div class="tikui-component--render render"><iframe class="doc-iframe" src="../organism/container/container.render.html" height="110" title="Component rendering"></iframe></div><div class="tikui-component--code code"><div class="tikui-line-section -s24"><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-html">&lt;div class=&quot;ippon-container&quot;&gt;
+  &lt;p&gt;Default container (inline-size)&lt;/p&gt;
+&lt;/div&gt;
+&lt;hr/&gt;
+&lt;div class=&quot;ippon-container&quot;&gt;
+  &lt;div class=&quot;ippon-grid -container-4 -container-m-12 -gap-16 -gap-l-32&quot;&gt;
+    &lt;div class=&quot;ippon-grid--slot&quot;&gt;Slot 1
+    &lt;/div&gt;
+    &lt;div class=&quot;ippon-grid--slot&quot;&gt;Slot 2
+    &lt;/div&gt;
+    &lt;div class=&quot;ippon-grid--slot&quot;&gt;Slot 3
+    &lt;/div&gt;
+    &lt;div class=&quot;ippon-grid--slot&quot;&gt;Slot 4
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+&lt;div class=&quot;ippon-container&quot;&gt;
+  &lt;p&gt;Default container (inline-size)&lt;/p&gt;
+&lt;/div&gt;
+&lt;hr/&gt;
+&lt;div class=&quot;ippon-container&quot;&gt;
+  &lt;div class=&quot;ippon-grid -container-4 -container-m-12 -gap-16 -gap-l-32&quot;&gt;
+    &lt;div class=&quot;ippon-grid--slot&quot;&gt;Slot 1
+    &lt;/div&gt;
+    &lt;div class=&quot;ippon-grid--slot&quot;&gt;Slot 2
+    &lt;/div&gt;
+    &lt;div class=&quot;ippon-grid--slot&quot;&gt;Slot 3
+    &lt;/div&gt;
+    &lt;div class=&quot;ippon-grid--slot&quot;&gt;Slot 4
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;">Copy</button></div><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-pug">.ippon-container
+  p Default container (inline-size)
+hr
+.ippon-container
+  .ippon-grid.-container-4.-container-m-12.-gap-16.-gap-l-32
+    .ippon-grid--slot Slot 1
+    .ippon-grid--slot Slot 2
+    .ippon-grid--slot Slot 3
+    .ippon-grid--slot Slot 4</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+.ippon-container
+  p Default container (inline-size)
+hr
+.ippon-container
+  .ippon-grid.-container-4.-container-m-12.-gap-16.-gap-l-32
+    .ippon-grid--slot Slot 1
+    .ippon-grid--slot Slot 2
+    .ippon-grid--slot Slot 3
+    .ippon-grid--slot Slot 4">Copy</button></div></div></div></div></div><div class="tikui-vertical-spacing--line"><div class="tikui-component"><div class="tikui-component--markdown markdown"><h2 id="header">Header</h2></div><div class="tikui-component--render render"><iframe class="doc-iframe" src="../organism/header/header.render.html" height="150" title="Component rendering"></iframe></div><div class="tikui-component--code code"><div class="tikui-line-section -s24"><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-html">&lt;div class=&quot;ippon-header&quot;&gt;
+  &lt;div class=&quot;ippon-header--slot&quot;&gt;Logo
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-header--slot&quot;&gt;
+    &lt;div class=&quot;ippon-tabs&quot; id=&quot;main-navigation&quot; role=&quot;tablist&quot;&gt;
+      &lt;button class=&quot;ippon-tab&quot; role=&quot;tab&quot; id=&quot;tab-1&quot; aria-controls=&quot;main-navigation&quot;&gt;Tab 1
+      &lt;/button&gt;
+      &lt;button class=&quot;ippon-tab&quot; role=&quot;tab&quot; id=&quot;tab-2&quot; aria-controls=&quot;main-navigation&quot; aria-selected=&quot;true&quot; tabindex=&quot;-1&quot;&gt;Tab 2
+      &lt;/button&gt;
+      &lt;a class=&quot;ippon-tab&quot; role=&quot;tab&quot; id=&quot;tab-3&quot; aria-controls=&quot;main-navigation&quot; href=&quot;#tab3&quot;&gt;Tab 3
+      &lt;/a&gt;
+      &lt;button class=&quot;ippon-tab&quot; role=&quot;tab&quot; id=&quot;tab-4&quot; aria-controls=&quot;main-navigation&quot;&gt;Tab 4
+      &lt;/button&gt;
+      &lt;button class=&quot;ippon-tab&quot; role=&quot;tab&quot; id=&quot;tab-5&quot; aria-controls=&quot;main-navigation&quot;&gt;Tab 5
+      &lt;/button&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+&lt;div class=&quot;ippon-header&quot;&gt;
+  &lt;div class=&quot;ippon-header--slot&quot;&gt;Logo
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-header--slot&quot;&gt;
+    &lt;div class=&quot;ippon-tabs&quot; id=&quot;main-navigation&quot; role=&quot;tablist&quot;&gt;
+      &lt;button class=&quot;ippon-tab&quot; role=&quot;tab&quot; id=&quot;tab-1&quot; aria-controls=&quot;main-navigation&quot;&gt;Tab 1
+      &lt;/button&gt;
+      &lt;button class=&quot;ippon-tab&quot; role=&quot;tab&quot; id=&quot;tab-2&quot; aria-controls=&quot;main-navigation&quot; aria-selected=&quot;true&quot; tabindex=&quot;-1&quot;&gt;Tab 2
+      &lt;/button&gt;
+      &lt;a class=&quot;ippon-tab&quot; role=&quot;tab&quot; id=&quot;tab-3&quot; aria-controls=&quot;main-navigation&quot; href=&quot;#tab3&quot;&gt;Tab 3
+      &lt;/a&gt;
+      &lt;button class=&quot;ippon-tab&quot; role=&quot;tab&quot; id=&quot;tab-4&quot; aria-controls=&quot;main-navigation&quot;&gt;Tab 4
+      &lt;/button&gt;
+      &lt;button class=&quot;ippon-tab&quot; role=&quot;tab&quot; id=&quot;tab-5&quot; aria-controls=&quot;main-navigation&quot;&gt;Tab 5
+      &lt;/button&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;">Copy</button></div><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-pug">.ippon-header
+  .ippon-header--slot Logo
+  .ippon-header--slot
+    #main-navigation.ippon-tabs(role=&quot;tablist&quot;)
+      button#tab-1.ippon-tab(role=&quot;tab&quot; aria-controls=&quot;main-navigation&quot;)
+        | Tab 1
+      button#tab-2.ippon-tab(role=&quot;tab&quot; aria-controls=&quot;main-navigation&quot; aria-selected=&quot;true&quot; tabindex=&quot;-1&quot;)
+        | Tab 2
+      a#tab-3.ippon-tab(role=&quot;tab&quot; aria-controls=&quot;main-navigation&quot; href=&quot;#tab3&quot;)
+        | Tab 3
+      button#tab-4.ippon-tab(role=&quot;tab&quot; aria-controls=&quot;main-navigation&quot;)
+        | Tab 4
+      button#tab-5.ippon-tab(role=&quot;tab&quot; aria-controls=&quot;main-navigation&quot;)
+        | Tab 5</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+.ippon-header
+  .ippon-header--slot Logo
+  .ippon-header--slot
+    #main-navigation.ippon-tabs(role=&quot;tablist&quot;)
+      button#tab-1.ippon-tab(role=&quot;tab&quot; aria-controls=&quot;main-navigation&quot;)
+        | Tab 1
+      button#tab-2.ippon-tab(role=&quot;tab&quot; aria-controls=&quot;main-navigation&quot; aria-selected=&quot;true&quot; tabindex=&quot;-1&quot;)
+        | Tab 2
+      a#tab-3.ippon-tab(role=&quot;tab&quot; aria-controls=&quot;main-navigation&quot; href=&quot;#tab3&quot;)
+        | Tab 3
+      button#tab-4.ippon-tab(role=&quot;tab&quot; aria-controls=&quot;main-navigation&quot;)
+        | Tab 4
+      button#tab-5.ippon-tab(role=&quot;tab&quot; aria-controls=&quot;main-navigation&quot;)
+        | Tab 5">Copy</button></div></div></div></div></div><div class="tikui-vertical-spacing--line"><div class="tikui-component"><div class="tikui-component--markdown markdown"><h2 id="modal">Modal</h2></div><div class="tikui-component--render render"><iframe class="doc-iframe" src="../organism/modal/modal.render.html" height="400" title="Component rendering"></iframe></div><div class="tikui-component--code code"><div class="tikui-line-section -s24"><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-html">&lt;button class=&quot;ippon-button&quot; command=&quot;show-modal&quot; commandfor=&quot;modal&quot;&gt;Open modal
+&lt;/button&gt;
+&lt;dialog class=&quot;ippon-modal&quot; id=&quot;modal&quot;&gt;
+  &lt;div class=&quot;ippon-modal--header&quot;&gt;
+    &lt;div class=&quot;ippon-h-space -gap-16 -middle&quot;&gt;
+      &lt;span class=&quot;ippon-icon -color-brand-primary ippon-ion-list-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+      &lt;div class=&quot;ippon-h-space--slot -expand&quot;&gt;
+        &lt;ippon-v-space&gt;
+          &lt;hgroup&gt;
+            &lt;div class=&quot;ippon-title -l5&quot;&gt;Modal title
+            &lt;/div&gt;
+            &lt;p class=&quot;ippon-text -small -body -color-neutral-tertiary-inversed&quot;&gt;Modal description
+            &lt;/p&gt;
+          &lt;/hgroup&gt;
+        &lt;/ippon-v-space&gt;
+      &lt;/div&gt;
+      &lt;button class=&quot;ippon-button -neutral -text&quot; command=&quot;close&quot; commandfor=&quot;modal&quot;&gt;
+        &lt;span class=&quot;ippon-button--icon ippon-ion-close&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+      &lt;/button&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;hr class=&quot;ippon-modal--separator&quot;/&gt;
+  &lt;div class=&quot;ippon-modal--body&quot;&gt;
+    &lt;span class=&quot;ippon-text -body&quot;&gt;Body
+    &lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-modal--footer&quot;&gt;
+    &lt;div class=&quot;ippon-h-space -gap-24 -middle&quot;&gt;
+      &lt;button class=&quot;ippon-button&quot; command=&quot;close&quot; commandfor=&quot;modal&quot;&gt;&lt;span class=&quot;ippon-button--text&quot;&gt;Close&lt;/span&gt;
+        &lt;span class=&quot;ippon-button--icon ippon-ion-close&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+      &lt;/button&gt;
+      &lt;button class=&quot;ippon-button -outline&quot; command=&quot;close&quot;&gt;&lt;span class=&quot;ippon-button--text&quot;&gt;Other&lt;/span&gt;
+        &lt;span class=&quot;ippon-button--icon ippon-ion-reload&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+      &lt;/button&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/dialog&gt;
+&lt;button class=&quot;ippon-button&quot; command=&quot;show-modal&quot; commandfor=&quot;modal-actions&quot;&gt;Open modal with actions
+&lt;/button&gt;
+&lt;dialog class=&quot;ippon-modal&quot; id=&quot;modal-actions&quot;&gt;
+  &lt;div class=&quot;ippon-modal--header&quot;&gt;
+    &lt;div class=&quot;ippon-h-space -gap-16 -middle&quot;&gt;
+      &lt;span class=&quot;ippon-icon -color-brand-primary ippon-ion-list-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+      &lt;div class=&quot;ippon-h-space--slot -expand&quot;&gt;
+        &lt;ippon-v-space&gt;
+          &lt;hgroup&gt;
+            &lt;div class=&quot;ippon-title -l5&quot;&gt;Modal title
+            &lt;/div&gt;
+            &lt;p class=&quot;ippon-text -small -body -color-neutral-tertiary-inversed&quot;&gt;Modal description
+            &lt;/p&gt;
+          &lt;/hgroup&gt;
+        &lt;/ippon-v-space&gt;
+      &lt;/div&gt;
+      &lt;button class=&quot;ippon-button -neutral -text&quot; command=&quot;close&quot; commandfor=&quot;modal-actions&quot;&gt;
+        &lt;span class=&quot;ippon-button--icon ippon-ion-close&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+      &lt;/button&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-modal--actions&quot;&gt;
+    &lt;div class=&quot;ippon-h-space -gap-24 -middle&quot;&gt;
+      &lt;button class=&quot;ippon-button -text -small&quot;&gt;Select all
+      &lt;/button&gt;
+      &lt;button class=&quot;ippon-button -neutral -text -small&quot;&gt;Unselect all
+      &lt;/button&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-modal--body&quot;&gt;
+    &lt;span class=&quot;ippon-text -body&quot;&gt;Body
+    &lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-modal--footer&quot;&gt;
+    &lt;div class=&quot;ippon-h-space -gap-24 -middle&quot;&gt;
+      &lt;button class=&quot;ippon-button&quot; command=&quot;close&quot; commandfor=&quot;modal-actions&quot;&gt;&lt;span class=&quot;ippon-button--text&quot;&gt;Close&lt;/span&gt;
+        &lt;span class=&quot;ippon-button--icon ippon-ion-close&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+      &lt;/button&gt;
+      &lt;button class=&quot;ippon-button -outline&quot; command=&quot;close&quot;&gt;&lt;span class=&quot;ippon-button--text&quot;&gt;Other&lt;/span&gt;
+        &lt;span class=&quot;ippon-button--icon ippon-ion-reload&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+      &lt;/button&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/dialog&gt;
+&lt;button class=&quot;ippon-button&quot; command=&quot;show-modal&quot; commandfor=&quot;modal-loading&quot;&gt;Open loading modal
+&lt;/button&gt;
+&lt;dialog class=&quot;ippon-modal&quot; id=&quot;modal-loading&quot;&gt;
+  &lt;div class=&quot;ippon-modal--header&quot;&gt;
+    &lt;div class=&quot;ippon-h-space -gap-16 -middle&quot;&gt;
+      &lt;span class=&quot;ippon-icon -size-32 -color-brand-primary ippon-ion-hourglass-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+      &lt;div class=&quot;ippon-h-space--slot -expand&quot;&gt;
+        &lt;ippon-v-space&gt;
+          &lt;hgroup&gt;
+            &lt;div class=&quot;ippon-title -l5&quot;&gt;Loading title
+            &lt;/div&gt;
+            &lt;p class=&quot;ippon-text -small -body -color-neutral-tertiary-inversed&quot;&gt;Please wait...
+            &lt;/p&gt;
+          &lt;/hgroup&gt;
+        &lt;/ippon-v-space&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;hr class=&quot;ippon-modal--separator&quot;/&gt;
+  &lt;div class=&quot;ippon-modal--body&quot;&gt;
+    &lt;div class=&quot;ippon-v-space -gap-16&quot;&gt;
+      &lt;div class=&quot;ippon-meter&quot; role=&quot;meter&quot; aria-valuenow=&quot;60&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;--ippon-meter-percentage: 60%&quot;&gt;&lt;/div&gt;
+      &lt;span class=&quot;ippon-text -body&quot;&gt;60%
+      &lt;/span&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-modal--footer&quot;&gt;
+    &lt;button class=&quot;ippon-button -neutral -outline&quot; command=&quot;close&quot; commandfor=&quot;modal-loading&quot;&gt;&lt;span class=&quot;ippon-button--text&quot;&gt;Close (demo only)&lt;/span&gt;
+      &lt;span class=&quot;ippon-button--icon ippon-ion-close&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+    &lt;/button&gt;
+  &lt;/div&gt;
+&lt;/dialog&gt;</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+&lt;button class=&quot;ippon-button&quot; command=&quot;show-modal&quot; commandfor=&quot;modal&quot;&gt;Open modal
+&lt;/button&gt;
+&lt;dialog class=&quot;ippon-modal&quot; id=&quot;modal&quot;&gt;
+  &lt;div class=&quot;ippon-modal--header&quot;&gt;
+    &lt;div class=&quot;ippon-h-space -gap-16 -middle&quot;&gt;
+      &lt;span class=&quot;ippon-icon -color-brand-primary ippon-ion-list-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+      &lt;div class=&quot;ippon-h-space--slot -expand&quot;&gt;
+        &lt;ippon-v-space&gt;
+          &lt;hgroup&gt;
+            &lt;div class=&quot;ippon-title -l5&quot;&gt;Modal title
+            &lt;/div&gt;
+            &lt;p class=&quot;ippon-text -small -body -color-neutral-tertiary-inversed&quot;&gt;Modal description
+            &lt;/p&gt;
+          &lt;/hgroup&gt;
+        &lt;/ippon-v-space&gt;
+      &lt;/div&gt;
+      &lt;button class=&quot;ippon-button -neutral -text&quot; command=&quot;close&quot; commandfor=&quot;modal&quot;&gt;
+        &lt;span class=&quot;ippon-button--icon ippon-ion-close&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+      &lt;/button&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;hr class=&quot;ippon-modal--separator&quot;/&gt;
+  &lt;div class=&quot;ippon-modal--body&quot;&gt;
+    &lt;span class=&quot;ippon-text -body&quot;&gt;Body
+    &lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-modal--footer&quot;&gt;
+    &lt;div class=&quot;ippon-h-space -gap-24 -middle&quot;&gt;
+      &lt;button class=&quot;ippon-button&quot; command=&quot;close&quot; commandfor=&quot;modal&quot;&gt;&lt;span class=&quot;ippon-button--text&quot;&gt;Close&lt;/span&gt;
+        &lt;span class=&quot;ippon-button--icon ippon-ion-close&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+      &lt;/button&gt;
+      &lt;button class=&quot;ippon-button -outline&quot; command=&quot;close&quot;&gt;&lt;span class=&quot;ippon-button--text&quot;&gt;Other&lt;/span&gt;
+        &lt;span class=&quot;ippon-button--icon ippon-ion-reload&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+      &lt;/button&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/dialog&gt;
+&lt;button class=&quot;ippon-button&quot; command=&quot;show-modal&quot; commandfor=&quot;modal-actions&quot;&gt;Open modal with actions
+&lt;/button&gt;
+&lt;dialog class=&quot;ippon-modal&quot; id=&quot;modal-actions&quot;&gt;
+  &lt;div class=&quot;ippon-modal--header&quot;&gt;
+    &lt;div class=&quot;ippon-h-space -gap-16 -middle&quot;&gt;
+      &lt;span class=&quot;ippon-icon -color-brand-primary ippon-ion-list-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+      &lt;div class=&quot;ippon-h-space--slot -expand&quot;&gt;
+        &lt;ippon-v-space&gt;
+          &lt;hgroup&gt;
+            &lt;div class=&quot;ippon-title -l5&quot;&gt;Modal title
+            &lt;/div&gt;
+            &lt;p class=&quot;ippon-text -small -body -color-neutral-tertiary-inversed&quot;&gt;Modal description
+            &lt;/p&gt;
+          &lt;/hgroup&gt;
+        &lt;/ippon-v-space&gt;
+      &lt;/div&gt;
+      &lt;button class=&quot;ippon-button -neutral -text&quot; command=&quot;close&quot; commandfor=&quot;modal-actions&quot;&gt;
+        &lt;span class=&quot;ippon-button--icon ippon-ion-close&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+      &lt;/button&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-modal--actions&quot;&gt;
+    &lt;div class=&quot;ippon-h-space -gap-24 -middle&quot;&gt;
+      &lt;button class=&quot;ippon-button -text -small&quot;&gt;Select all
+      &lt;/button&gt;
+      &lt;button class=&quot;ippon-button -neutral -text -small&quot;&gt;Unselect all
+      &lt;/button&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-modal--body&quot;&gt;
+    &lt;span class=&quot;ippon-text -body&quot;&gt;Body
+    &lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-modal--footer&quot;&gt;
+    &lt;div class=&quot;ippon-h-space -gap-24 -middle&quot;&gt;
+      &lt;button class=&quot;ippon-button&quot; command=&quot;close&quot; commandfor=&quot;modal-actions&quot;&gt;&lt;span class=&quot;ippon-button--text&quot;&gt;Close&lt;/span&gt;
+        &lt;span class=&quot;ippon-button--icon ippon-ion-close&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+      &lt;/button&gt;
+      &lt;button class=&quot;ippon-button -outline&quot; command=&quot;close&quot;&gt;&lt;span class=&quot;ippon-button--text&quot;&gt;Other&lt;/span&gt;
+        &lt;span class=&quot;ippon-button--icon ippon-ion-reload&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+      &lt;/button&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/dialog&gt;
+&lt;button class=&quot;ippon-button&quot; command=&quot;show-modal&quot; commandfor=&quot;modal-loading&quot;&gt;Open loading modal
+&lt;/button&gt;
+&lt;dialog class=&quot;ippon-modal&quot; id=&quot;modal-loading&quot;&gt;
+  &lt;div class=&quot;ippon-modal--header&quot;&gt;
+    &lt;div class=&quot;ippon-h-space -gap-16 -middle&quot;&gt;
+      &lt;span class=&quot;ippon-icon -size-32 -color-brand-primary ippon-ion-hourglass-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+      &lt;div class=&quot;ippon-h-space--slot -expand&quot;&gt;
+        &lt;ippon-v-space&gt;
+          &lt;hgroup&gt;
+            &lt;div class=&quot;ippon-title -l5&quot;&gt;Loading title
+            &lt;/div&gt;
+            &lt;p class=&quot;ippon-text -small -body -color-neutral-tertiary-inversed&quot;&gt;Please wait...
+            &lt;/p&gt;
+          &lt;/hgroup&gt;
+        &lt;/ippon-v-space&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;hr class=&quot;ippon-modal--separator&quot;/&gt;
+  &lt;div class=&quot;ippon-modal--body&quot;&gt;
+    &lt;div class=&quot;ippon-v-space -gap-16&quot;&gt;
+      &lt;div class=&quot;ippon-meter&quot; role=&quot;meter&quot; aria-valuenow=&quot;60&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;--ippon-meter-percentage: 60%&quot;&gt;&lt;/div&gt;
+      &lt;span class=&quot;ippon-text -body&quot;&gt;60%
+      &lt;/span&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-modal--footer&quot;&gt;
+    &lt;button class=&quot;ippon-button -neutral -outline&quot; command=&quot;close&quot; commandfor=&quot;modal-loading&quot;&gt;&lt;span class=&quot;ippon-button--text&quot;&gt;Close (demo only)&lt;/span&gt;
+      &lt;span class=&quot;ippon-button--icon ippon-ion-close&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+    &lt;/button&gt;
+  &lt;/div&gt;
+&lt;/dialog&gt;">Copy</button></div><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-pug">button.ippon-button(command=&quot;show-modal&quot; commandfor=&quot;modal&quot;)
+  | Open modal
+dialog#modal.ippon-modal
+  .ippon-modal--header
+    .ippon-h-space.-gap-16.-middle
+      span.ippon-icon.-color-brand-primary.ippon-ion-list-outline(role=&quot;presentation&quot;)
+      .ippon-h-space--slot.-expand
+        ippon-v-space
+          hgroup
+            .ippon-title.-l5 Modal title
+            p.ippon-text.-small.-body.-color-neutral-tertiary-inversed Modal description
+      button.ippon-button.-neutral.-text(command=&quot;close&quot; commandfor=&quot;modal&quot;)
+        span.ippon-button--icon.ippon-ion-close(role=&quot;presentation&quot;)
+  hr.ippon-modal--separator
+  .ippon-modal--body
+    span.ippon-text.-body Body
+  .ippon-modal--footer
+    .ippon-h-space.-gap-24.-middle
+      button.ippon-button(command=&quot;close&quot; commandfor=&quot;modal&quot;)
+        span.ippon-button--text Close
+        span.ippon-button--icon.ippon-ion-close(role=&quot;presentation&quot;)
+      button.ippon-button.-outline(command=&quot;close&quot;)
+        span.ippon-button--text Other
+        span.ippon-button--icon.ippon-ion-reload(role=&quot;presentation&quot;)
+button.ippon-button(command=&quot;show-modal&quot; commandfor=&quot;modal-actions&quot;)
+  | Open modal with actions
+dialog#modal-actions.ippon-modal
+  .ippon-modal--header
+    .ippon-h-space.-gap-16.-middle
+      span.ippon-icon.-color-brand-primary.ippon-ion-list-outline(role=&quot;presentation&quot;)
+      .ippon-h-space--slot.-expand
+        ippon-v-space
+          hgroup
+            .ippon-title.-l5 Modal title
+            p.ippon-text.-small.-body.-color-neutral-tertiary-inversed Modal description
+      button.ippon-button.-neutral.-text(command=&quot;close&quot; commandfor=&quot;modal-actions&quot;)
+        span.ippon-button--icon.ippon-ion-close(role=&quot;presentation&quot;)
+  .ippon-modal--actions
+    .ippon-h-space.-gap-24.-middle
+      button.ippon-button.-text.-small Select all
+      button.ippon-button.-neutral.-text.-small Unselect all
+  .ippon-modal--body
+    span.ippon-text.-body Body
+  .ippon-modal--footer
+    .ippon-h-space.-gap-24.-middle
+      button.ippon-button(command=&quot;close&quot; commandfor=&quot;modal-actions&quot;)
+        span.ippon-button--text Close
+        span.ippon-button--icon.ippon-ion-close(role=&quot;presentation&quot;)
+      button.ippon-button.-outline(command=&quot;close&quot;)
+        span.ippon-button--text Other
+        span.ippon-button--icon.ippon-ion-reload(role=&quot;presentation&quot;)
+button.ippon-button(command=&quot;show-modal&quot; commandfor=&quot;modal-loading&quot;)
+  | Open loading modal
+dialog#modal-loading.ippon-modal
+  .ippon-modal--header
+    .ippon-h-space.-gap-16.-middle
+      span.ippon-icon.-size-32.-color-brand-primary.ippon-ion-hourglass-outline(role=&quot;presentation&quot;)
+      .ippon-h-space--slot.-expand
+        ippon-v-space
+          hgroup
+            .ippon-title.-l5 Loading title
+            p.ippon-text.-small.-body.-color-neutral-tertiary-inversed Please wait...
+  hr.ippon-modal--separator
+  .ippon-modal--body
+    .ippon-v-space.-gap-16
+      .ippon-meter(role=&quot;meter&quot; aria-valuenow=&quot;60&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;--ippon-meter-percentage: 60%&quot;)
+      span.ippon-text.-body 60%
+  .ippon-modal--footer
+    button.ippon-button.-neutral.-outline(command=&quot;close&quot; commandfor=&quot;modal-loading&quot;)
+      span.ippon-button--text Close (demo only)
+      span.ippon-button--icon.ippon-ion-close(role=&quot;presentation&quot;)</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+button.ippon-button(command=&quot;show-modal&quot; commandfor=&quot;modal&quot;)
+  | Open modal
+dialog#modal.ippon-modal
+  .ippon-modal--header
+    .ippon-h-space.-gap-16.-middle
+      span.ippon-icon.-color-brand-primary.ippon-ion-list-outline(role=&quot;presentation&quot;)
+      .ippon-h-space--slot.-expand
+        ippon-v-space
+          hgroup
+            .ippon-title.-l5 Modal title
+            p.ippon-text.-small.-body.-color-neutral-tertiary-inversed Modal description
+      button.ippon-button.-neutral.-text(command=&quot;close&quot; commandfor=&quot;modal&quot;)
+        span.ippon-button--icon.ippon-ion-close(role=&quot;presentation&quot;)
+  hr.ippon-modal--separator
+  .ippon-modal--body
+    span.ippon-text.-body Body
+  .ippon-modal--footer
+    .ippon-h-space.-gap-24.-middle
+      button.ippon-button(command=&quot;close&quot; commandfor=&quot;modal&quot;)
+        span.ippon-button--text Close
+        span.ippon-button--icon.ippon-ion-close(role=&quot;presentation&quot;)
+      button.ippon-button.-outline(command=&quot;close&quot;)
+        span.ippon-button--text Other
+        span.ippon-button--icon.ippon-ion-reload(role=&quot;presentation&quot;)
+button.ippon-button(command=&quot;show-modal&quot; commandfor=&quot;modal-actions&quot;)
+  | Open modal with actions
+dialog#modal-actions.ippon-modal
+  .ippon-modal--header
+    .ippon-h-space.-gap-16.-middle
+      span.ippon-icon.-color-brand-primary.ippon-ion-list-outline(role=&quot;presentation&quot;)
+      .ippon-h-space--slot.-expand
+        ippon-v-space
+          hgroup
+            .ippon-title.-l5 Modal title
+            p.ippon-text.-small.-body.-color-neutral-tertiary-inversed Modal description
+      button.ippon-button.-neutral.-text(command=&quot;close&quot; commandfor=&quot;modal-actions&quot;)
+        span.ippon-button--icon.ippon-ion-close(role=&quot;presentation&quot;)
+  .ippon-modal--actions
+    .ippon-h-space.-gap-24.-middle
+      button.ippon-button.-text.-small Select all
+      button.ippon-button.-neutral.-text.-small Unselect all
+  .ippon-modal--body
+    span.ippon-text.-body Body
+  .ippon-modal--footer
+    .ippon-h-space.-gap-24.-middle
+      button.ippon-button(command=&quot;close&quot; commandfor=&quot;modal-actions&quot;)
+        span.ippon-button--text Close
+        span.ippon-button--icon.ippon-ion-close(role=&quot;presentation&quot;)
+      button.ippon-button.-outline(command=&quot;close&quot;)
+        span.ippon-button--text Other
+        span.ippon-button--icon.ippon-ion-reload(role=&quot;presentation&quot;)
+button.ippon-button(command=&quot;show-modal&quot; commandfor=&quot;modal-loading&quot;)
+  | Open loading modal
+dialog#modal-loading.ippon-modal
+  .ippon-modal--header
+    .ippon-h-space.-gap-16.-middle
+      span.ippon-icon.-size-32.-color-brand-primary.ippon-ion-hourglass-outline(role=&quot;presentation&quot;)
+      .ippon-h-space--slot.-expand
+        ippon-v-space
+          hgroup
+            .ippon-title.-l5 Loading title
+            p.ippon-text.-small.-body.-color-neutral-tertiary-inversed Please wait...
+  hr.ippon-modal--separator
+  .ippon-modal--body
+    .ippon-v-space.-gap-16
+      .ippon-meter(role=&quot;meter&quot; aria-valuenow=&quot;60&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;--ippon-meter-percentage: 60%&quot;)
+      span.ippon-text.-body 60%
+  .ippon-modal--footer
+    button.ippon-button.-neutral.-outline(command=&quot;close&quot; commandfor=&quot;modal-loading&quot;)
+      span.ippon-button--text Close (demo only)
+      span.ippon-button--icon.ippon-ion-close(role=&quot;presentation&quot;)">Copy</button></div></div></div></div></div><div class="tikui-vertical-spacing--line"><div class="tikui-component"><div class="tikui-component--markdown markdown"><h2 id="horizontalspacehspace">Horizontal space (h-space)</h2>
+<p>The <code>h-space</code> organism represents horizontal spaces between elements.</p>
+<p><strong>Gap</strong></p>
+<p>The <code>-gap-{size}</code> alternative specifies the gap between child elements.</p>
+<p><strong>Tag</strong></p>
+<p>The <code>tag</code> property allows specifying a custom HTML element (e.g., <code>div</code>, <code>section</code>, <code>article</code>). Defaults to <code>div</code>.</p>
+<p><strong>Vertical Alignment</strong></p>
+<p>The following alternatives control the vertical alignment of child elements:</p>
+<ul>
+<li><code>-top</code>: Vertically align items to the top</li>
+<li><code>-middle</code>: Vertically align items to the middle</li>
+<li><code>-bottom</code>: Vertically align items to the bottom</li>
+<li><code>-left</code>: Horizontally align items to the left</li>
+<li><code>-center</code>: Horizontally align items to the center</li>
+<li><code>-right</code>: Horizontally align items to the right</li>
+</ul></div><div class="tikui-component--render render"><iframe class="doc-iframe" src="../organism/h-space/h-space.render.html" height="800" title="Component rendering"></iframe></div><div class="tikui-component--code code"><div class="tikui-line-section -s24"><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-html">&lt;div class=&quot;ippon-h-space&quot;&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;ippon-h-space -gap-8&quot;&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;ippon-h-space -gap-32 -middle&quot;&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-16); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-8); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;ippon-h-space -gap-16 -top&quot;&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-16); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-8); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;ippon-h-space -gap-20 -bottom&quot;&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-16); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-8); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;ippon-h-space -gap-32 -left&quot;&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;ippon-h-space -gap-16 -center&quot;&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;ippon-h-space -gap-20 -right&quot;&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;ippon-h-space -gap-20 -space-between&quot;&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;ippon-h-space -gap-16 -stretch&quot;&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div class=&quot;ippon-h-space--slot -expand&quot;&gt;
+    &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;ippon-h-space -gap-16 -wrap&quot;&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;section class=&quot;ippon-h-space -gap-16&quot;&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+&lt;/section&gt;</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+&lt;div class=&quot;ippon-h-space&quot;&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;ippon-h-space -gap-8&quot;&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;ippon-h-space -gap-32 -middle&quot;&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-16); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-8); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;ippon-h-space -gap-16 -top&quot;&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-16); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-8); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;ippon-h-space -gap-20 -bottom&quot;&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-16); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-8); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;ippon-h-space -gap-32 -left&quot;&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;ippon-h-space -gap-16 -center&quot;&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;ippon-h-space -gap-20 -right&quot;&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;ippon-h-space -gap-20 -space-between&quot;&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;ippon-h-space -gap-16 -stretch&quot;&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div class=&quot;ippon-h-space--slot -expand&quot;&gt;
+    &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;ippon-h-space -gap-16 -wrap&quot;&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;section class=&quot;ippon-h-space -gap-16&quot;&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+&lt;/section&gt;">Copy</button></div><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-pug">.ippon-h-space
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+.ippon-h-space.-gap-8
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+.ippon-h-space.-gap-32.-middle
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-16); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-8); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+.ippon-h-space.-gap-16.-top
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-16); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-8); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+.ippon-h-space.-gap-20.-bottom
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-16); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-8); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+.ippon-h-space.-gap-32.-left
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+.ippon-h-space.-gap-16.-center
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+.ippon-h-space.-gap-20.-right
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+.ippon-h-space.-gap-20.-space-between
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+.ippon-h-space.-gap-16.-stretch
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  .ippon-h-space--slot.-expand
+    div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+.ippon-h-space.-gap-16.-wrap
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+section.ippon-h-space.-gap-16
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+.ippon-h-space
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+.ippon-h-space.-gap-8
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+.ippon-h-space.-gap-32.-middle
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-16); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-8); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+.ippon-h-space.-gap-16.-top
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-16); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-8); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+.ippon-h-space.-gap-20.-bottom
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-16); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-8); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+.ippon-h-space.-gap-32.-left
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+.ippon-h-space.-gap-16.-center
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+.ippon-h-space.-gap-20.-right
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+.ippon-h-space.-gap-20.-space-between
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+.ippon-h-space.-gap-16.-stretch
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  .ippon-h-space--slot.-expand
+    div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+.ippon-h-space.-gap-16.-wrap
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+section.ippon-h-space.-gap-16
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)">Copy</button></div></div></div></div></div><div class="tikui-vertical-spacing--line"><div class="tikui-component"><div class="tikui-component--markdown markdown"><h2 id="verticalspacevspace">Vertical space (v-space)</h2>
+<p>The <code>v-space</code> organism represents vertical spaces between elements.</p>
+<p><strong>Gap</strong></p>
+<p>The <code>-gap-{size}</code> alternative specifies the gap between child elements.</p>
+<p><strong>Tag</strong></p>
+<p>The <code>tag</code> property allows specifying a custom HTML element (e.g., <code>div</code>, <code>section</code>, <code>article</code>). Defaults to <code>div</code>.</p>
+<p><strong>Alignment</strong></p>
+<p>The following alternatives control the horizontal alignment of child elements:</p>
+<ul>
+<li><code>-left</code>: Align items to the left (flex-start)</li>
+<li><code>-center</code>: Center align items</li>
+<li><code>-justify</code>: Stretch items to full width (stretch)</li>
+<li><code>-right</code>: Align items to the right (flex-end)</li>
+</ul></div><div class="tikui-component--render render"><iframe class="doc-iframe" src="../organism/v-space/v-space.render.html" height="1120" title="Component rendering"></iframe></div><div class="tikui-component--code code"><div class="tikui-line-section -s24"><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-html">&lt;div class=&quot;ippon-v-space&quot;&gt;
+  &lt;div style=&quot;width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;ippon-v-space -gap-8&quot;&gt;
+  &lt;div style=&quot;width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;ippon-v-space -gap-32 -center&quot;&gt;
+  &lt;div style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;ippon-v-space -gap-16 -left&quot;&gt;
+  &lt;div style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;ippon-v-space -gap-20 -right&quot;&gt;
+  &lt;div style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;ippon-v-space -gap-24 -justify&quot;&gt;
+  &lt;div style=&quot;width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;section class=&quot;ippon-v-space -gap-16&quot;&gt;
+  &lt;div style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+&lt;/section&gt;</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+&lt;div class=&quot;ippon-v-space&quot;&gt;
+  &lt;div style=&quot;width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;ippon-v-space -gap-8&quot;&gt;
+  &lt;div style=&quot;width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;ippon-v-space -gap-32 -center&quot;&gt;
+  &lt;div style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;ippon-v-space -gap-16 -left&quot;&gt;
+  &lt;div style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;ippon-v-space -gap-20 -right&quot;&gt;
+  &lt;div style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;ippon-v-space -gap-24 -justify&quot;&gt;
+  &lt;div style=&quot;width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;section class=&quot;ippon-v-space -gap-16&quot;&gt;
+  &lt;div style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+  &lt;div style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;&gt;&lt;/div&gt;
+&lt;/section&gt;">Copy</button></div><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-pug">.ippon-v-space
+  div(style=&quot;width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+.ippon-v-space.-gap-8
+  div(style=&quot;width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+.ippon-v-space.-gap-32.-center
+  div(style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+.ippon-v-space.-gap-16.-left
+  div(style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+.ippon-v-space.-gap-20.-right
+  div(style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+.ippon-v-space.-gap-24.-justify
+  div(style=&quot;width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+section.ippon-v-space.-gap-16
+  div(style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+.ippon-v-space
+  div(style=&quot;width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+.ippon-v-space.-gap-8
+  div(style=&quot;width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+.ippon-v-space.-gap-32.-center
+  div(style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+.ippon-v-space.-gap-16.-left
+  div(style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+.ippon-v-space.-gap-20.-right
+  div(style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+.ippon-v-space.-gap-24.-justify
+  div(style=&quot;width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: 100%; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+section.ippon-v-space.-gap-16
+  div(style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)
+  div(style=&quot;width: 100px; height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)&quot;)">Copy</button></div></div></div></div></div><div class="tikui-vertical-spacing--line"><div class="tikui-component"><div class="tikui-component--markdown markdown"><h2 id="grid">Grid</h2></div><div class="tikui-component--render render"><iframe class="doc-iframe" src="../organism/grid/grid.render.html" height="550" title="Component rendering"></iframe></div><div class="tikui-component--code code"><div class="tikui-line-section -s24"><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-html">&lt;div class=&quot;ippon-grid -media-4 -media-tab-12 -gap-16 -gap-desktop-s-32&quot;&gt;
+  &lt;div class=&quot;ippon-grid--slot -col-2 -col-tab-4&quot;&gt;
+    &lt;div class=&quot;ipp-doc-slot&quot;&gt;Slot (-col-2 -col-tab-4)&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-grid--slot -col-2 -col-tab-4&quot;&gt;
+    &lt;div class=&quot;ipp-doc-slot&quot;&gt;Slot (-col-2 -col-tab-4)&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-grid--slot -col-4 -col-tab-4&quot;&gt;
+    &lt;div class=&quot;ipp-doc-slot&quot;&gt;Slot (-col-4 -col-tab-4)&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-grid--slot -col-4 -col-tab-6&quot;&gt;
+    &lt;div class=&quot;ipp-doc-slot&quot;&gt;Slot (-col-4 -col-tab-6)&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-grid--slot -col-4 -col-tab-6&quot;&gt;
+    &lt;div class=&quot;ipp-doc-slot&quot;&gt;Slot (-col-4 -col-tab-6)&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-grid--slot -col-1 -col-tab-2&quot;&gt;
+    &lt;div class=&quot;ipp-doc-slot&quot;&gt;Slot (-col-1 -col-tab-2)&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-grid--slot -col-3 -col-tab-10&quot;&gt;
+    &lt;div class=&quot;ipp-doc-slot&quot;&gt;Slot (-col-3 -col-tab-10)&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;hr/&gt;
+&lt;div class=&quot;ippon-grid -container-4 -container-m-12 -gap-16 -gap-l-32&quot;&gt;
+  &lt;div class=&quot;ippon-grid--slot -col-2 -col-m-4&quot;&gt;
+    &lt;div class=&quot;ipp-doc-slot&quot;&gt;Slot (-col-2 -col-m-4)&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-grid--slot -col-2 -col-m-4&quot;&gt;
+    &lt;div class=&quot;ipp-doc-slot&quot;&gt;Slot (-col-2 -col-m-4)&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-grid--slot -col-4 -col-m-4&quot;&gt;
+    &lt;div class=&quot;ipp-doc-slot&quot;&gt;Slot (-col-4 -col-m-4)&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-grid--slot -col-4 -col-m-6&quot;&gt;
+    &lt;div class=&quot;ipp-doc-slot&quot;&gt;Slot (-col-4 -col-m-6)&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-grid--slot -col-4 -col-m-6&quot;&gt;
+    &lt;div class=&quot;ipp-doc-slot&quot;&gt;Slot (-col-4 -col-m-6)&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-grid--slot -col-1 -col-m-2&quot;&gt;
+    &lt;div class=&quot;ipp-doc-slot&quot;&gt;Slot (-col-1 -col-m-2)&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-grid--slot -col-3 -col-m-10&quot;&gt;
+    &lt;div class=&quot;ipp-doc-slot&quot;&gt;Slot (-col-3 -col-m-10)&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+&lt;div class=&quot;ippon-grid -media-4 -media-tab-12 -gap-16 -gap-desktop-s-32&quot;&gt;
+  &lt;div class=&quot;ippon-grid--slot -col-2 -col-tab-4&quot;&gt;
+    &lt;div class=&quot;ipp-doc-slot&quot;&gt;Slot (-col-2 -col-tab-4)&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-grid--slot -col-2 -col-tab-4&quot;&gt;
+    &lt;div class=&quot;ipp-doc-slot&quot;&gt;Slot (-col-2 -col-tab-4)&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-grid--slot -col-4 -col-tab-4&quot;&gt;
+    &lt;div class=&quot;ipp-doc-slot&quot;&gt;Slot (-col-4 -col-tab-4)&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-grid--slot -col-4 -col-tab-6&quot;&gt;
+    &lt;div class=&quot;ipp-doc-slot&quot;&gt;Slot (-col-4 -col-tab-6)&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-grid--slot -col-4 -col-tab-6&quot;&gt;
+    &lt;div class=&quot;ipp-doc-slot&quot;&gt;Slot (-col-4 -col-tab-6)&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-grid--slot -col-1 -col-tab-2&quot;&gt;
+    &lt;div class=&quot;ipp-doc-slot&quot;&gt;Slot (-col-1 -col-tab-2)&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-grid--slot -col-3 -col-tab-10&quot;&gt;
+    &lt;div class=&quot;ipp-doc-slot&quot;&gt;Slot (-col-3 -col-tab-10)&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;hr/&gt;
+&lt;div class=&quot;ippon-grid -container-4 -container-m-12 -gap-16 -gap-l-32&quot;&gt;
+  &lt;div class=&quot;ippon-grid--slot -col-2 -col-m-4&quot;&gt;
+    &lt;div class=&quot;ipp-doc-slot&quot;&gt;Slot (-col-2 -col-m-4)&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-grid--slot -col-2 -col-m-4&quot;&gt;
+    &lt;div class=&quot;ipp-doc-slot&quot;&gt;Slot (-col-2 -col-m-4)&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-grid--slot -col-4 -col-m-4&quot;&gt;
+    &lt;div class=&quot;ipp-doc-slot&quot;&gt;Slot (-col-4 -col-m-4)&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-grid--slot -col-4 -col-m-6&quot;&gt;
+    &lt;div class=&quot;ipp-doc-slot&quot;&gt;Slot (-col-4 -col-m-6)&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-grid--slot -col-4 -col-m-6&quot;&gt;
+    &lt;div class=&quot;ipp-doc-slot&quot;&gt;Slot (-col-4 -col-m-6)&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-grid--slot -col-1 -col-m-2&quot;&gt;
+    &lt;div class=&quot;ipp-doc-slot&quot;&gt;Slot (-col-1 -col-m-2)&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-grid--slot -col-3 -col-m-10&quot;&gt;
+    &lt;div class=&quot;ipp-doc-slot&quot;&gt;Slot (-col-3 -col-m-10)&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;">Copy</button></div><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-pug">.ippon-grid.-media-4.-media-tab-12.-gap-16.-gap-desktop-s-32
+  .ippon-grid--slot.-col-2.-col-tab-4
+    .ipp-doc-slot Slot (-col-2 -col-tab-4)
+  .ippon-grid--slot.-col-2.-col-tab-4
+    .ipp-doc-slot Slot (-col-2 -col-tab-4)
+  .ippon-grid--slot.-col-4.-col-tab-4
+    .ipp-doc-slot Slot (-col-4 -col-tab-4)
+  .ippon-grid--slot.-col-4.-col-tab-6
+    .ipp-doc-slot Slot (-col-4 -col-tab-6)
+  .ippon-grid--slot.-col-4.-col-tab-6
+    .ipp-doc-slot Slot (-col-4 -col-tab-6)
+  .ippon-grid--slot.-col-1.-col-tab-2
+    .ipp-doc-slot Slot (-col-1 -col-tab-2)
+  .ippon-grid--slot.-col-3.-col-tab-10
+    .ipp-doc-slot Slot (-col-3 -col-tab-10)
+hr
+.ippon-grid.-container-4.-container-m-12.-gap-16.-gap-l-32
+  .ippon-grid--slot.-col-2.-col-m-4
+    .ipp-doc-slot Slot (-col-2 -col-m-4)
+  .ippon-grid--slot.-col-2.-col-m-4
+    .ipp-doc-slot Slot (-col-2 -col-m-4)
+  .ippon-grid--slot.-col-4.-col-m-4
+    .ipp-doc-slot Slot (-col-4 -col-m-4)
+  .ippon-grid--slot.-col-4.-col-m-6
+    .ipp-doc-slot Slot (-col-4 -col-m-6)
+  .ippon-grid--slot.-col-4.-col-m-6
+    .ipp-doc-slot Slot (-col-4 -col-m-6)
+  .ippon-grid--slot.-col-1.-col-m-2
+    .ipp-doc-slot Slot (-col-1 -col-m-2)
+  .ippon-grid--slot.-col-3.-col-m-10
+    .ipp-doc-slot Slot (-col-3 -col-m-10)</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+.ippon-grid.-media-4.-media-tab-12.-gap-16.-gap-desktop-s-32
+  .ippon-grid--slot.-col-2.-col-tab-4
+    .ipp-doc-slot Slot (-col-2 -col-tab-4)
+  .ippon-grid--slot.-col-2.-col-tab-4
+    .ipp-doc-slot Slot (-col-2 -col-tab-4)
+  .ippon-grid--slot.-col-4.-col-tab-4
+    .ipp-doc-slot Slot (-col-4 -col-tab-4)
+  .ippon-grid--slot.-col-4.-col-tab-6
+    .ipp-doc-slot Slot (-col-4 -col-tab-6)
+  .ippon-grid--slot.-col-4.-col-tab-6
+    .ipp-doc-slot Slot (-col-4 -col-tab-6)
+  .ippon-grid--slot.-col-1.-col-tab-2
+    .ipp-doc-slot Slot (-col-1 -col-tab-2)
+  .ippon-grid--slot.-col-3.-col-tab-10
+    .ipp-doc-slot Slot (-col-3 -col-tab-10)
+hr
+.ippon-grid.-container-4.-container-m-12.-gap-16.-gap-l-32
+  .ippon-grid--slot.-col-2.-col-m-4
+    .ipp-doc-slot Slot (-col-2 -col-m-4)
+  .ippon-grid--slot.-col-2.-col-m-4
+    .ipp-doc-slot Slot (-col-2 -col-m-4)
+  .ippon-grid--slot.-col-4.-col-m-4
+    .ipp-doc-slot Slot (-col-4 -col-m-4)
+  .ippon-grid--slot.-col-4.-col-m-6
+    .ipp-doc-slot Slot (-col-4 -col-m-6)
+  .ippon-grid--slot.-col-4.-col-m-6
+    .ipp-doc-slot Slot (-col-4 -col-m-6)
+  .ippon-grid--slot.-col-1.-col-m-2
+    .ipp-doc-slot Slot (-col-1 -col-m-2)
+  .ippon-grid--slot.-col-3.-col-m-10
+    .ipp-doc-slot Slot (-col-3 -col-m-10)">Copy</button></div></div></div></div></div></div></div></div></div></div><script src="../lib/prismjs/prism.js"></script><script src="../lib/prismjs/prism-pug.js"></script><script src="../documentation/scripts/tikui.js"></script></body></html>