Pattern Library

{% include 'patterns/organisms/layout/main/navbar.html' %}
{% include 'patterns/organisms/header/simple_header.html' with title='Jednoduchá stránka' %}

<main role="main" class="mb-10 xl:mb-32">
  {# Anything can go in here, we'll use an example with basic text and images #}

  <div class="container--wide mb-2 lg:mb-12">
    <div class="prose max-w-none 3xl:text-lg">
      <div class="content-block">
        {{ main_text }}
        {# Example images #}
        <img
          class="richtext-image full-width"
          width="500"
          height="500"
          src="https://randomuser.me/api/portraits/men/1.jpg"
          alt="Plná šířka"
        >
        <img
          class="richtext-image left"
          width="500"
          height="500"
          src="https://randomuser.me/api/portraits/men/2.jpg"
          alt="Zarovnané doleva"
        >
        <img
          class="richtext-image right"
          width="500"
          height="500"
          src="https://randomuser.me/api/portraits/men/3.jpg"
          alt="Zarovnané doprava"
        >
        <img
          class="mx-auto my-6"
          width="500"
          height="500"
          src="https://randomuser.me/api/portraits/men/4.jpg"
          alt="Uprostřed (max 800px)"
        >
        <img
          class="float-left mr-4 mb-6 mt-0"
          width="400"
          height="400"
          src="https://randomuser.me/api/portraits/men/5.jpg"
          alt="šablona: Vlevo (max 400px)"
        >
        <img
          class="float-left mr-4 mb-6 mt-0"
          width="200"
          height="200"
          src="https://randomuser.me/api/portraits/men/6.jpg"
          alt="šablona: Vlevo (max 200px)"
        >
        <img
          class="float-right ml-4 mb-6 mt-0"
          width="400"
          height="400"
          src="https://randomuser.me/api/portraits/men/7.jpg"
          alt="šablona: Vpravo (max 400px)"
        >
        <img
          class="float-right ml-4 mb-6 mt-0"
          width="200"
          height="200"
          src="https://randomuser.me/api/portraits/men/8.jpg"
          alt="šablona: Vpravo (max 200px)"
        >
      </div>
    </div>
  </div>
</main>
{% include 'patterns/organisms/layout/footer.html' %}