@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>footer</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">Tema 1</p> <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">Duis incididunt consectetur</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 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">Est ex deserunt</div></a><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">Ex qui laborum consectetur aute commodo</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">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">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 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">Adipisicing culpa et ad consequat</div></a><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">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 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">Qui esse</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">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 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">Est ex deserunt</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> <p class="h4 mt-5">Tema 2</p> <footer class="br-footer inverted"> <div class="container-lg"> <div class="logo text-sm-left" inverted="inverted"><img src="https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/images/logo-positive.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">Est ex 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">Nulla occaecat eiusmod</div></a><a class="br-item" href="javascript:void(0)"> <div class="content">Ex qui laborum consectetur aute commodo</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">Duis incididunt consectetur</div></a><a class="br-item" href="javascript:void(0)"> <div class="content">Duis incididunt consectetur</div></a><a class="br-item" href="javascript:void(0)"> <div class="content">Ex qui laborum consectetur aute commodo</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">Duis incididunt consectetur</div></a><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">Nulla occaecat eiusmod</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">Qui esse</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">Ex qui laborum consectetur aute commodo</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">Deserunt</div></a><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">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 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">Est ex deserunt</div></a><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">Est ex deserunt</div></a><a class="br-item" href="javascript:void(0)"> <div class="content">Qui esse</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-positive.png" alt="Imagem"/><img class="ml-4" src="https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/images/logo-assign-positive.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> </div> <script src="../../core-init.js"></script> </body> </html>