<section class="ds-example example-pagination">
    <div class="html">
        <div class="row">
            <div class="col">
                <nav class="pagination-wrapper pagination-box">
                    <ul class="pagination">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" aria-label="Previous">
                                <span aria-hidden="true">‹</span>
                                <span class="sr-only">Previous</span>
                            </a>
                        </li>
                        <li class="page-item active"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#" aria-label="Next">
                                <span aria-hidden="true">›</span>
                                <span class="sr-only">Next</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="col">
                <nav class="pagination-wrapper pagination-box">
                    <ul class="pagination">
                        <li class="page-item">
                            <a class="page-link" href="#" aria-label="Previous">
                                <span aria-hidden="true">‹</span>
                                <span class="sr-only">Previous</span>
                            </a>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item active"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#" aria-label="Next">
                                <span aria-hidden="true">›</span>
                                <span class="sr-only">Next</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
    <pre>
        <code>&lt;nav class="pagination-wrapper pagination-box">
    &lt;ul class="pagination">
        &lt;li class="page-item">
            &lt;a class="page-link" href="#" aria-label="Previous">
                &lt;span aria-hidden="true">‹&lt;/span>
                &lt;span class="sr-only">Previous&lt;/span>
            &lt;/a>
        &lt;/li>
        &lt;li class="page-item">&lt;a class="page-link" href="#">1&lt;/a>&lt;/li>
        &lt;li class="page-item">&lt;a class="page-link" href="#">2&lt;/a>&lt;/li>
        &lt;li class="page-item">&lt;a class="page-link" href="#">3&lt;/a>&lt;/li>
        &lt;li class="page-item">
            &lt;a class="page-link" href="#" aria-label="Next">
                &lt;span aria-hidden="true">›&lt;/span>
                &lt;span class="sr-only">Next&lt;/span>
            &lt;/a>
        &lt;/li>
    &lt;/ul>
&lt;/nav></code>
    </pre>
</section>
<section class="ds-example example-pagination">
    <div class="html">
        <div class="row">
            <div class="col">
                <nav class="pagination-wrapper pagination-link">
                    <ul class="pagination">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" aria-label="Previous">
                                <span aria-hidden="true">{% include '@SyliusShop/Icons/arrow.html.twig' %}</span>
                                <span class="sr-only">Previous</span>
                            </a>
                        </li>
                        <li class="page-item active"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#" aria-label="Next">
                                <span aria-hidden="true">{% include '@SyliusShop/Icons/arrow.html.twig' %}</span>
                                <span class="sr-only">Next</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="col">
                <nav class="pagination-wrapper pagination-link">
                    <ul class="pagination">
                        <li class="page-item">
                            <a class="page-link" href="#" aria-label="Previous">
                                <span aria-hidden="true">{% include '@SyliusShop/Icons/arrow.html.twig' %}</span>
                                <span class="sr-only">Previous</span>
                            </a>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item active"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#" aria-label="Next">
                                <span aria-hidden="true">{% include '@SyliusShop/Icons/arrow.html.twig' %}</span>
                                <span class="sr-only">Next</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
    <pre>
        <code>&lt;nav class="pagination-wrapper pagination-link">
    &lt;ul class="pagination">
        &lt;li class="page-item">
            &lt;a class="page-link" href="#" aria-label="Previous">
                &lt;span aria-hidden="true">
                    {&#37; include '@SyliusShop/Icons/arrow.html.twig' &#37;}
                &lt;/span>
                &lt;span class="sr-only">Previous&lt;/span>
            &lt;/a>
        &lt;/li>
        &lt;li class="page-item">&lt;a class="page-link" href="#">1&lt;/a>&lt;/li>
        &lt;li class="page-item">&lt;a class="page-link" href="#">2&lt;/a>&lt;/li>
        &lt;li class="page-item">&lt;a class="page-link" href="#">3&lt;/a>&lt;/li>
        &lt;li class="page-item">
            &lt;a class="page-link" href="#" aria-label="Next">
                &lt;span aria-hidden="true">
                    {&#37; include '@SyliusShop/Icons/arrow.html.twig' &#37;}
                &lt;/span>
                &lt;span class="sr-only">Next&lt;/span>
            &lt;/a>
        &lt;/li>
    &lt;/ul>
&lt;/nav></code>
    </pre>
</section>
<section class="ds-example example-pagination">
    <div class="html">
        <nav class="pagination-wrapper pagination-btn">
            <p>{{ 'app.design_system.components.pagination.pagination_text'|trans }}</p>
            <button class="btn btn-outline-primary">{{ 'app.design_system.components.pagination.pagination_text_btn'|trans }}</button>
        </nav>
    </div>
    <pre>
        <code>&lt;nav class="pagination-wrapper pagination-btn">
    &lt;p>...&lt;/p>
    &lt;button class="btn btn-outline-primary">...&lt;/button>
&lt;/nav></code>
    </pre>
</section>
