Kontakt(ang. Kontakt)

Kontakt przypomina wizytówkę. Zawiera zdjęcie i podstawowe dane kontaktowe osoby, do kontaktu z którą zaprasza się użytkownika.

avatar

Joanna Nowakowska

Specjalista ds. sprzedaży

j.nowakowska@orlen.pl

Tel. 123 456 789


<div class="grid">
  <div class="grid__col m-col--12 t-col--6 d-ind--3 d-col--6">
    <section class="contact">
      <div class="contact__avatar">
        <img src="#" alt="avatar" />
      </div>
      <div class="contact__details">
        <h3 class="details__heading lead-text text--bold">Joanna Nowakowska</h3>
        <p class="detail__position body-text">Specjalista ds. sprzedaży</p>
        <a href="#" class="detail__link link-text--red"
          >j.nowakowska@orlen.pl</a
        >
        <p class="details__phone-number body-text">Tel. 123 456 789</p>
      </div>
    </section>
  </div>
</div>

  1. Zdjęcie opcjonalny

    Zaleca się stosowanie zdjęć korporacyjnych, spójnych w przypadku wszystkich osób kontaktowych.

  2. Imię i nazwisko

  3. Nazwa stanowiska

    Rekomendowany limit tekstu to 2 linijki na wszystkich rozdzielczościach.

  4. E-mail opcjonalny

    Jest to link, którego kliknięcie otwiera domyślną aplikację e-mail.

  5. Telefon służbowy opcjonalny

    Rekomendowane jest podawanie maksymalnie jednego numeru telefonu.

Warianty

Komponent występuje w różnych wariantach: może zawierać wszystkie dane lub tylko wybrane.

avatar

Joanna Nowakowska

Specjalista ds. sprzedaży

j.nowakowska@orlen.pl

Tel. 123 456 789

avatar

Joanna Nowakowska

Specjalista ds. sprzedaży

Tel. 123 456 789

avatar

Joanna Nowakowska

Specjalista ds. sprzedaży

Joanna Nowakowska

Specjalista ds. sprzedaży


<div class="grid">
  <div class="grid__col m-col--12 t-ind--3 t-col--6 d-ind--3 d-col--6">
    <section class="contact">
      <div class="contact__avatar">
        <img src="#" alt="avatar" />
      </div>
      <div class="contact__details">
        <h3 class="details__heading lead-text text--bold">Joanna Nowakowska</h3>
        <p class="detail__position body-text">Specjalista ds. sprzedaży</p>
        <a href="#" class="detail__link link-text--red"
          >j.nowakowska@orlen.pl</a
        >
        <p class="details__phone-number body-text">Tel. 123 456 789</p>
      </div>
    </section>
  </div>
  <div class="grid__col m-col--12 t-ind--3 t-col--6 d-ind--3 d-col--6">
    <section class="contact">
      <div class="contact__avatar">
        <img src="#" alt="avatar" />
      </div>
      <div class="contact__details">
        <h3 class="details__heading lead-text text--bold">Joanna Nowakowska</h3>
        <p class="detail__position body-text">Specjalista ds. sprzedaży</p>
        <p class="details__phone-number body-text">Tel. 123 456 789</p>
      </div>
    </section>
  </div>

  <div class="grid__col m-col--12 t-ind--3 t-col--6 d-ind--3 d-col--6">
    <section class="contact">
      <div class="contact__avatar">
        <img src="#" alt="avatar" />
      </div>
      <div class="contact__details">
        <h3 class="details__heading lead-text text--bold">Joanna Nowakowska</h3>
        <p class="detail__position body-text">Specjalista ds. sprzedaży</p>
      </div>
    </section>
  </div>

  <div class="grid__col m-col--12 t-ind--3 t-col--6 d-ind--3 d-col--6">
    <section class="contact">
      <div class="contact__details">
        <h3 class="details__heading lead-text text--bold">Joanna Nowakowska</h3>
        <p class="detail__position body-text">Specjalista ds. sprzedaży</p>
      </div>
    </section>
  </div>
</div>

Zasady stosowania

lorem ipsum

Stosowanie spójnych, profesjonalnych zdjęć na stronie

lorem ipsum

Dodawanie zbyt dużej liczby numerów telefonu i adresów e-mail