Pinecone

Card: Blog With Image 

<ul class="cards">
    <li class="card__wrapper">
        <article class="card card--blog">
            <figure class="card__image">

                <img src="/images/blog.jpg" width="367" height="165" alt="Photograph of Cataki workers" />
            </figure>
            <header>
                <h3 class="card__title">
                    <span class="card__format">Blog</span><span class="screen-reader-text">: </span><a class="card__link" href="blog">Who Owns the World?</a>
                </h3>
            </header>
            <aside class="card__aside">
                <div class="card__meta">
                    <span class="card__date">
                        <span class="screen-reader-text">date published: </span>Nov 12, 2019
                    </span>
                </div>
            </aside>
        </article>
    </li>
</ul>
 
{% if not standAlone %}
<ul class="cards">
{% endif %}
	<li class="card__wrapper">
		<article class="card{% if modifier %} card--{{ modifier }}{% endif %}">
			{% if image %}
			<figure class="card__image">
				{% render '@image', image, true %}
			</figure>
			{% endif %}
			<header>
				<h3 class="card__title" >
					{% if format %}<span class="card__format">{{ format }}</span><span class="screen-reader-text">: </span>{% endif %}<a class="card__link" {% if externalLink %}rel="external" {% endif %}href="{{ href }}">{{ title | safe }}</a>
				</h3>
				{% if byline %}
					<p class="card__byline">{% render '@svg', {svg:'author'}, true %} By {{ byline | safe }}</p>
				{% endif %}
			</header>
			<aside class="card__aside">
				{% if date %}
				<div class="card__meta">
					<span class="card__date">
					{% if modifier === 'event' %}
						<span class="screen-reader-text">event date: </span>{% render '@svg', {svg:'calendar'}, true %}{{ date }}
					{% else %}
						<span class="screen-reader-text">date published: </span>{{ date }}
					{% endif %}
					</span>
				</div>
				{% endif %}
				{% if locality %}
				<div class="card__meta">
					<span class="card__locality"><span class="screen-reader-text">location: </span>{% render '@svg', {svg:'location'}, true %}{{ locality }}</span>
				</div>
				{% endif %}
				{% if description %}
				<div class="card__description">{{ description }}</div>
				{% endif %}
			</aside>
		</article>
	</li>
{% if not standAlone %}
</ul>
{% endif %}
 
{
  "title": "Who Owns the World?",
  "format": "Blog",
  "name": "Blog with Image",
  "href": "blog",
  "standAlone": false,
  "modifier": "blog",
  "id": 5,
  "date": "Nov 12, 2019",
  "image": {
    "src": "/images/blog.jpg",
    "width": 367,
    "height": 165,
    "alt": "Photograph of Cataki workers"
  }
}

There are no notes for this item.