Created
April 26, 2016 08:53
-
-
Save andrewfairlie/bdd47967c891b9e6888cd7a943947637 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {# Define our macro #} | |
| {% macro card(attributes) %} | |
| {% set defaults = { | |
| scheme: 'light', | |
| size: 'standard' | |
| } %} | |
| {# Merge our two arrays together #} | |
| {% set attributes = defaults|merge(attributes) %} | |
| {% if attributes.url %}<a href="{{ attributes.url }}">{% endif %} | |
| <div class="card card--{{ attributes.scheme }} card--{{ attributes.size }}"> | |
| {% if attributes.img %}<img src="{{ attributes.img }}">{% endif %} | |
| <h2>{{ attributes.title }}</h2> | |
| {{ attributes.content }} | |
| </div> | |
| {% if attributes.url %}</a>{% endif %} | |
| {% endmacro %} | |
| {# Import the macro, here we use _self but usually it'll be a separate file #} | |
| {% import _self as ui %} | |
| {# Output a standard card #} | |
| {{ ui.card( | |
| { | |
| title: 'Card Title', | |
| content: 'Hello World', | |
| url: 'index.html' | |
| } | |
| ) }} | |
| {# Output a large card #} | |
| {{ ui.card( | |
| { | |
| title: 'Card Title', | |
| content: 'Hello World', | |
| scheme: 'dark' | |
| } | |
| ) }} | |
| {# Output a dark and large card #} | |
| {{ ui.card( | |
| { | |
| title: 'Card Title', | |
| content: 'Hello World', | |
| scheme: 'dark', | |
| size: 'large' | |
| } | |
| ) }} | |
| {# Output a light but large card #} | |
| {{ ui.card( | |
| { | |
| title: 'Card Title', | |
| content: 'Hello World', | |
| size: 'large' | |
| } | |
| ) }} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment