spacing.njk 1.33 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11
---
is_index: true
title: Design Tokens
subtitle: Spacing
date: 2018-10-19 12:24:50
section: components
templateEngineOverride: njk
layout: layouts/tokens.njk
hideSubPosts: true
---

12
<main class="vf-grid vf-grid__col-3">
13
{% for item in tokens.spacing.properties %}
14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
<article class="vf-card">
  <div style="display: flex; justify-content: center; align-items: center;">
    <div style="height: {{ item.value }}; width: {{ item.value }}; background: #009f4d;"></div>
  </div>
  <section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
  <h3 class="vf-card__title">{{ item.meta.friendlyName }}</h3>
  <hr class="vf-divider">
  <p class="vf-card__text">Value:</p>
  <p class="vf-card__text"><code>{{ item.value }}</code></p>
  {% if item.meta.sassVariable %}
  <hr class="vf-divider">
  <p class="vf-card__text">Sass:</p>
    <p class="vf-card__text"><code>{{ item.meta.sassVariable }}</code></p>
  {% endif %}
  {% if item.meta.CSSCustomProperty %}
  <hr class="vf-divider">
  <p class="vf-card__text">CSS custom property:</p>
    <p class="vf-card__text"><code>{{ item.meta.CSSCustomProperty }}</code></p>
  {% endif %}
  {% if item.meta.comment %}
    <h4>notes:</h4>
    <p class="vf-card__text">
      {{ item.meta.comment }}
    </p>
  {% endif %}
  </section>
</article>
41

42
{% else %}
43

44
<p>Something went wrong.</p>
45

46 47
{% endfor %}
</main>