<div class="wrapper">
<div class="cards-section--digital-world">
<div class="simple-filters">
<div class="simple-filters__wrapper">
<input id="filter-democracy" type="checkbox">
<label class="simple-filters__item filter--democracy" for="filter-democracy">Democracy</label>
<input id="filter-politics-society" type="checkbox">
<label class="simple-filters__item filter--politics-society" for="filter-politics-society">Politics & Society</label>
<input id="filter-future-leadership" type="checkbox">
<label class="simple-filters__item filter--future-leadership" for="filter-future-leadership">Future Leadership</label>
<input id="filter-digital-world" type="checkbox">
<label class="simple-filters__item filter--digital-world" for="filter-digital-world">Digital World</label>
</div>
<select name="" id="" class="simple-filters__mobile">
<option value="filter-democracy">Democracy</option>
<option value="filter-politics-society">Politics & Society</option>
<option value="filter-future-leadership">Future Leadership</option>
<option value="filter-digital-world">Digital World</option>
</select>
</div>
<div class="cards-section">
<article class="card card--future-of-work card--infographic" data-w="728" data-h="1147">
<div class="card__content">
<figure class="card__infographic" aria-hidden="true">
<img src=/images/cards/2019_08_tech-take-your-job.png>
</figure>
<h4 class="card__brow"><span>Future Leadership</span></h4>
<h2 class="card__heading"><a href="https://ccmdesign.ca">Will technology take your job?</a></h2>
<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.</div>
</div>
<footer class="card__footer">
<div class="card__actions">
<span class="button button--primary" aria-hidden="true">Learn More</span>
</div>
</footer>
</article>
<article class="card card--future-leadership card--infographic" data-w="976" data-h="1172">
<div class="card__content">
<figure class="card__infographic" aria-hidden="true">
<img src=//images.ctfassets.net/9vgcz0fppkl3/M6qxbLZ9Nad4iqdbMTzUo/18b4f923d50a76383172660da50b261a/2019_07_resilient-democracy.jpg>
</figure>
<h4 class="card__brow"><span>Future Leadership</span></h4>
<h2 class="card__heading"><a href="https://ccmdesign.ca">Will technology take your job?</a></h2>
</div>
<footer class="card__footer">
<div class="card__actions">
<span class="button button--primary" aria-hidden="true">Learn More</span>
</div>
</footer>
</article>
<article class="card card--future-leadership card--infographic" data-w="946" data-h="958">
<div class="card__content">
<figure class="card__infographic" aria-hidden="true">
<img src=https://images.ctfassets.net/9vgcz0fppkl3/tndDA4qoh5viTiPKdLTdK/4f02f400e0d0e4d1526b787a48b5c8b2/July_2020_Infographic.jpg>
</figure>
<h4 class="card__brow"><span>Future Leadership</span></h4>
<h2 class="card__heading"><a href="https://ccmdesign.ca">Will technology take your job?</a></h2>
<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.</div>
</div>
<footer class="card__footer">
<div class="card__actions">
<span class="button button--primary" aria-hidden="true">Learn More</span>
</div>
</footer>
</article>
<article class="card card--future-leadership" data-w="" data-h="">
<div class="card__content">
<h4 class="card__brow"><span>article</span></h4>
<h2 class="card__heading"><a href="https://ccmdesign.ca">Edge of a Precipice</a></h2>
<h3 class="card__subheading">Understanding French President Macron’s EU Vision</h3>
<p class="card__date">March 24th, 2020</p>
<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 card--video" data-w="" data-h="">
<div class="card__content">
<figure class="card__video" aria-hidden="true">
<iframe src=https://www.youtube.com/embed/x4SqzSjOD38 frameborder="0" allowfullscreen></iframe>
</figure>
<h4 class="card__brow"><span>Videos</span></h4>
<h2 class="card__heading"><a href="https://ccmdesign.ca">After the elections: The rise of Italy’s third republic?</a></h2>
<p class="card__date">March 24th, 2020</p>
</div>
<footer class="card__footer">
<div class="card__actions">
<span class="button button--primary" aria-hidden="true">Learn More</span>
</div>
</footer>
</article>
<article class="card card--democracy" data-w="" data-h="">
<div class="card__content">
<h4 class="card__brow"><span>publication</span></h4>
<h2 class="card__heading"><a href="https://ccmdesign.ca">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.</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 card--future-leadership" data-w="" data-h="">
<div class="card__content">
<h4 class="card__brow"><span>article</span></h4>
<h2 class="card__heading"><a href="https://ccmdesign.ca">Edge of a Precipice</a></h2>
<h3 class="card__subheading">Understanding French President Macron’s EU Vision</h3>
<p class="card__date">March 24th, 2020</p>
<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>
</div>
<div class="cards-section__button">
<a href="#" class="button button--secondary">More Articles</a>
</div>
</div>
</div>
<div class="wrapper">
<div{% if theme %} class="cards-section--{{theme}}"{% endif %}>
{# <div class="cards-section__title">
<h1 class="h1">Research</h1>
</div> #}
{% render '@simple-filters' %}
<div class="cards-section">
{% for card in cards %}
{% include '@card' %}
{% endfor %}
</div>
<div class="cards-section__button">
<a href="#" class="button button--secondary">More Articles</a>
</div>
</div>
</div>
{
"theme": "digital-world",
"cards": [
{
"theme": "future-of-work",
"image": {
"url": "/images/cards/2019_08_tech-take-your-job.png",
"height": 1147,
"width": 728
},
"brow": "Future Leadership",
"heading": "Will technology take your job?",
"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.",
"button": "Learn More",
"url": "https://ccmdesign.ca"
},
{
"theme": "future-leadership",
"image": {
"url": "//images.ctfassets.net/9vgcz0fppkl3/M6qxbLZ9Nad4iqdbMTzUo/18b4f923d50a76383172660da50b261a/2019_07_resilient-democracy.jpg",
"height": 1172,
"width": 976
},
"brow": "Future Leadership",
"heading": "Will technology take your job?",
"button": "Learn More",
"url": "https://ccmdesign.ca"
},
{
"theme": "future-leadership",
"image": {
"url": "https://images.ctfassets.net/9vgcz0fppkl3/tndDA4qoh5viTiPKdLTdK/4f02f400e0d0e4d1526b787a48b5c8b2/July_2020_Infographic.jpg",
"height": 958,
"width": 946
},
"brow": "Future Leadership",
"heading": "Will technology take your job?",
"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.",
"button": "Learn More",
"url": "https://ccmdesign.ca"
},
{
"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",
"date": "March 24th, 2020",
"by_line": "By Nathan Crist, on Feb 27, 2020",
"button": "Learn More",
"type": null,
"theme": "future-leadership",
"url": "https://ccmdesign.ca"
},
{
"brow": "Videos",
"video": "https://www.youtube.com/embed/x4SqzSjOD38",
"heading": "After the elections: The rise of Italy’s third republic?",
"date": "March 24th, 2020",
"button": "Learn More",
"theme": null,
"type": null,
"url": "https://ccmdesign.ca"
},
{
"brow": "publication",
"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.",
"by_line": "By Nathan Crist, on Feb 27, 2020",
"button": "Learn More",
"type": null,
"theme": "democracy",
"url": "https://ccmdesign.ca"
},
{
"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",
"date": "March 24th, 2020",
"by_line": "By Nathan Crist, on Feb 27, 2020",
"button": "Learn More",
"type": null,
"theme": "future-leadership",
"url": "https://ccmdesign.ca"
}
]
}
/* Create Cards Section module in BFNA-DS*/
.cards-section {
--theme-hsl: var(--navy-hsl);
}
.cards-section {
display: grid;
grid-gap: 2rem;
align-items: stretch;
justify-content: stretch;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
@include breakpoint($medium) {
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}
}
.cards-section--updates {
padding-top: 4rem;
padding-bottom: 4rem;
}
// Typography
.cards-section__title {
text-align: center;
padding-bottom: 2.75rem;
padding-top: 5rem;
}
.cards-section__button {
text-align: center;
padding-bottom: 5rem;
padding-top: 2rem;
}
// Color Themes
.cards-section__title .h1 {
color: hsla(var(--theme-hsl), 1);
}
.cards-section--democracy {
--theme-hsl: var(--green-hsl);
}
.cards-section--future-leadership {
--theme-hsl: var(--red-hsl);
}
.cards-section--politics-society {
--theme-hsl: var(--yellow-hsl);
}
.cards-section--digital-world {
--theme-hsl: var(--purple-hsl);
}
There are no notes for this item.