Hawk Framework

What are Hawk Blocks?

Blocks are the most commonly used components of the website which can be placed in your project. They are constructed according to the BEM methodology, using SCSS and Hawk Variables set. Hawk Blocks are thoughtful to be as abstract as they should to be both universal and useful.

List of blocks

Titles

Titles are the main part of the website's content as you can suppose. They have three variants: regular (default), large and small which are presented below.

  • Large section title

  • Section title

  • Small section title

  • Large section subtitle

  • Section subtitle

  • Small section subtitle

  • Large subsection title

  • Subsection title

  • Small subsection title

  • Subsection subtitle

  • Simple title

  • Text title

  • Small title

HTML

<h2 class="section-title">Section title</h2>

SCSS

.section-title {
  font-size: $very-large-font-size-00;
  font-weight: 700;

  @media (min-width: $mobile-m) {
    font-size: $very-large-font-size-01;
  }

  @media (min-width: $mobile-l) {
    font-size: $very-large-font-size-02;
  }

  @media (min-width: $desktop-m) {
    font-size: $very-large-font-size-04;
  }

  @media (min-width: $desktop-xl) {
    font-size: $very-large-font-size-07;
  }
}

.section-title--large {
  font-size: $very-large-font-size-02;

  @media (min-width: $mobile-m) {
    font-size: $very-large-font-size-04;
  }

  @media (min-width: $mobile-l) {
    font-size: $very-large-font-size-05;
  }

  @media (min-width: $desktop-m) {
    font-size: $very-large-font-size-07;
  }

  @media (min-width: $desktop-xl) {
    font-size: $very-large-font-size-12;
  }
}

.section-title--small {
  font-size: $large-font-size-00;

  @media (min-width: $mobile-m) {
    font-size: $large-font-size-01;
  }

  @media (min-width: $mobile-l) {
    font-size: $large-font-size-02;
  }

  @media (min-width: $desktop-m) {
    font-size: $large-font-size-03;
  }

  @media (min-width: $desktop-xl) {
    font-size: $large-font-size-04;
  }
}

.section-subtitle {
  font-size: $large-font-size;
  font-weight: 700;

  @media (min-width: $mobile-m) {
    font-size: $large-font-size-00;
  }

  @media (min-width: $mobile-l) {
    font-size: $large-font-size-01;
  }

  @media (min-width: $desktop-m) {
    font-size: $large-font-size-02;
  }

  @media (min-width: $desktop-xl) {
    font-size: $large-font-size-03;
  }
}

.section-subtitle--large {
  font-size: $large-font-size-01;

  @media (min-width: $mobile-m) {
    font-size: $large-font-size-02;
  }

  @media (min-width: $mobile-l) {
    font-size: $large-font-size-03;
  }

  @media (min-width: $desktop-m) {
    font-size: $large-font-size-04;
  }

  @media (min-width: $desktop-xl) {
    font-size: $large-font-size-06;
  }
}

.section-subtitle--small {
  font-size: $larger-font-size;

  @media (min-width: $mobile-m) {
    font-size: $larger-font-size-00;
  }

  @media (min-width: $mobile-l) {
    font-size: $larger-font-size-01;
  }

  @media (min-width: $desktop-m) {
    font-size: $larger-font-size-02;
  }

  @media (min-width: $desktop-xl) {
    font-size: $larger-font-size-03;
  }
}

.subsection-title {
  font-size: $main-font-size;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;

  @media (min-width: $mobile-m) {
    font-size: $main-font-size-00;
  }

  @media (min-width: $mobile-l) {
    font-size: $main-font-size-01;
  }

  @media (min-width: $desktop-m) {
    font-size: $main-font-size-02;
  }

  @media (min-width: $desktop-xl) {
    font-size: $main-font-size-03;
  }
}

.subsection-title--large {
  font-size: $larger-font-size;

  @media (min-width: $mobile-m) {
    font-size: $larger-font-size-00;
  }

  @media (min-width: $mobile-l) {
    font-size: $larger-font-size-01;
  }

  @media (min-width: $desktop-m) {
    font-size: $larger-font-size-02;
  }

  @media (min-width: $desktop-xl) {
    font-size: $larger-font-size-04;
  }
}

