@govbr-ds/core

<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="ie=edge"/> <title>Paginação</title>  <link rel="stylesheet" href="https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/fonts/rawline/css/rawline.css"/>  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700,800,900&display=swap"/>  <link rel="stylesheet" href="../../core.css"/>  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"/> </head> <body> <div class="container-fluid"> <p class="h4 mt-5">Paginação padrão</p> <nav class="br-pagination" aria-label="paginação" data-total="4" data-current="1"> <ul> <li> <button class="br-button circle" type="button" data-previous-page="data-previous-page" aria-label="Voltar página"><i class="fas fa-angle-left" aria-hidden="true"></i> </button> </li> <li><a class="page active" aria-label="Página 1" href="javascript:void(0)">1</a></li> <li><a class="page" aria-label="Página 2" href="javascript:void(0)">2</a></li> <li><a class="page" aria-label="Página 3" href="javascript:void(0)">3</a></li> <li><a class="page" aria-label="Página 4" href="javascript:void(0)">4</a></li> <li> <button class="br-button circle" type="button" data-next-page="data-next-page" aria-label="Página seguinte"><i class="fas fa-angle-right" aria-hidden="true"></i> </button> </li> </ul> </nav> <p class="h4 mt-5">Densidades</p> <div class="my-1"> <nav class="br-pagination small" aria-label="paginação" data-total="5" data-current="1"> <ul> <li> <button class="br-button circle" type="button" data-previous-page="data-previous-page" aria-label="Voltar página"><i class="fas fa-angle-left" aria-hidden="true"></i> </button> </li> <li><a class="page active" aria-label="Página 1" href="javascript:void(0)">1</a></li> <li><a class="page" aria-label="Página 2" href="javascript:void(0)">2</a></li> <li><a class="page" aria-label="Página 3" href="javascript:void(0)">3</a></li> <li><a class="page" aria-label="Página 4" href="javascript:void(0)">4</a></li> <li><a class="page" aria-label="Página 5" href="javascript:void(0)">5</a></li> <li> <button class="br-button circle" type="button" data-next-page="data-next-page" aria-label="Página seguinte"><i class="fas fa-angle-right" aria-hidden="true"></i> </button> </li> </ul> </nav> </div> <div class="my-1"> <nav class="br-pagination large" aria-label="paginação" data-total="3" data-current="1"> <ul> <li> <button class="br-button circle" type="button" data-previous-page="data-previous-page" aria-label="Voltar página"><i class="fas fa-angle-left" aria-hidden="true"></i> </button> </li> <li><a class="page active" aria-label="Página 1" href="javascript:void(0)">1</a></li> <li><a class="page" aria-label="Página 2" href="javascript:void(0)">2</a></li> <li><a class="page" aria-label="Página 3" href="javascript:void(0)">3</a></li> <li> <button class="br-button circle" type="button" data-next-page="data-next-page" aria-label="Página seguinte"><i class="fas fa-angle-right" aria-hidden="true"></i> </button> </li> </ul> </nav> </div> <p class="h4 mt-5">Ellipsis</p> <div class="my-1"> <nav class="br-pagination" aria-label="paginação" data-total="10" data-current="1"> <ul> <li> <button class="br-button circle" type="button" data-previous-page="data-previous-page" aria-label="Voltar página"><i class="fas fa-angle-left" aria-hidden="true"></i> </button> </li> <li><a class="page active" href="javascript:void(0)" aria-label="Página 1">1</a></li> <li class="pagination-ellipsis"> <button class="br-button circle" type="button" data-toggle="dropdown" aria-label="Abrir ou fechar a lista de paginação"><i class="fas fa-ellipsis-h" aria-hidden="true"></i> </button> <div class="br-list" role="menu"><a class="br-item" href="javascript:void(0)" aria-label="Página 2" role="menuitem">2</a><a class="br-item" href="javascript:void(0)" aria-label="Página 3" role="menuitem">3</a><a class="br-item" href="javascript:void(0)" aria-label="Página 4" role="menuitem">4</a><a class="br-item" href="javascript:void(0)" aria-label="Página 5" role="menuitem">5</a><a class="br-item" href="javascript:void(0)" aria-label="Página 6" role="menuitem">6</a><a class="br-item" href="javascript:void(0)" aria-label="Página 7" role="menuitem">7</a> </div> </li> <li><a class="page" href="javascript:void(0)" aria-label="Página 8">8</a></li> <li><a class="page" href="javascript:void(0)" aria-label="Página 9">9</a></li> <li><a class="page" href="javascript:void(0)" aria-label="Página 10">10</a></li> <li> <button class="br-button circle" type="button" data-next-page="data-next-page" aria-label="Proxima página"><i class="fas fa-angle-right" aria-hidden="true"></i> </button> </li> </ul> </nav> </div> <div class="my-1 d-none d-sm-block"> <nav class="br-pagination d-none d-sm-flex" aria-label="paginação" data-total="20" data-current="1"> <ul> <li> <button class="br-button circle" type="button" data-previous-page="data-previous-page" aria-label=" página"><i class="fas fa-angle-left" aria-hidden="true"></i> </button> </li> <li><a class="page active" href="javascript:void(0)" aria-label="Página 1">1</a></li> <li class="pagination-ellipsis"> <button class="br-button circle" type="button" data-toggle="dropdown" aria-label="Abrir ou fechar a lista de paginação"><i class="fas fa-ellipsis-h" aria-hidden="true"></i> </button> <div class="br-list" role="menu"><a class="br-item" href="javascript:void(0)" role="menuitem">2</a><a class="br-item" href="javascript:void(0)" role="menuitem">3</a><a class="br-item" href="javascript:void(0)" role="menuitem">4</a><a class="br-item" href="javascript:void(0)" role="menuitem">5</a><a class="br-item" href="javascript:void(0)" role="menuitem">6</a><a class="br-item" href="javascript:void(0)" role="menuitem">7</a><a class="br-item" href="javascript:void(0)" role="menuitem">8</a><a class="br-item" href="javascript:void(0)" role="menuitem">9</a> </div> </li> <li><a class="page" href="javascript:void(0)" aria-label="Página 10">10</a></li> <li><a class="page" href="javascript:void(0)" aria-label="Página 11">11</a></li> <li><a class="page" href="javascript:void(0)" aria-label="Página 12">12</a></li> <li class="pagination-ellipsis"> <button class="br-button circle" type="button" data-toggle="dropdown" aria-label="Abrir ou fechar a lista de paginação"><i class="fas fa-ellipsis-h" aria-hidden="true"></i> </button> <div class="br-list" role="menu"><a class="br-item" href="javascript:void(0)" role="menuitem">13</a><a class="br-item" href="javascript:void(0)" role="menuitem">14</a><a class="br-item" href="javascript:void(0)" role="menuitem">15</a><a class="br-item" href="javascript:void(0)" role="menuitem">16</a><a class="br-item" href="javascript:void(0)" role="menuitem">17</a><a class="br-item" href="javascript:void(0)" role="menuitem">18</a><a class="br-item" href="javascript:void(0)" role="menuitem">19</a> </div> </li> <li><a class="page" href="javascript:void(0)">20</a></li> <li> <button class="br-button circle" type="button" data-next-page="data-next-page" aria-label="Página seguinte"><i class="fas fa-angle-right" aria-hidden="true"></i> </button> </li> </ul> </nav> </div> <div class="my-1 d-none d-sm-block"> <nav class="br-pagination" aria-label="paginação" data-total="10" data-current="1"> <ul> <li> <button class="br-button circle" type="button" data-previous-page="data-previous-page" aria-label="Voltar página"><i class="fas fa-angle-left" aria-hidden="true"></i> </button> </li> <li><a class="page active" href="javascript:void(0)" aria-label=" página 1">1</a></li> <li><a class="page" href="javascript:void(0)" aria-label=" página 2">2</a></li> <li><a class="page" href="javascript:void(0)" aria-label=" página 3">3</a></li> <li><a class="page" href="javascript:void(0)" aria-label=" página 4">4</a></li> <li class="pagination-ellipsis"> <button class="br-button circle" type="button" data-toggle="dropdown" aria-label="Abrir ou fechar a lista de paginação"><i class="fas fa-ellipsis-h" aria-hidden="true"></i> </button> <div class="br-list" role="menu"><a class="br-item" href="javascript:void(0)" aria-label=" página 5" role="menuitem">5</a><a class="br-item" href="javascript:void(0)" aria-label=" página 6" role="menuitem">6</a><a class="br-item" href="javascript:void(0)" aria-label=" página 7" role="menuitem">7</a><a class="br-item" href="javascript:void(0)" aria-label=" página 8" role="menuitem">8</a><a class="br-item" href="javascript:void(0)" aria-label=" página 9" role="menuitem">9</a> </div> </li> <li><a class="page" href="javascript:void(0)" aria-label=" página 10">10</a></li> <li> <button class="br-button circle" type="button" data-next-page="data-next-page" aria-label="Página seguinte"><i class="fas fa-angle-right" aria-hidden="true"></i> </button> </li> </ul> </nav> </div> <p class="h4 mt-5">Paginação contextual</p> <nav class="br-pagination" aria-label="paginação" data-total="50" data-current="1" data-per-page="20"> <div class="pagination-per-page"> <div class="br-select"> <div class="br-input"> <label for="per-page-selection-random-52133">Exibir</label> <input id="per-page-selection-random-52133" type="text" placeholder=" "/> <button class="br-button" type="button" aria-label="Exibir lista" tabindex="-1" data-trigger="data-trigger"><i class="fas fa-angle-down" aria-hidden="true"></i> </button> </div> <div class="br-list" tabindex="0"> <div class="br-item" tabindex="-1"> <div class="br-radio"> <input id="per-page-10-random-52133" type="radio" name="per-page-random-52133" value="per-page-10-random-52133" checked="checked"/> <label for="per-page-10-random-52133">10</label> </div> </div> <div class="br-item" tabindex="-1"> <div class="br-radio"> <input id="per-page-20-random-52133" type="radio" name="per-page-random-52133" value="per-page-20-random-52133"/> <label for="per-page-20-random-52133">20</label> </div> </div> <div class="br-item" tabindex="-1"> <div class="br-radio"> <input id="per-page-30-random-52133" type="radio" name="per-page-random-52133" value="per-page-30-random-52133"/> <label for="per-page-30-random-52133">30</label> </div> </div> </div> </div> </div><span class="br-divider d-none d-sm-block mx-3"></span> <div class="pagination-information d-none d-sm-flex"><span class="current">1</span>–<span class="per-page">20</span> de <span class="total">50</span> itens</div> <div class="pagination-go-to-page d-none d-sm-flex ml-auto"> <div class="br-select"> <div class="br-input"> <label for="go-to-selection-random-12325">Página</label> <input id="go-to-selection-random-12325" type="text" placeholder=" "/> <button class="br-button" type="button" aria-label="Exibir lista" tabindex="-1" data-trigger="data-trigger"><i class="fas fa-angle-down" aria-hidden="true"></i> </button> </div> <div class="br-list" tabindex="0"> <div class="br-item" tabindex="-1"> <div class="br-radio"> <input id="go-to-1-random-12325" type="radio" name="go-to-random-12325" value="go-to-1-random-12325" checked="checked"/> <label for="go-to-1-random-12325">1</label> </div> </div> <div class="br-item" tabindex="-1"> <div class="br-radio"> <input id="go-to-2-random-12325" type="radio" name="go-to-random-12325" value="go-to-2-random-12325"/> <label for="go-to-2-random-12325">2</label> </div> </div> <div class="br-item" tabindex="-1"> <div class="br-radio"> <input id="go-to-3-random-12325" type="radio" name="go-to-random-12325" value="go-to-3-random-12325"/> <label for="go-to-3-random-12325">3</label> </div> </div> </div> </div> </div><span class="br-divider d-none d-sm-block mx-3"></span> <div class="pagination-arrows ml-auto ml-sm-0"> <button class="br-button circle" type="button" aria-label="Voltar página"><i class="fas fa-angle-left" aria-hidden="true"></i> </button> <button class="br-button circle" type="button" aria-label="Página seguinte"><i class="fas fa-angle-right" aria-hidden="true"></i> </button> </div> </nav> <hr/> <nav class="br-pagination" aria-label="paginação" data-total="50" data-current="1" data-per-page="10"> <div class="pagination-arrows"> <button class="br-button circle" type="button" aria-label="Voltar página"><i class="fas fa-angle-left" aria-hidden="true"></i> </button> <button class="br-button circle" type="button" aria-label="Página seguinte"><i class="fas fa-angle-right" aria-hidden="true"></i> </button> </div><span class="br-divider d-none d-sm-block mx-3"></span> <div class="pagination-go-to-page d-none d-sm-flex"> <div class="br-select"> <div class="br-input"> <label for="go-to-selection-random-79737">Página</label> <input id="go-to-selection-random-79737" type="text" placeholder=" "/> <button class="br-button" type="button" aria-label="Exibir lista" tabindex="-1" data-trigger="data-trigger"><i class="fas fa-angle-down" aria-hidden="true"></i> </button> </div> <div class="br-list" tabindex="0"> <div class="br-item" tabindex="-1"> <div class="br-radio"> <input id="go-to-1-random-79737" type="radio" name="go-to-random-79737" value="go-to-1-random-79737" checked="checked"/> <label for="go-to-1-random-79737">1</label> </div> </div> <div class="br-item" tabindex="-1"> <div class="br-radio"> <input id="go-to-2-random-79737" type="radio" name="go-to-random-79737" value="go-to-2-random-79737"/> <label for="go-to-2-random-79737">2</label> </div> </div> <div class="br-item" tabindex="-1"> <div class="br-radio"> <input id="go-to-3-random-79737" type="radio" name="go-to-random-79737" value="go-to-3-random-79737"/> <label for="go-to-3-random-79737">3</label> </div> </div> <div class="br-item" tabindex="-1"> <div class="br-radio"> <input id="go-to-4-random-79737" type="radio" name="go-to-random-79737" value="go-to-4-random-79737"/> <label for="go-to-4-random-79737">4</label> </div> </div> <div class="br-item" tabindex="-1"> <div class="br-radio"> <input id="go-to-5-random-79737" type="radio" name="go-to-random-79737" value="go-to-5-random-79737"/> <label for="go-to-5-random-79737">5</label> </div> </div> </div> </div> </div> <div class="pagination-per-page ml-auto"> <div class="br-select"> <div class="br-input"> <label for="per-page-selection-random-65309">Exibir</label> <input id="per-page-selection-random-65309" type="text" placeholder=" "/> <button class="br-button" type="button" aria-label="Exibir lista" tabindex="-1" data-trigger="data-trigger"><i class="fas fa-angle-down" aria-hidden="true"></i> </button> </div> <div class="br-list" tabindex="0"> <div class="br-item" tabindex="-1"> <div class="br-radio"> <input id="per-page-10-random-65309" type="radio" name="per-page-random-65309" value="per-page-10-random-65309" checked="checked"/> <label for="per-page-10-random-65309">10</label> </div> </div> <div class="br-item" tabindex="-1"> <div class="br-radio"> <input id="per-page-20-random-65309" type="radio" name="per-page-random-65309" value="per-page-20-random-65309"/> <label for="per-page-20-random-65309">20</label> </div> </div> <div class="br-item" tabindex="-1"> <div class="br-radio"> <input id="per-page-30-random-65309" type="radio" name="per-page-random-65309" value="per-page-30-random-65309"/> <label for="per-page-30-random-65309">30</label> </div> </div> </div> </div> </div><span class="br-divider d-none d-sm-block mx-3"></span> <div class="pagination-information d-none d-sm-flex"><span class="current">1</span>–<span class="per-page">10</span> de <span class="total">50</span> itens</div> </nav> <hr/> <nav class="br-pagination" aria-label="paginação" data-total="50" data-current="1" data-per-page="10"> <div class="pagination-per-page"> <div class="br-select"> <div class="br-input"> <label for="per-page-selection-random-88670">Exibir</label> <input id="per-page-selection-random-88670" type="text" placeholder=" "/> <button class="br-button" type="button" aria-label="Exibir lista" tabindex="-1" data-trigger="data-trigger"><i class="fas fa-angle-down" aria-hidden="true"></i> </button> </div> <div class="br-list" tabindex="0"> <div class="br-item" tabindex="-1"> <div class="br-radio"> <input id="per-page-10-random-88670" type="radio" name="per-page-random-88670" value="per-page-10-random-88670" checked="checked"/> <label for="per-page-10-random-88670">10</label> </div> </div> <div class="br-item" tabindex="-1"> <div class="br-radio"> <input id="per-page-20-random-88670" type="radio" name="per-page-random-88670" value="per-page-20-random-88670"/> <label for="per-page-20-random-88670">20</label> </div> </div> <div class="br-item" tabindex="-1"> <div class="br-radio"> <input id="per-page-30-random-88670" type="radio" name="per-page-random-88670" value="per-page-30-random-88670"/> <label for="per-page-30-random-88670">30</label> </div> </div> </div> </div> </div><span class="br-divider d-none d-sm-block mx-3"></span> <div class="pagination-information d-none d-sm-flex"><span class="current">1</span>–<span class="per-page">10</span> de <span class="total">50</span> itens</div><span class="br-divider d-none d-sm-block mx-3"></span> <div class="pagination-go-to-page d-none d-sm-flex"> <div class="br-select"> <div class="br-input"> <label for="go-to-selection-random-74371">Página</label> <input id="go-to-selection-random-74371" type="text" placeholder=" "/> <button class="br-button" type="button" aria-label="Exibir lista" tabindex="-1" data-trigger="data-trigger"><i class="fas fa-angle-down" aria-hidden="true"></i> </button> </div> <div class="br-list" tabindex="0"> <div class="br-item" tabindex="-1"> <div class="br-radio"> <input id="go-to-1-random-74371" type="radio" name="go-to-random-74371" value="go-to-1-random-74371" checked="checked"/> <label for="go-to-1-random-74371">1</label> </div> </div> <div class="br-item" tabindex="-1"> <div class="br-radio"> <input id="go-to-2-random-74371" type="radio" name="go-to-random-74371" value="go-to-2-random-74371"/> <label for="go-to-2-random-74371">2</label> </div> </div> <div class="br-item" tabindex="-1"> <div class="br-radio"> <input id="go-to-3-random-74371" type="radio" name="go-to-random-74371" value="go-to-3-random-74371"/> <label for="go-to-3-random-74371">3</label> </div> </div> <div class="br-item" tabindex="-1"> <div class="br-radio"> <input id="go-to-4-random-74371" type="radio" name="go-to-random-74371" value="go-to-4-random-74371"/> <label for="go-to-4-random-74371">4</label> </div> </div> <div class="br-item" tabindex="-1"> <div class="br-radio"> <input id="go-to-5-random-74371" type="radio" name="go-to-random-74371" value="go-to-5-random-74371"/> <label for="go-to-5-random-74371">5</label> </div> </div> </div> </div> </div> <div class="pagination-arrows ml-auto"> <button class="br-button circle" type="button" aria-label="Voltar página"><i class="fas fa-angle-left" aria-hidden="true"></i> </button> <button class="br-button circle" type="button" aria-label="Página seguinte"><i class="fas fa-angle-right" aria-hidden="true"></i> </button> </div> </nav> <p class="h4 mt-5">Fundo Escuro</p> <div class="bg-gray-60 p-3"> <nav class="br-pagination dark-mode" aria-label="paginação" data-total="10" data-current="1"> <ul> <li> <button class="br-button circle" type="button" data-previous-page="data-previous-page" aria-label="Voltar página"><i class="fas fa-angle-left" aria-hidden="true"></i> </button> </li> <li><a class="page active" href="javascript:void(0)" aria-label="Página 1">1</a></li> <li class="pagination-ellipsis"> <button class="br-button circle" type="button" data-toggle="dropdown" aria-label="Abrir ou fechar a lista de paginação"><i class="fas fa-ellipsis-h" aria-hidden="true"></i> </button> <div class="br-list" role="menu"><a class="br-item" href="javascript:void(0)" aria-label="Página 2" role="menuitem">2</a><a class="br-item" href="javascript:void(0)" aria-label="Página 3" role="menuitem">3</a><a class="br-item" href="javascript:void(0)" aria-label="Página 4" role="menuitem">4</a><a class="br-item" href="javascript:void(0)" aria-label="Página 5" role="menuitem">5</a><a class="br-item" href="javascript:void(0)" aria-label="Página 6" role="menuitem">6</a><a class="br-item" href="javascript:void(0)" aria-label="Página 7" role="menuitem">7</a> </div> </li> <li><a class="page" href="javascript:void(0)" aria-label="Página 8">8</a></li> <li><a class="page" href="javascript:void(0)" aria-label="Página 9">9</a></li> <li><a class="page" href="javascript:void(0)" aria-label="Página 10">10</a></li> <li> <button class="br-button circle" type="button" data-next-page="data-next-page" aria-label="Proxima página"><i class="fas fa-angle-right" aria-hidden="true"></i> </button> </li> </ul> </nav> <hr/> <nav class="br-pagination dark-mode" aria-label="paginação" data-total="50" data-current="1" data-per-page="10"> <div class="pagination-per-page"> <div class="br-select"> <div class="br-input"> <label for="per-page-selection-random-88846">Exibir</label> <input id="per-page-selection-random-88846" type="text" placeholder=" "/> <button class="br-button" type="button" aria-label="Exibir lista" tabindex="-1" data-trigger="data-trigger"><i class="fas fa-angle-down" aria-hidden="true"></i> </button> </div> <div class="br-list" tabindex="0"> <div class="br-item" tabindex="-1"> <div class="br-radio"> <input id="per-page-10-random-88846" type="radio" name="per-page-random-88846" value="per-page-10-random-88846" checked="checked"/> <label for="per-page-10-random-88846">10</label> </div> </div> <div class="br-item" tabindex="-1"> <div class="br-radio"> <input id="per-page-20-random-88846" type="radio" name="per-page-random-88846" value="per-page-20-random-88846"/> <label for="per-page-20-random-88846">20</label> </div> </div> <div class="br-item" tabindex="-1"> <div class="br-radio"> <input id="per-page-30-random-88846" type="radio" name="per-page-random-88846" value="per-page-30-random-88846"/> <label for="per-page-30-random-88846">30</label> </div> </div> </div> </div> </div><span class="br-divider d-none d-sm-block mx-3"></span> <div class="pagination-information d-none d-sm-flex"><span class="current">1</span>–<span class="per-page">10</span> de <span class="total">50</span> itens</div><span class="br-divider d-none d-sm-block mx-3"></span> <div class="pagination-go-to-page d-none d-sm-flex"> <div class="br-select"> <div class="br-input"> <label for="go-to-selection-random-25235">Página</label> <input id="go-to-selection-random-25235" type="text" placeholder=" "/> <button class="br-button" type="button" aria-label="Exibir lista" tabindex="-1" data-trigger="data-trigger"><i class="fas fa-angle-down" aria-hidden="true"></i> </button> </div> <div class="br-list" tabindex="0"> <div class="br-item" tabindex="-1"> <div class="br-radio"> <input id="go-to-1-random-25235" type="radio" name="go-to-random-25235" value="go-to-1-random-25235" checked="checked"/> <label for="go-to-1-random-25235">1</label> </div> </div> <div class="br-item" tabindex="-1"> <div class="br-radio"> <input id="go-to-2-random-25235" type="radio" name="go-to-random-25235" value="go-to-2-random-25235"/> <label for="go-to-2-random-25235">2</label> </div> </div> <div class="br-item" tabindex="-1"> <div class="br-radio"> <input id="go-to-3-random-25235" type="radio" name="go-to-random-25235" value="go-to-3-random-25235"/> <label for="go-to-3-random-25235">3</label> </div> </div> <div class="br-item" tabindex="-1"> <div class="br-radio"> <input id="go-to-4-random-25235" type="radio" name="go-to-random-25235" value="go-to-4-random-25235"/> <label for="go-to-4-random-25235">4</label> </div> </div> <div class="br-item" tabindex="-1"> <div class="br-radio"> <input id="go-to-5-random-25235" type="radio" name="go-to-random-25235" value="go-to-5-random-25235"/> <label for="go-to-5-random-25235">5</label> </div> </div> </div> </div> </div> <div class="pagination-arrows ml-auto"> <button class="br-button circle" type="button" aria-label="Voltar página"><i class="fas fa-angle-left" aria-hidden="true"></i> </button> <button class="br-button circle" type="button" aria-label="Página seguinte"><i class="fas fa-angle-right" aria-hidden="true"></i> </button> </div> </nav> </div> </div> <script src="../../core-init.js"></script> </body> </html>