Piktogramy

Piktogramy służą do zobrazowania idei lub pojęcia w schematyczny i metaforyczny sposób. Mogą być wykorzystywane zamiast zdjęć czy ilustracji obok tekstu w celu dodatkowego wzmocnienia komunikatu.

Pobierz piktogramy

Budowa

Żeby nowe piktogramy były spójne z już istniejącymi powinny one opierać się na tych samych zasadach kompozycyjnych i estetycznych:

– Piktogram wraz z polem ochronnym powinien mieścić się w polu o wymiarach 96px na 96px
– Piktrogram narysowany jest linią o grubości 4px
– Linia mieści się w siatce pikselowej z priorytetem dla modułów 4px i 2px
– Zachowywany jest odpowiedni dla kształtu piktogramu odstęp od krawędzi pola
– Dopuszczalne jest wyprowadzenie pojedynczych linii na spad przy otwartej kompozycji piktogramu

Pobierz siatkę

Rozmiary i zastosowanie

Piktogramy na stronach korporacyjnych ORLEN mogą występować w trzech podstawowych rozmiarach: 96px, 64px i 48px. Rozmiar uwzględnia pole ochronne piktogramu. Nie należy zmieniać podstawowych rozmiarów piktogramów.


<img class="pictogram--l" id="image-1" src="#" alt="pictogram" />
<img class="pictogram--m" id="image-2" src="#" alt="pictogram" />
<img class="pictogram--s" id="image-3" src="#" alt="pictogram" />

Łączenie z tekstem

Piktoram może być umieszczony obok tekstu albo nad tekstem z zachowaniem odpwiednich odstępów. W przypdadku umieszczenia obok tekstu odstęp pomędzy piktogramem i tekstem powinień wynosić 24px na rodzielczościach dekstop i tablet oraz 16px w wersji mobile.

Type something

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Type something

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


<div class="grid">
  <div class="grid__col m-col--12 t-col--6 d-col--6">
    <section class="pictogram_section">
      <img class="pictogram--m" src="#" alt="pictogram" />
      <div class="pictogram-section__container">
        <h2 class="pictogram-section__headline headline-3">Type something</h2>
        <p class="pictogram-section__text small-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
        <button
          class="
            pictogram-section__button
            link-button link-button--right-icon link-button--red
          "
        >
          <span class="button__label">Link</span>
          <i aria-hidden="true" class="mdi icon mdi-arrow-right"></i>
        </button>
      </div>
    </section>
  </div>
  <div class="grid__col m-col--12 t-col--6 d-col--6">
    <section class="pictogram_section">
      <img class="pictogram--m" src="#" alt="pictogram" />
      <div class="pictogram-section__container">
        <h2 class="pictogram-section__headline headline-3">Type something</h2>
        <p class="pictogram-section__text small-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
        <button
          class="
            pictogram-section__button
            link-button link-button--right-icon link-button--red
          "
        >
          <span class="button__label">Link</span>
          <i aria-hidden="true" class="mdi icon mdi-arrow-right"></i>
        </button>
      </div>
    </section>
  </div>
</div>

W przypdadku umieszczenia piktogramu nad tekstem odstęp pomędzy piktogramem i tekstem powinień wynosić 24px na rodzielczościach dekstop i tablet oraz 16px w wersji mobile.

Type something

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Type something

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


<div class="grid">
  <div class="grid__col m-col--12 t-col--6 d-col--6">
    <section class="pictogram_section--top-icon col-container__column">
      <img class="pictogram--l" src="#" alt="pictogram" />
      <div class="pictogram-section__container">
        <h2 class="pictogram-section__headline headline-3">Type something</h2>
        <p class="pictogram-section__text small-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
        <button
          class="
            pictogram-section__button
            link-button link-button--right-icon link-button--red
          "
        >
          <span class="button__label">Link</span>
          <i aria-hidden="true" class="mdi icon mdi-arrow-right"></i>
        </button>
      </div>
    </section>
  </div>
  <div class="grid__col m-col--12 t-col--6 d-col--6">
    <section class="pictogram_section--top-icon col-container__column">
      <img class="pictogram--l" src="#" alt="pictogram" />
      <div class="pictogram-section__container">
        <h2 class="pictogram-section__headline headline-3">Type something</h2>
        <p class="pictogram-section__text small-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
        <button
          class="
            pictogram-section__button
            link-button link-button--right-icon link-button--red
          "
        >
          <span class="button__label">Link</span>
          <i aria-hidden="true" class="mdi icon mdi-arrow-right"></i>
        </button>
      </div>
    </section>
  </div>
</div>