UI Patterns Settings

card:
  label: Card
  description: A card component.
  variants:
    product:
      label: Artwork
      settings:
        modifier: artwork
        attributes: "class=\"shadow-bottom\""
  settings:
    modifier:
      type: textfield
      label: Modifier
      description: Add modifier here
    url:
      type: token
      label: Url
      default_value: "[node:url]"
    attributes:
      type: attributes
      label: Attributes
  fields:
    image:
      type: image
      label: Image
      description: Card image.
      preview:
        type: pattern
        id: image
        fields:
          image:
            theme: image
            uri: http://lorempixel.com/400/200/nature/2
    title:
      type: text
      label: Title
      description: Card title.
      preview: Card title
    text:
      type: text
      label: Text
      description: Card text.
      preview: Cras justo odio, dapibus ac facilisis in.

<a href="{{ url }}" class="card card--{{ modifier }} {{ attributes.class }}" 
{{ attributes|without('class') }}>
  <div class="thumbnail">
    {{ image }}
    <div class="caption">
      <h3>{{ title }}</h3>
      <p>{{ text }}</p>
    </div>
  </div>
</a>