ClearFractal

Penguin Project: Work Page Feature 

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