@govbr-ds/core
Version:
Padrão Digital de Governo
86 lines (85 loc) • 6.38 kB
HTML
<footer class="br-footer">
<div class="container-lg">
<div class="logo"><img src="https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/images/logo-negative.png" alt="Imagem"/></div>
<div class="br-list horizontal" data-toggle="data-toggle" data-sub="data-sub">
<div class="col-2"><a class="br-item header" href="javascript:void(0)">
<div class="content text-down-01 text-bold text-uppercase">Categoria 1</div>
<div class="support"><i class="fas fa-angle-down" aria-hidden="true"></i>
</div></a>
<div class="br-list"><span class="br-divider d-md-none"></span><a class="br-item" href="javascript:void(0)">
<div class="content">Ex qui laborum consectetur aute commodo</div></a><a class="br-item" href="javascript:void(0)">
<div class="content">Nulla occaecat eiusmod</div></a><a class="br-item" href="javascript:void(0)">
<div class="content">Ad deserunt nostrud</div></a><span class="br-divider d-md-none"></span>
</div>
</div>
<div class="col-2"><a class="br-item header" href="javascript:void(0)">
<div class="content text-down-01 text-bold text-uppercase">Categoria 2</div>
<div class="support"><i class="fas fa-angle-down" aria-hidden="true"></i>
</div></a>
<div class="br-list"><span class="br-divider d-md-none"></span><a class="br-item" href="javascript:void(0)">
<div class="content">Nulla occaecat eiusmod</div></a><a class="br-item" href="javascript:void(0)">
<div class="content">Ex qui laborum consectetur aute commodo</div></a><a class="br-item" href="javascript:void(0)">
<div class="content">Qui esse</div></a><a class="br-item" href="javascript:void(0)">
<div class="content">Est ex deserunt</div></a><span class="br-divider d-md-none"></span>
</div>
</div>
<div class="col-2"><a class="br-item header" href="javascript:void(0)">
<div class="content text-down-01 text-bold text-uppercase">Categoria 3</div>
<div class="support"><i class="fas fa-angle-down" aria-hidden="true"></i>
</div></a>
<div class="br-list"><span class="br-divider d-md-none"></span><a class="br-item" href="javascript:void(0)">
<div class="content">Adipisicing culpa et ad consequat</div></a><a class="br-item" href="javascript:void(0)">
<div class="content">Ad deserunt nostrud</div></a><a class="br-item" href="javascript:void(0)">
<div class="content">Deserunt</div></a><span class="br-divider d-md-none"></span>
</div>
</div>
<div class="col-2"><a class="br-item header" href="javascript:void(0)">
<div class="content text-down-01 text-bold text-uppercase">Categoria 4</div>
<div class="support"><i class="fas fa-angle-down" aria-hidden="true"></i>
</div></a>
<div class="br-list"><span class="br-divider d-md-none"></span><a class="br-item" href="javascript:void(0)">
<div class="content">Est ex deserunt</div></a><a class="br-item" href="javascript:void(0)">
<div class="content">Qui esse</div></a><a class="br-item" href="javascript:void(0)">
<div class="content">Duis incididunt consectetur</div></a><span class="br-divider d-md-none"></span>
</div>
</div>
<div class="col-2"><a class="br-item header" href="javascript:void(0)">
<div class="content text-down-01 text-bold text-uppercase">Categoria 5</div>
<div class="support"><i class="fas fa-angle-down" aria-hidden="true"></i>
</div></a>
<div class="br-list"><span class="br-divider d-md-none"></span><a class="br-item" href="javascript:void(0)">
<div class="content">Adipisicing culpa et ad consequat</div></a><a class="br-item" href="javascript:void(0)">
<div class="content">Duis incididunt consectetur</div></a><span class="br-divider d-md-none"></span>
</div>
</div>
<div class="col-2"><a class="br-item header" href="javascript:void(0)">
<div class="content text-down-01 text-bold text-uppercase">Categoria 6</div>
<div class="support"><i class="fas fa-angle-down" aria-hidden="true"></i>
</div></a>
<div class="br-list"><span class="br-divider d-md-none"></span><a class="br-item" href="javascript:void(0)">
<div class="content">Deserunt</div></a><a class="br-item" href="javascript:void(0)">
<div class="content">Deserunt</div></a><a class="br-item" href="javascript:void(0)">
<div class="content">Ad deserunt nostrud</div></a><a class="br-item" href="javascript:void(0)">
<div class="content">Adipisicing culpa et ad consequat</div></a><span class="br-divider d-md-none"></span>
</div>
</div>
</div>
<div class="d-none d-sm-block">
<div class="row align-items-end justify-content-between py-5">
<div class="col">
<div class="social-network">
<div class="social-network-title">Redes Sociais</div>
<div class="d-flex"><a class="br-button circle" href="javascript: void(0)" aria-label="Compartilhar por Facebook"><i class="fab fa-facebook-f" aria-hidden="true"></i></a><a class="br-button circle" href="javascript: void(0)" aria-label="Compartilhar por Twitter"><i class="fab fa-twitter" aria-hidden="true"></i></a><a class="br-button circle" href="javascript: void(0)" aria-label="Compartilhar por Linkedin"><i class="fab fa-linkedin-in" aria-hidden="true"></i></a><a class="br-button circle" href="javascript: void(0)" aria-label="Compartilhar por Whatsapp"><i class="fab fa-whatsapp" aria-hidden="true"></i></a></div>
</div>
</div>
<div class="col assigns text-right"><img class="ml-4" src="https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/images/logo-assign-negative.png" alt="Imagem"/><img class="ml-4" src="https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/images/logo-assign-negative.png" alt="Imagem"/>
</div>
</div>
</div>
</div><span class="br-divider my-3"></span>
<div class="container-lg">
<div class="info">
<div class="text-down-01 text-medium pb-3">Texto destinado a exibição de informações relacionadas à <strong>licença de uso.</strong></div>
</div>
</div>
</footer>