.subsection-title--small {
  font-size: $small-font-size;

  @media (min-width: $mobile-m) {
    font-size: $small-font-size-00;
  }

  @media (min-width: $mobile-l) {
    font-size: $small-font-size-01;
  }

  @media (min-width: $desktop-m) {
    font-size: $small-font-size-02;
  }

  @media (min-width: $desktop-xl) {
    font-size: $small-font-size-03;
  }
}

.simple-title {
  font-size: $large-font-size;

  @media (min-width: $desktop-xl) {
    font-size: $large-font-size-00;
  }
}

.simple-title--small {
  font-size: $larger-font-size;

  @media (min-width: $desktop-xl) {
    font-size: $larger-font-size-00;
  }
}

.small-title {
  font-size: $small-font-size;
  font-weight: 700;

  @media (min-width: $desktop-xl) {
    font-size: $small-font-size-01;
  }
}

.text-title {
  @extend .text;
  font-weight: 700;
}

.subsection-subtitle {
  font-size: $larger-font-size;
  font-style: italic;
}

Text

Text block is the basic component of the website. It exists just to present the paragraphs of content on the webpage.

It deals with following proper features:

  1. font size
  2. line height
  3. font family
  4. space between paragraphs

Moreover, Text component works with common elements:

  • ordered and unordered list
  • links
  • emphasizes

  • Large text is a variant of basic Text component of the website. It exists just to present the paragraphs of content on the webpage.

    It deals with following proper features:

    1. font size
    2. line height
    3. font family
    4. space between paragraphs

    Moreover, Text component works with common elements:

    • ordered and unordered list
    • links
    • emphasizes

  • Small text is a variant of basic Text component of the website. It exists just to present the paragraphs of content on the webpage.

    It deals with following proper features:

    1. font size
    2. line height
    3. font family
    4. space between paragraphs

    Moreover, Text component works with common elements:

    • ordered and unordered list
    • links
    • emphasizes

HTML

<div class="text">
    <p>
        <em>Text</em> block is the basic component of the website.
        It exists just to present the paragraphs of content on the webpage.
    </p>

    <p>
        It deals with following proper features:
    </p>

    <ol>
        <li>font size</li>
        <li>line height</li>
        <li>font family</li>
        <li>space between paragraphs</li>
    </ol>

    <p>
        Moreover, <em>Text</em> component works with common elements:
    </p>

    <ul>
        <li>ordered and unordered list</li>
        <li><a href="/">links</a></li>
        <li><em>emphasizes</em></li>
    </ul>
</div>

SCSS

.text {
  font-size: $main-font-size;
  line-height: $main-font-size + 8px;
  font-style: normal;

  @media (min-width: $desktop-xl) {
    font-size: $main-font-size-01;
    line-height: $main-font-size-01 + 10px;
  }

  p {
    padding: 5px 0;
    margin: 0;

    &:first-child {
      padding-top: 0;
    }

    &:last-child {
      padding-bottom: 0;
    }
  }

  em {
    font-style: italic;
  }

  a {
    color: $dark-color;

    &:hover,
    &:focus {
      color: $primary-color;
    }
  }

  ol {
    list-style-type: none;
    padding: 0 0 0 8px;
    counter-reset: textOrderedList;

    > li {
      position: relative;
      padding: 2px 0 2px 32px;

      &:before {
        content: counters(textOrderedList, '.') ".";
        counter-increment: textOrderedList;
        display: block;
        position: absolute;
        top: 2px;
        left: 0;
        width: 24px;
        padding: 0;
        text-align: right;
      }
    }
  }

  ul {
    list-style-type: none;
    padding: 0 0 0 24px;

    > li {
      position: relative;
      padding: 2px 0 2px 16px;

      &:before {
        content: '';
        display: block;
        position: absolute;
        top: 10px;
        left: 0;
        width: 6px;
        height: 6px;
        padding: 0;
        background: $dark-color;
        @include border-radius(50%);
      }
    }
  }
}
.text--light {
  a {
    color: $light-color;
  }
}

