spacing.njk 1.36 KB
Newer Older
1
---
2
title: Spacing
3
date: 2018-10-19 12:24:50
4
section: designtokens
5
templateEngineOverride: njk
6 7 8 9 10
tags:
  - posts
  - sections
  - designtokens
layout: layouts/base.njk
11 12
---

13 14
<h1 class="vf-intro__heading">{{ title }}</h1>

15
<main class="vf-grid vf-grid__col-3">
16
{% for item in tokens.spacing.properties %}
17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
<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>
44

45
{% else %}
46

47
<p>Something went wrong.</p>
48

49 50
{% endfor %}
</main>