<article class="card" data-w="" data-h="">
<div class="card__content">
<h4 class="card__brow"><span>article</span></h4>
<h2 class="card__heading"><a href="">Edge of a Precipice</a></h2>
<h3 class="card__subheading">Understanding French President Macron’s EU Vision</h3>
<div class="card__excerpt">In an interview with The Economist released November 7, French President Macron laid out a grand strategic vision for the EU. He called for the creation of an EU military, stronger technological sovereignty, and reforms to deepen the political
unity of the EU instead of just growing the single market. Other European leaders immediately pushed back, especially against his strong critique of the purpose of NATO today. However, the timing—in the midst of a flurry of events that put
Macron in the spotlight—gives his statements a particular potency, even if his ideas are controversial and somewhat contradictory. Macron chose his moment well, and the coming months will show if he can nudge the path of the EU to match his
vision, or if Brussels will push back harder</div>
</div>
<footer class="card__footer">
<small class="card__by-line">By Nathan Crist, on Feb 27, 2020</small>
<div class="card__actions">
<span class="button button--primary" aria-hidden="true">Learn More</span>
</div>
</footer>
</article>
<article class="card{% if card.theme %} card--{{card.theme}}{% endif %}{% if card.image %} card--infographic{% endif %}{% if card.video %} card--video{% endif %}" data-w="{{card.image.width}}" data-h="{{card.image.height}}">
<div class="card__content">
{% if card.image %}
<figure class="card__infographic" aria-hidden="true">
<img src={{ card.image.url }}>
</figure>
{% endif %}
{% if card.video %}
<figure class="card__video" aria-hidden="true">
<iframe src={{card.video}} frameborder="0" allowfullscreen></iframe>
</figure>
{% endif %}
{% if card.brow %}
<h4 class="card__brow"><span>{{ card.brow }}</span></h4>
{% endif %}
<h2 class="card__heading"><a href="{{ card.url }}">{{ card.heading }}</a></h2>
{% if card.subheading %}
<h3 class="card__subheading">{{ card.subheading }}</h3>
{% endif %}
{% if card.date %}
<p class="card__date">{{ card.date }}</p>
{% endif %}
{% if card.excerpt %}
<div class="card__excerpt">{{ card.excerpt }}</div>
{% endif %}
</div>
{% if card.button or card.by_line %}
<footer class="card__footer">
{% if card.by_line %}
<small class="card__by-line">{{ card.by_line }}</small>
{% endif %}
{% if card.button %}
<div class="card__actions">
<span class="button button--primary" aria-hidden="true">{{ card.button }}</span>
</div>
{% endif %}
</footer>
{% endif %}
</article>
{
"card": {
"brow": "article",
"heading": "Edge of a Precipice",
"subheading": "Understanding French President Macron’s EU Vision",
"excerpt": "In an interview with The Economist released November 7, French President Macron laid out a grand strategic vision for the EU. He called for the creation of an EU military, stronger technological sovereignty, and reforms to deepen the political unity of the EU instead of just growing the single market. Other European leaders immediately pushed back, especially against his strong critique of the purpose of NATO today. However, the timing—in the midst of a flurry of events that put Macron in the spotlight—gives his statements a particular potency, even if his ideas are controversial and somewhat contradictory. Macron chose his moment well, and the coming months will show if he can nudge the path of the EU to match his vision, or if Brussels will push back harder",
"by_line": "By Nathan Crist, on Feb 27, 2020",
"button": "Learn More",
"type": null,
"theme": null
},
"theme": null,
"heading": "Pacific Pumas",
"excerpt": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitatio ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitatio",
"button": "Learn More"
}
var cards = document.querySelectorAll('.card--infographic');
cards.forEach(element => {
let ratio = element.dataset.w - element.dataset.h;
if (ratio >= 0) {
element.classList.add('card--horizontal');
} else {
element.classList.add('card--vertical');
}
});
// Structure.
.card {
--theme-hsl: var(--navy-hsl);
display: flex;
flex-direction: column;
}
.card__content { margin-bottom: auto; }
// Mimics the styles for EveryLayout's Stack
// without the use of Flexbox, because we want to use float: right internally.
.card__content,
.card__footer {
--space: var(--s1);
> * {
margin-top: 0;
margin-bottom: 0;
}
> * + * { margin-top: var(--space); }
}
.card.filtered { display: none; }
// Customizing the margin-top for the headings on the card
.card__brow { margin-top: 0; }
.card__heading,
.card__subheading,
.card__date { --space: var(--s-1); }
.card__footer { margin-top: var(--s1); }
// Visual Styles
.card {
padding: var(--s2);
background: var(--color-white) 0% 0% no-repeat padding-box;
box-shadow: 0px 8px 32px var(--color-gray-10);
}
// Internal Components
.card__brow > span {
display: inline-block;
padding: 2px 8px 4px;
font-weight: 600;
font-size: 0.75rem;
text-transform: uppercase;
color: var(--colors-white);
background-color: hsla(var(--theme-hsl), 1);
}
.card__by-line { font-style: italic; }
.card__heading a {
all: inherit;
color: hsla(var(--theme-hsl), 1);
font-weight: bold;
cursor: pointer;
}
.card--democracy { --theme-hsl: var(--green-hsl); }
.card--future-leadership { --theme-hsl: var(--red-hsl); }
.card--politics-society { --theme-hsl: var(--yellow-hsl); }
.card--digital-world { --theme-hsl: var(--purple-hsl); }
// Card Modifiers
// using the EveryLayout's Frame component to maintain
// aspect ration for the video.
.card__video {
@extend .frame-l;
margin: 0 0 var(--s0) 0;
}
// Adds a float:right for the infographics.
.card__infographic,
.card__product {
max-width: 40%;
float: right;
margin: 0 0 var(--s1) var(--s1);
img {
max-width: 100%;
display: block;
}
}
// Visual styles
.card__video,
.card__infographic {
box-shadow: 0px 8px 32px var(--color-gray-20);
.card__subheading {
font-weight: 300;
font-size: var(--text-base-size);
}
}