.text--large {
  font-size: $larger-font-size;
  line-height: $larger-font-size + 8px;

  @media (min-width: $desktop-xl) {
    font-size: $larger-font-size-01;
    line-height: $larger-font-size-01 + 8px;
  }

  p {
    padding: 8px 0;
  }

  ul {
    padding: 0 0 0 24px;

    > li {
      padding: 2px 0 2px 16px;

      &:before {
        top: 12px;
        width: 6px;
        height: 6px;
      }
    }
  }
}

.text--small {
  font-size: $small-font-size;
  line-height: $small-font-size + 8px;

  @media (min-width: $desktop-xl) {
    font-size: $small-font-size-01;
    line-height: $small-font-size-01 + 8px;
  }

  ol {
    padding: 0 0 0 6px;

    > li {
      padding: 1px 0 1px 30px;

      &:before {
        top: 1px;
      }
    }
  }

  ul {
    padding: 0 0 0 24px;

    > li {
      padding: 1px 0 1px 12px;

      &:before {
        top: 10px;
        width: 4px;
        height: 4px;
      }
    }
  }
}

.text--no-indent-lists {
  ul,
  ol {
    padding-left: 0;
  }
}

.text--distinguished {
  font-weight: 700;
}

Buttons

Buttons are the main clickable blocks. They are filled or stroke, large, small or regular in some colours and can be freely extended and modified.

HTML

<button class="button" type="button">
    <div class="button__wrapper">
        <div class="button__inner">
        Button
        </div>
    </div>
</button>

SCSS

.button {
  clear: both;
  display: inline-block;
  margin: 0 0 0 -3px;
  border: 0;
  cursor: pointer;
  font-weight: 400;
  font-size: $main-font-size;
  font-family: $sans-serif-font-family;
  border: 0;
  color: $light-color;
  overflow: hidden;
  @include box-sizing(border-box);
  background: transparent;
  @include transition(all .3s ease-in-out);
  text-decoration: none;
  white-space: nowrap;

  &__wrapper {
    padding: 8px 32px;
    position: relative;

    &:before,
    &:after {
      content: '';
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      @include transition(all .3s ease-in-out);
      @include box-sizing(border-box);
    }

    &:before {
      top: 0;
      background: $primary-color;
    }

    &:after {
      top: -100%;
      background: $secondary-color-02;
    }
  }

  &__inner {
    position: relative;
    z-index: 10;
  }

  &:hover {
    .button__wrapper {
      &:after {
        top: 0;
      }
    }
  }
}

.button--large {
  font-size: $main-font-size-01;

  .button__wrapper {
    padding: 10px 40px;
  }
}

.button--small {
  font-size: $small-font-size;

  .button__wrapper {
    padding: 8px 24px;
  }
}

.button--dark {
  .button__wrapper {
    &:before {
      background: $dark-color;
    }
  }
}

.button--light {
  color: $primary-color;

  .button__wrapper {
    &:before {
      background: $light-color;
    }

    &:after {
      background: $primary-color;
    }
  }

  &:hover,
  &:focus {
    color: $light-color;
  }
}

.button--stroke {
  color: $primary-color;

  .button__wrapper {
    &:before {
      border: 1px solid $primary-color;
      background: transparent;
    }

    &:after {
      background: $primary-color;
    }
  }

  &:hover,
  &:focus {
    color: $light-color;

    .button__wrapper {

    }
  }
}

.button--dark.button--stroke {
  color: $dark-color;

  .button__wrapper {
    &:before {
      border-color: $dark-color;
    }

    &:after {
      background: $dark-color;
    }
  }

  &:hover,
  &:focus {
    color: $light-color;
  }
}

.button--light.button--stroke {
  color: $light-color;

  .button__wrapper {
    &:before {
      border-color: $light-color;
    }

    &:after {
      background: $light-color;
    }
  }

  &:hover,
  &:focus {
    color: $primary-color;
  }
}

