<div class="PenguinProject PenguinProject--tall">
<div class="PenguinProject-wrapper">
<div class="PenguinProject-content">
<div class="PenguinProject-question">How do you bring more than 700 brands together into one website?</div>
<h2 class="PenguinProject-title Heading Heading--secondary Heading--inverted">Create a new universe.</h2>
<a href="#" class="MegaLink MegaLink--inverted">Read the case study</a>
<img class="PenguinProject-logo" src="/assets/img/work/penguin/penguin-logo.svg" alt="Penguin logo">
</div>
</div>
</div>
<!--./PenguinProject-->
<div class="PenguinProject{%if penguinModifier %} PenguinProject{{penguinModifier}}{% endif %}">
{% if "--stage" in penguinModifier %}
{% include '@site-header' %}
{% endif %}
<div class="PenguinProject-wrapper">
{% if "--stage" in penguinModifier %}
<div class="Ch4Project-breadcrumb">
{% include '@breadcrumb' %}
</div>
{% endif %}
<div class="PenguinProject-content">
<div class="PenguinProject-question">{{ penguinQuestion }}</div>
<h2 class="PenguinProject-title Heading Heading--secondary Heading--inverted">{{ penguinTitle }}</h2>
{% if "--stage" not in penguinModifier %}
<a href="{{ penguinLinkUrl }}" class="MegaLink MegaLink--inverted">Read the case study</a>
{% endif %}
{% if penguinDescription %}
<div class="PenguinProject-description Lead Bar">
{{penguinDescription}}
</div>
{% endif %}
{% if penguinLogoSrc %}
<img class="PenguinProject-logo" src="{{ penguinLogoSrc }}" alt="{{ penguinLogoAlt }}">
{% endif %}
</div>
</div>
</div><!--./PenguinProject-->
{
"penguinQuestion": "How do you bring more than 700 brands together into one website?",
"penguinTitle": "Create a new universe.",
"penguinLinkUrl": "#",
"penguinLogoSrc": "/assets/img/work/penguin/penguin-logo.svg",
"penguinLogoAlt": "Penguin logo",
"penguinModifier": "--tall"
}
The penguin project component outlines a featured project and uses some bespoke styles. The default version is used in a project listing and the Stage variant is taller.