Card

<ul class="cards">
    <li class="card__wrapper">
        <article class="card">
            <header>
                <h3 class="card__title">
                    <span class="card__format">Card</span><span class="screen-reader-text">: </span><a class="card__link" href="https://example.com">Card</a>
                </h3>
            </header>
            <aside class="card__aside">
            </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": "Card",
  "format": "Card",
  "name": "Generic Card",
  "href": "https://example.com",
  "standAlone": false
}

There are no notes for this item.