Tangible Pattern Library

Notations 

<table class="dst-table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Attribute</th>
            <th>Example</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Underline Cyan</td>
            <td><code>data-notation="underline-cyan"</code></td>
            <td>
                <p class="u-primary-typo-level-4">Lorem ipsum dolor, sit <span class="notation" data-notation="underline-cyan">amet consectetur</span> adipisicing elit.</p>
                </span>
            </td>
        </tr>
        <tr>
            <td>Circle Cyan</td>
            <td><code>data-notation="circle-cyan"</code></td>
            <td>
                <p class="u-primary-typo-level-4">Lorem ipsum dolor, sit <span class="notation" data-notation="circle-cyan">amet consectetur</span> adipisicing elit.</p>
                </span>
            </td>
        </tr>
        <tr>
            <td>Highlight Cyan</td>
            <td><code>data-notation="highlight-cyan"</code></td>
            <td>
                <p class="u-primary-typo-level-4">Lorem ipsum dolor, sit <span class="notation" data-notation="highlight-cyan">amet consectetur</span> adipisicing elit.</p>
                </span>
            </td>
        </tr>
        <tr>
            <td>Underline CTA Accent</td>
            <td><code>data-notation="underline-cta-accent"</code></td>
            <td>
                <p class="u-primary-typo-level-4">Lorem ipsum dolor, sit <span class="notation" data-notation="underline-cta-accent">amet consectetur</span> adipisicing elit.</p>
                </span>
            </td>
        </tr>
        <tr>
            <td>Circle Accent</td>
            <td><code>data-notation="circle-accent"</code></td>
            <td>
                <p class="u-primary-typo-level-4">Lorem ipsum dolor, sit <span class="notation" data-notation="circle-accent">amet consectetur</span> adipisicing elit.</p>
                </span>
            </td>
        </tr>
    </tbody>
</table>
 
<table class="dst-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Attribute</th>
      <th>Example</th>
    </tr>
  </thead>
  <tbody>
    {% for notation in notations %}
    <tr>
      <td>{{ notation.name }}</td>
      <td><code>data-notation="{{ notation.attr }}"</code></td>
      <td>
        <p class="u-primary-typo-level-4">Lorem ipsum dolor, sit <span class="notation" data-notation="{{ notation.attr }}">amet consectetur</span> adipisicing elit.</p>
        </span>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
 
{
  "notations": [
    {
      "name": "Underline Cyan",
      "attr": "underline-cyan"
    },
    {
      "name": "Circle Cyan",
      "attr": "circle-cyan"
    },
    {
      "name": "Highlight Cyan",
      "attr": "highlight-cyan"
    },
    {
      "name": "Underline CTA Accent",
      "attr": "underline-cta-accent"
    },
    {
      "name": "Circle Accent",
      "attr": "circle-accent"
    }
  ]
}
  • Handle: @notations
  • Preview:
  • Filesystem Path: src/pattern-library/01-design-tokens/notations/notations.twig

No notes defined.