<div class="PenguinProject">

    <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>

            <a href="#">
                <h2 class="PenguinProject-title Heading Heading--secondary Heading--inverted">Create a new universe.</h2>
            </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>

            {% if "--stage" in penguinModifier %}
            <h2 class="PenguinProject-title Heading Heading--secondary Heading--inverted">{{ penguinTitle }}</h2>
            {% else %}
            <a href="{{ penguinLinkUrl }}"><h2 class="PenguinProject-title Heading Heading--secondary Heading--inverted">{{ penguinTitle }}</h2></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"
}

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.