.button--static {

  &:hover,
  &:focus {
    .button__wrapper {
      &:after {
        top: -100%;
      }
    }
  }
}

.button-container {
  padding: 20px 0 0 0;
}

Form fields

Form fields are necessary to interact with user and obtain data from her. They might have title or placeholder, border or underline.

HTML

  •     <label class="form-field">
        <div class="form-field__wrapper">
            <input class="form-field__core" type="with-title" name="" />
        </div>
    </label>
  •     <label class="form-field">
        <div class="form-field__wrapper">
            <input class="form-field__core" type="with-placeholder" name="" />
        </div>
    </label>
  •     <label class="form-field form-field--underline">
        <div class="form-field__wrapper">
            <input class="form-field__core" type="with-placeholder" name="" />
        </div>
    </label>

SCSS

.form-field {
  display: block;
  width: 100%;
  position: relative;

  &__wrapper {
    position: relative;
    display: block;
  }

  &__inner {
    position: relative;
  }

  &__decoration {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    width: 100%;
    background: $dark-color;
    @include transition(all .2s linear);
  }

  &__core {
    display: block;
    padding: 8px 8px;
    width: 100%;
    margin: 0;
    -webkit-appearance: none;
    border: 1px solid $dark-color-op20;
    background: none;
    color: $dark-color;
    position: relative;
    font-size: $main-font-size;
    text-align: left;
    z-index: 5;
    font-family: $sans-serif-font-family;
    font-weight: 400;
    outline: none;
    @include transition(all .2s linear);
    @include box-sizing(border-box);
    @include border-radius(0);

    @media (min-width: $desktop-xl) {
      font-size: $main-font-size-01;
      padding-left: 12px;
      padding-right: 12px;
    }

    &:focus {
      border-color: $dark-color;
    }
  }
  &__core--code {
    font-family: $monospace-font-family;
  }

  &__core::-webkit-input-placeholder,
  &__core:-moz-placeholder,
  &__core::-moz-placeholder,
  &__core:-ms-input-placeholder {
    color: $light-color-04;
    opacity: 1;
    text-align: center;

    @media (min-width: $tablet-m) {
      text-align: left;
    }
  }

  &__field-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  &__suffix {
    padding: 0 0 0 12px;
  }

  &.error {
    .form-field__title {
      color: $error-color;
    }

    .form-field__core {
      border-color: $error-color;
    }
  }
}

