Stylebook

Pagination arrow preview

        {% include "@Components/pagination-arrow/pagination-arrow.twig" %}

          <a class="pagination-arrow  --previous"" href="#">
  <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5.5 9.5"><defs><style>.cls-1{fill:none;stroke:#0062ab;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>small right</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><polyline class="cls-1" points="0.75 8.75 4.75 4.75 0.75 0.75"/></g></g></svg>
  </span>
</a>

Pagination arrow next

        {% include "@Components/pagination-arrow/pagination-arrow.twig" with {
    props: {
      variant: "next"
    }
  }
%}

          <a class="pagination-arrow  --next" href="#">
  <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5.5 9.5"><defs><style>.cls-1{fill:none;stroke:#0062ab;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>small right</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><polyline class="cls-1" points="0.75 8.75 4.75 4.75 0.75 0.75"/></g></g></svg>
  </span>
</a>

Pagination arrow disabled

        {% include "@Components/pagination-arrow/pagination-arrow.twig" with {
    props: {
      disabled: true
    }
  }
%}

          <a class="pagination-arrow --disabled --previous"" href="#">
  <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5.5 9.5"><defs><style>.cls-1{fill:none;stroke:#0062ab;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>small right</title><g id="Vrstva_2" data-name="Vrstva 2"><g id="Vrstva_1-2" data-name="Vrstva 1"><polyline class="cls-1" points="0.75 8.75 4.75 4.75 0.75 0.75"/></g></g></svg>
  </span>
</a>

Schema

    {
  "props": {
    "size": {
      "type": "string",
      "description": "lg"
    }
  }
}