spacing.njk 1.29 KB
Newer Older
1
---
Ken Hawkins's avatar
Ken Hawkins committed
2
title: Spacing and sizing
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>

Ken Hawkins's avatar
Ken Hawkins committed
15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
<section class="embl-grid">
  {% render '@vf-section-header', {
    "section_title": "Spacing",
    "href": "https://github.com/visual-framework/vf-core/blob/develop/components/vf-design-tokens/dist/sass/custom-properties/vf-spacing.custom-properties.scss",
    "id": "spacing"
  } %}
  <article class="vf-grid vf-grid__col-2">
    {% set type %}spacing{% endset %}
    {% for item in tokens.spacing.properties %}
      {% include "./token-card.njk" %}
    {% else %}
      <p>Something went wrong.</p>
    {% endfor %}
  </article>
</section>
30

Ken Hawkins's avatar
Ken Hawkins committed
31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
<section class="embl-grid">
  {% render '@vf-section-header', {
    "section_title": "Breakpoint widths",
    "href": "https://github.com/visual-framework/vf-core/blob/develop/components/vf-design-tokens/dist/sass/maps/vf-breakpoints.map.scss",
    "id": "breakpoints"
  } %}
  <article class="vf-grid vf-grid__col-2">
    {% set type %}breakpoints{% endset %}
    {% for item in tokens.breakpoints.properties %}
      {% include "./token-card.njk" %}
    {% else %}
      <p>Something went wrong.</p>
    {% endfor %}
  </article>
</section>