.form-field--underline {
  .form-field__header {
    padding: 0 0 2px 0;

    @media (min-width: $mobile-m) {
      padding: 0 0 5px 0;
    }
  }

  .form-field__core {
    border-top: 0;
    border-left: 0;
    border-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

.form-field--horizontal {
  .form-field__wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .form-field__header {
    padding: 0 12px 0 0;
  }

  .form-field__field-container {
    width: 100%;
  }
}

.form-field--file {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .form-field__side-container {
    padding: 0 0 0 16px;
  }

  input {
    width: 0;
    height: 0;
    opacity: 0;
    position: absolute;
    z-index: -999;
  }
}

.form-field-wrapper {
  display: block;
  width: 100%;
  position: relative;

  &__header {
    padding: 0 0 5px 0;
    text-align: left;
    white-space: nowrap;

    @media (min-width: $mobile-m) {
      padding: 0 0 8px 0;
    }

    @media (min-width: $tablet-m) {
      text-align: left;
    }
  }

  &__title {
    position: relative;
    font-weight: 500;
    @include transition(all .2s linear);
    font-size: $main-font-size;

    @media (min-width: $desktop-xl) {
      font-size: $main-font-size-01;
    }
  }
}
.form-field-wrapper.error {
  .form-field-wrapper__title {
    color: $error-color;
  }
}

Choice fields (checkboxes, radio buttons)

HTML

  • <label class="choice-item">
        <div class="choice-item__field">
            <div class="choice-field">
                <input class="choice-field__core" type="checkbox" name="exemplary-checkbox" value="Exemplary checkbox" />

                <div class="choice-field__field">
                    
                </div>
            </div>
        </div>

        <div class="choice-item__description">
            Exemplary checkbox
        </div>
    </label>
  • <label class="choice-item">
        <div class="choice-item__field">
            <div class="choice-field choice-field--radio">
                <input class="choice-field__core" type="radio" name="exemplary-radio-button" value="Exemplary radio button" />

                <div class="choice-field__field">
                    
                </div>
            </div>
        </div>

        <div class="choice-item__description">
            Exemplary radio button
        </div>
    </label>

SCSS

.choice-field {
    position: relative;
    width: 16px;
    height: 16px;
    display: block;
    cursor: pointer;

    @media (min-width: $desktop-xl) {
        width: 18px;
        height: 18px;
    }

    &__core {
        width: 0;
        height: 0;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -100;
        opacity: 0;
    }

    &__field {
        border: 1px solid $dark-color-op20;
        padding: 2px;
        @include transition(all .2s linear);

        &:before {
            content: '';
            display: block;
            width: 10px;
            height: 10px;
            @include transition(all .2s linear);

            @media (min-width: $desktop-xl) {
                width: 12px;
                height: 12px;
            }
        }
    }

    &__core:focus ~ &__field {
        &:before {
            background: $dark-color;
        }
    }

    &__core:checked ~ &__field {
        border-color: $dark-color;

        &:before {
            background: $primary-color;
        }
    }

    &.choice-field--radio {
        .choice-field__field {
            @include border-radius(50%);

            &:before {
                @include border-radius(50%);
            }
        }
    }
}
.choice-field--light {
    .choice-field__field {
        border: 1px solid $light-color;
    }

    .choice-field__core:focus ~ .choice-field__field {
        &:before {
            background: $light-color;
        }
    }

    .choice-field__core:focus ~ .choice-field__field {
        &:before {
            background: $primary-color;
        }
    }

    .choice-field__core:checked ~ .choice-field__field {
        border-color: $light-color;
    }
}
.choice-field.error {
    .choice-field__field {
        border-color: $error-color;
    }
}

.choice-item {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;

    &__field {
        padding: 2px 0 0 0;
    }

    &__description {
        padding: 0 0 0 12px;
        font-size: $main-font-size;
        line-height: $main-font-size + 6px;

        @media (min-width: $desktop-xl) {
            font-size: $main-font-size-01;
            line-height: $main-font-size-01 + 6px;
            padding-left: 16px;
        }
    }
}

.choice-list {
    list-style-type: none;

    > li {
        padding: 4px 0;

        &:first-child {
            padding-top: 0;
        }

        &:last-child {
            padding-bottom: 0;
        }
    }
}

Tiles

Buttons are the main clickable blocks. They are filled or stroke, large, small or regular in some colours and can be freely extended and modified.

HTML

<article class="tile tile--clear">
    <div class="tile__wrapper">
        <div class="tile__base-layer"
             style="background-image: url('/img/pictures/husaria.jpg')">

        </div>

        <div class="tile__above-layer">

        </div>        
            </div>
    
    </article>

  • The winged hussars arrived

    The Polish hussars were one of the main types of Polish cavalry in Poland and in the Polish–Lithuanian Commonwealth between the 16th and 18th centuries.

  • The winged hussars arrived

    The Polish hussars were one of the main types of cavalry in Poland.

HTML

<article class="tile tile--standard">
    <div class="tile__wrapper">
        <div class="tile__base-layer"
             style="background-image: url('/img/pictures/husaria.jpg')">

        </div>

        <div class="tile__above-layer">

        </div>        
        
        <div class="tile__content-layer">
            <div class="tile__inner">
                <header class="tile__header">
                    <h3 class="simple-title">The winged hussars arrived</h3>
                </header>

                <div class="tile__content">
                    <div class="text">
                        <p>
                            The Polish hussars were one of the main types of Polish cavalry in Poland and in the Polish–Lithuanian Commonwealth between the 16th and 18th centuries.
                        </p>
                    </div>
                </div>

            </div>
        </div>
            </div>
    
    </article>

  • The winged hussars arrived

    The Polish hussars were one of the main types of Polish cavalry in Poland and in the Polish–Lithuanian Commonwealth between the 16th and 18th centuries.

  • The winged hussars arrived

    The Polish hussars were one of the main types of cavalry in Poland.

HTML

<article class="tile tile--content-revealing">
    <div class="tile__wrapper">
        <div class="tile__base-layer"
             style="background-image: url('/img/pictures/husaria.jpg')">

        </div>

        
        
        <div class="tile__content-layer">
            <div class="tile__inner">
                <header class="tile__header">
                    <h3 class="simple-title">The winged hussars arrived</h3>
                </header>

                <div class="tile__content">
                    <div class="text">
                        <p>
                            The Polish hussars were one of the main types of Polish cavalry in Poland and in the Polish–Lithuanian Commonwealth between the 16th and 18th centuries.
                        </p>
                    </div>
                </div>

            </div>
        </div>
            </div>
    
    </article>

  • The winged hussars arrived

    The Polish hussars were one of the main types of Polish cavalry in Poland and in the Polish–Lithuanian Commonwealth between the 16th and 18th centuries.

  • The winged hussars arrived

    The Polish hussars were one of the main types of Polish cavalry in Poland and in the Polish–Lithuanian Commonwealth between the 16th and 18th centuries.

HTML

<article class="tile tile--content-beneath">
    <div class="tile__wrapper">
        <div class="tile__base-layer"
             style="background-image: url('/img/pictures/husaria.jpg')">

        </div>

        <div class="tile__above-layer">

        </div>        
            </div>
    
        <div class="tile__content-container">
                <header class="tile__header">
                    <h3 class="simple-title">The winged hussars arrived</h3>
                </header>

                <div class="tile__content">
                    <div class="text">
                        <p>
                            The Polish hussars were one of the main types of Polish cavalry in Poland and in the Polish–Lithuanian Commonwealth between the 16th and 18th centuries.
                        </p>
                    </div>
                </div>

    </div>
    </article>

SCSS

.tile {
    max-width: 460px;
    cursor: pointer;

    &__wrapper {
        position: relative;
    }

    &__base-layer {
        background-size: cover;
        background-position: center;
        padding: 0 0 65% 0;
    }

    &__above-layer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: $dark-color;
        opacity: 0;
        @include transition(all .2s ease-in-out);
    }

    &__content-layer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        color: $light-color;
        @include background-gradient-down(rgba($dark-color, 0) 50%, rgba($dark-color, .2) 70%, rgba($dark-color, .2) 100%);
    }

    &__inner {
        padding: 32px 20px;
    }

    &__header {
        padding: 0 0 8px 0;
    }

    &__content-container {
        padding: 20px 0 0 0;
    }

    &:hover,
    &:focus {
        .tile__above-layer {
            opacity: .3;
        }
    }
}
.tile--square {
    max-width: 300px;

    .tile__base-layer {
        padding-bottom: 100%;
    }
}
.tile--content-revealing {
    .tile__content-layer {
        opacity: 0;
        @include transition(all .4s ease-in-out);
    }

    &:hover,
    &:focus {
        .tile__content-layer {
            opacity: 1;
        }
    }
}

