600 West

Card: Image 

<div id="" class="Card _interactive _image" style="max-width: 500px;">
    <div class="Media _16x9" style="">

        <img id="" class="image  " alt="" style="" src="http://lorempixel.com/600/400/transport?63766" />

    </div>
    <div class="Card-body">
        <h2 class="_small " style="">
            Cool title
        </h2>

        <p id="" class="">
            Laboriosam magnam ut nobis ipsa corrupti et neque consequatur numquam consequatur perferendis esse eos modi nihil error ab libero amet.
        </p>

        <button class="button  ">
        Learn more
    </button>

    </div>
</div>
 
<{{#if href}}a href="{{href}}"{{else}}div{{/if}}
        id="{{id}}"
        class="Card {{modifier}}"
        style="{{style}}"
>
    {{#if media}}
        {{> @media media}}
    {{/if}}
	<div class="Card-body">
		{{> @children }}
	</div>
</{{#if href}}a{{else}}div{{/if}}>
 
{
  "style": "max-width: 500px;",
  "id": null,
  "href": null,
  "children": [
    {
      "component": "heading",
      "context": {
        "level": 2,
        "modifier": "_small",
        "text": "Cool title"
      }
    },
    {
      "component": "p",
      "context": {
        "text": "Laboriosam magnam ut nobis ipsa corrupti et neque consequatur numquam consequatur perferendis esse eos modi nihil error ab libero amet."
      }
    },
    {
      "component": "button",
      "context": {
        "text": "Learn more"
      }
    }
  ],
  "modifier": "_interactive _image",
  "media": {
    "modifier": "_16x9",
    "children": [
      {
        "component": "image",
        "context": {
          "src": "http://lorempixel.com/600/400/transport?63766"
        }
      }
    ]
  }
}

There are no notes for this item.