Cytat(ang. Quote)

Cytat wyróżnia wypowiedź lub jej fragment. Pełni zarówno rolę dekoracyjną, jak i skupia uwagę odbiorcy na istotnym przekazie. Może zawierać całość wypowiedzi, jeśli jest ona krótka. W przypadku dłuższych wypowiedzi zalecane jest wybranie jej najistotniejszego fragmentu.

Struktura

quote

Tekst cytatu zawsze zajmuje 8 kolumn siatki i jest wyrównany do prawego marginesu strony. Symbol cytatu umiesczony jest na odległości odstępu międzykolumnowego od treści cytatu.

  1. Symbol cytatu

    Jego umiejscowienie jest stałe.

  2. Treść cytatu

    Rekomendowany limit tekstu to 8 linijek na różnych rozdzielczościach.

  3. Separator

    Jego umiejscowienie jest stałe.

  4. Zdjęcie

    Zdjęcie autora cytatu. Jego umiejscowienie jest stałe.

  5. Imię, nazwisko i stanowisko

    Imię, nazwisko i stanowisko autora cytatu. Ich umiejscowienie jest stałe.

Cytat nie jest klikalny.

Fragment kodu

quote

<div class="grid">
  <div class="grid__col m-col--12 t-col--9 t-ind--2 d-col--12">
    <section class="quotation">
      <div class="quotation__container">
        <img
          id="quotes"
          src="https://ds.orlen.pl/static/quote_desktop_element_1-16fec1e0d91c83f17856d35972133dbd.png"
        />
        <div class="quote">
          <p class="l-lead">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
            ultricies odio turpis, sollicitudin tincidunt purus maximus ac.
            Suspendisse mi mauris, sodales sit amet ante in, sodales pharetra
            metus.
          </p>
          <section class="quote__bottom">
            <div class="line"></div>
            <div class="quote__element"></div>
            <div class="line"></div>
          </section>
        </div>
      </div>
      <section class="contact">
        <div class="contact__avatar">
          <img
            id="avatar"
            src="https://ds.orlen.pl/static/avatar_contact-db71409acca31d38d45f10f1a5afcc52.jpg"
            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>
    </section>
  </div>
</div>

Zasady stosowania

Cytat umieszczony na stronach z dużą ilością tekstu

Cytat wprowadza przerwę w jednolitym ciągu tekstu przyciągając uwagę użytkowników.

Cytat zawiera fragment wypowiedzi

Cytat powinien zawierać jedynie fragment długiej wypowiedzi, zaś reszta powinna znajdować się w akapicie.

Zbyt długi cytat

Nie należy umieszczać zbyt długich cytatów, ponieważ utrudniają one zrozumienie całości tekstu.

Cytat bez zdjęcia

Nie zaleca się rezygnowania ze zdjęcia, bowiem nadaje ono wypowiedzi autentyczności.