Icon item

Icon clock

Lorem ipsum dolor sit amet

Quisque adipiscing elit odio, fermentum rutrum. In sodales wisi accumsan luctus.

HTML

  • <article class="icon-item">
        <div class="icon-item__icon-container">
            <img class="icon-item__icon" src="/img/icons/large/icon-clock.svg" alt="Icon clock" />
        </div>

        <div class="icon-item__description-container">
            <header class="icon-item__header">
                <h3 class="simple-title">Lorem ipsum dolor sit amet</h3>
            </header>

            <div class="text">
                <p>
                Quisque adipiscing elit odio, fermentum rutrum. In&nbsp;sodales wisi accumsan luctus.
                </p>
            </div>
        </div>
    </article>

SCSS

.icon-item {
    text-align: center;
    max-width: 300px;
    margin: 0 auto;

    @media (min-width: $desktop-xl) {
        max-width: 400px;
    }

    &__icon {
        width: 100px;
        height: 100px;
        display: block;
        margin: 0 auto;

        @media (min-width: $desktop-xl) {
            width: 120px;
            height: 120px;
        }
    }

    &__icon-container {
        padding: 0 0 20px 0;
    }

    &__header {
        padding: 0 0 20px 0;
    }
}

Icon label

  • E-mail

    Lorem ipsum dolor sit amet

  • E-mail

    Lorem ipsum dolor sit amet

