Custom Component

See the code below and/or Inspect the components with your browser's developer tools to see how we leveraged Willow to make this branded component.

Project Stats

46%

of our customers love pizza

93%

of people are cool

100%

of the people reading this know about it

components/custom-component.html


<div class="col-sm-6">
    <div class="project-stat">
        <p class="project-stat__highlight">46%</p>
        <p class="project-stat__label">of our customers love pizza</p>
    </div>
</div>
<div class="col-sm-6">
    <div class="project-stat">
        <p class="project-stat__highlight">93%</p>
        <p class="project-stat__label">of people are cool</p>
    </div>
</div>
<div class="col-12">
    <div class="project-stat project-stat--special">
        <p class="project-stat__highlight">100%</p>
        <p class="project-stat__label">of the people reading this know about it</p>
    </div>
</div>

styles/components/stat/_stat.scss


// Without a Theme
$component-project-stat-background-color: $color-dark;
$component-project-stat-text-color: $color-light;
$component-project-stat-special-background-color: $color-middle;
$component-project-stat-special-text-color: $color-light;

// With the Unum Theme
$component-project-stat-background-color: $theme-primary;
$component-project-stat-text-color: $theme-text-inverse;
$component-project-stat-special-background-color: $theme-accent;
$component-project-stat-special-text-color: $theme-text-primary;

// With the Colonial Life theme
$component-project-stat-background-color: $theme-primary;
$component-project-stat-text-color: $theme-text-inverse;
$component-project-stat-special-background-color: $theme-accent;
$component-project-stat-special-text-color: $theme-text-inverse;

.project-stat {
    background-color: $component-project-stat-background-color;
    color: $component-project-stat-text-color;
    padding: $space-inset-l;
    text-align: center;
    margin-top: $space;

    &--special {
        background-color: $component-project-stat-special-background-color;
        color: $component-project-stat-special-text-color;
    }

    &__highlight {
        @include set-text-style($text-style-heading-1);
        margin: 0;
    }

    &__label {
        font-weight: 600;
        margin: 0;
    }
}