HTML

  • <article class="icon-label">
        <div class="icon-label__icon-container">
            <img class="icon-label__icon" src="/img/icons/medium/icon-email.svg" alt="E-mail" />
        </div>

        <div class="icon-label__description-container">
            <p class="text">
                Lorem ipsum dolor sit amet
            </p>
        </div>
    </article>

SCSS

.icon-label {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    &__icon-container {
        padding: 0 12px 0 0;
    }

    &__icon {
        display: block;
        width: 26px;
    
        @media (min-width: $desktop-xl) {
            width: 32px;
        }
    }
    &__icon--small {
        width: 20px;

        @media (min-width: $desktop-xl) {
            width: 24px;
        }
    }
}
.icon-label--small-space {
    .icon-label__icon-container {
        padding-right: 8px;
    }
}
.icon-label--more-space {
    .icon-label__icon-container {
        padding-right: 20px;
    }
}
.icon-label--reverse {
    .icon-label__icon-container {
        padding: 0 0 0 12px;
    }
}
.icon-label--reverse.icon-label--more-space {
    .icon-label__icon-container {
        padding-left: 20px;
    }
}

.icon-label--decorated {
    .icon-label__icon-container {
        position: relative;
        padding-right: 32px;

        &:before {
            content: '';
            display: block;
            position: absolute;
            top: 10%;
            right: 16px;
            width: 1px;
            height: 80%;
            background: $dark-color-op20;
        }
    }
}

Titled label

  • Helpline
    +48 723 917 812

HTML

  • <section class="titled-label">
        <header class="titled-label__header">
            Helpline
        </header>

        <div class="titled-label__content">
            +48 723 917 812
        </div>
    </section>

SCSS

.titled-label {
    &__header {
        font-size: $main-font-size;
        padding: 0 0 8px 0;

        @media (min-width: $desktop-xl) {
            font-size: $main-font-size-00;
        }
    }

    &__content {
        font-size: $large-font-size;
        font-weight: 700;

        @media (min-width: $desktop-m) {
            font-size: $large-font-size-01;
        }

        @media (min-width: $desktop-xl) {
            font-size: $large-font-size-02;
        }
    }
}

Extended icon

Extended icon is an abstract class which other icons can extend. It's constructed as a block with :before and :after pseudoelements laying on each other (:after is above the :before). :before is visible by default and :after could be displayed on hover or when the icon is active.

When the icon extends extended-icon, it should have dimensions and appropriate pictures for :before and :after set.

Extended icon is very useful to construct interface icons that should be defined once. For icons, which should rather use regular img elements (i.e. icons changed in CMS system), consider using the Plain extended icon.

HTML

  • <div class="icon-email"></div>

SCSS

.extended-icon {
    display: block;
    overflow: hidden;
    position: relative;
    text-indent: -10000px;
    text-align: left;

    &:before,
    &:after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        @include transition(all .2s linear);
    }

    &:after {
        opacity: 0;
    }
}
.extended-icon--interactive {
    cursor: pointer;

    &:hover,
    &:focus {

        &:after {
            opacity: 1;
        }
    }
}

.icon-email {
    @extend .extended-icon;
    @extend .extended-icon--interactive;
    width: 48px;
    height: 48px;

    &:before {
        background-image: url('/img/icons/medium/icon-email.svg');
    }

    &:after {
        background-image: url('/img/icons/medium/icon-email-primary.svg');
    }
}

Plain extended icon

Plain extended icon is a container for icon which changes its appearance on some actions (hover or state of the object) and needs two images to work properly and can't be a structure extending the extended-icon because it can't be defined in CSS stylesheet and needs to be changable for example in the CMS system.

It is constructed as a block with base-layer and above-layer elements laying on each other. Base-layer is visible by default and sets up the object's dimensions.

HTML

  • <div class="plain-extended-icon plain-extended-icon--interactive">
        <div class="plain-extended-icon__base-layer">
            <img class="plain-extended-icon__icon" src="/img/icons/medium/icon-email.svg" alt="" />
        </div>

        <div class="plain-extended-icon__above-layer">
            <img class="plain-extended-icon__icon" src="/img/icons/medium/icon-email-primary.svg" alt="" />
        </div>
    </div>

SCSS

.plain-extended-icon {
    display: inline-block;
    position: relative;

    &__base-layer {
        position: relative;
        @include transition(all .2s linear);
    }

    &__above-layer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        @include transition(all .2s linear);
    }
}
.plain-extended-icon--interactive {
    cursor: pointer;

    &:hover,
    &:focus {
        .plain-extended-icon__above-layer {
            opacity: 1;
        }
    }
}

Lotem ipsum dolor sit amet

header.section-header
h2.section-title
div.text.text--distinguished

Maecenas nec quam. Ut a bibendum tellus, quis velit nulla nisl risus, consequat diam. Fusce aliquet ipsum sit amet, est. Curabitur nec ultrices et, scelerisque ligula, quis lorem nec magna ac turpis velit, vitae sagittis porta, turpis viverra pede dictum a, urna.

div.text

Aenean augue turpis, accumsan lectus bibendum purus feugiat tempus. Suspendisse auctor, sapien aliquet vulputate, arcu sit amet, accumsan et, elementum fringilla gravida. Duis ac lacus. Aenean et magnis dis parturient montes, nascetur ridiculus mus. Nunc vulputate.

Morbi porttitor, nulla ac massa in nisl. Nullam tellus felis auctor vitae, imperdiet neque. Etiam tempor auctor, egestas turpis. Fusce aliquam euismod nulla pulvinar augue. Pellentesque varius nunc ac turpis tellus, elementum vitae, vehicula neque. Phasellus pulvinar vitae, imperdiet nec.

header.section-subheader
h3.section-subtitle

Quisque facilisis gravida, erat blandit libero

Donec eget urna. Nulla iaculis odio, in faucibus condimentum ligula, sed lorem scelerisque fermentum malesuada. In hac habitasse platea dictumst. Vestibulum ante sodales nulla in faucibus ligula, elementum quis, aliquam turpis.

Fusce ullamcorper feugiat, pulvinar interdum. Etiam lobortis velit nec mauris. Pellentesque eu enim. Duis ipsum. Suspendisse dolor sit amet sapien accumsan sit amet, varius risus nec mauris. Nullam pharetra hendrerit vitae, pede.

In porttitor eros ut eros orci ut nisl

header.subsection-header
h4.subsection-title

Donec eget urna. Nulla iaculis odio, in faucibus condimentum ligula, sed lorem scelerisque fermentum malesuada. In hac habitasse platea dictumst.

SCSS

.section-header {
  padding: 0 0 32px 0;
}

.section-subheader {
  padding: 0 0 20px 0;
}

.subsection-header {
  padding: 0 0 32px 0;
}

.subsection-subheader {
  padding: 0 0 20px 0;
}

.section-pretitle {
  font-size: $main-font-size;
  color: $dark-color-04;
  font-style: italic;
  font-weight: 400;

  @media (min-width: $desktop-m) {
    font-size: $larger-font-size;
  }
}

.simple-header {
  padding: 0 0 16px 0;
}

.plain-header {
  padding: 0 0 8px 0;

  @media (min-width: $desktop-xl) {
    padding-bottom: 12px;
  }
}