@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>Card</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">Card simples e completo</p> <div class="row"> <div class="col-sm-6 col-md-4 col-lg-3"> <div class="br-card"> <div class="card-content"><img src="https://picsum.photos/id/0/500" alt="Imagem de exemplo"/></div> </div> </div> <div class="col-sm-6 col-md-4 col-lg-3"> <div class="br-card"> <div class="card-header"> <div class="d-flex"><span class="br-avatar mt-1" title="Fulano da Silva"><span class="content"><img src="https://picsum.photos/id/823/400"/></span></span> <div class="ml-3"> <div class="text-weight-semi-bold text-up-02">Maria Amorim</div> <div>UX Designer</div> </div> <div class="ml-auto"> <button class="br-button circle" type="button" aria-label="Ícone ilustrativo"><i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> </div> </div> </div> <div class="card-content"> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore perferendis nam porro atque ex at, numquam non optio ab eveniet error vel ad exercitationem, earum et fugiat recusandae harum? Assumenda.</p> </div> <div class="card-footer"> <div class="d-flex"> <div> <button class="br-button" type="button">Button </button> </div> <div class="ml-auto"> <button class="br-button circle" type="button" aria-label="Ícone ilustrativo"><i class="fas fa-heart" aria-hidden="true"></i> </button> <button class="br-button circle" type="button" aria-label="Ícone ilustrativo 3"><i class="fas fa-share-alt" aria-hidden="true"></i> </button> </div> </div> </div> </div> </div> </div> <p class="h4 mt-5">Card com expansão</p> <div class="row"> <div class="col-sm-6 col-md-4 col-lg-3"> <div class="br-card"> <div class="card-header"> <div class="d-flex"><span class="br-avatar mt-1" title="Fulano da Silva"><span class="content"><img src="https://picsum.photos/id/823/400"/></span></span> <div class="ml-3"> <div class="text-weight-semi-bold text-up-02">Maria Amorim</div> <div>UX Designer</div> </div> <div class="ml-auto"> <button class="br-button circle" type="button" aria-label="Ícone ilustrativo"><i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> </div> </div> </div> <div class="card-content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste sit dolor exercitationem asperiores voluptates tenetur consectetur error vero ut expedita, sapiente voluptate nulla esse! Veritatis aliquam consectetur quod harum expedita!</p> </div> <div class="card-footer"> <div class="text-right"> <button class="br-button circle" type="button" aria-label="Botão para expandir ou recolher conteúdos adicionais" data-toggle="collapse" data-target="expanded" aria-controls="expanded" aria-expanded="false" data-visible="false"><i class="fas fa-chevron-down" aria-hidden="true"></i> </button> </div> <div id="expanded" hidden="hidden"> <div class="br-list mt-3"> <div class="br-item"> <div class="row"> <div class="col-auto"><i class="fas fa-heartbeat" aria-hidden="true"></i> </div> <div class="col"> <p class="m-0">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> </div> </div> </div><span class="br-divider"></span> <div class="br-item"> <div class="row"> <div class="col-auto"><i class="fas fa-heartbeat" aria-hidden="true"></i> </div> <div class="col"> <p class="m-0">Nesciunt, laudantium ea officiis hic tempora velit aperiam nemo accusamus nisi, eligendi ducimus! Incidunt ullam minima ratione amet sequi.</p> </div> </div> </div><span class="br-divider"></span> <div class="br-item"> <div class="row"> <div class="col-auto"><i class="fas fa-heartbeat" aria-hidden="true"></i> </div> <div class="col"> <p class="m-0">Voluptates, iste recusandae.</p> </div> </div> </div> </div> </div> </div> </div> </div> </div> <p class="h4 mt-5">Card desativado</p> <div class="row"> <div class="col-sm-6 col-md-4 col-lg-3"> <div class="br-card disabled"> <div class="card-header"> <div class="d-flex"><span class="br-avatar mt-1" title="Fulano da Silva"><span class="content"><img src="https://picsum.photos/id/823/400"/></span></span> <div class="ml-3"> <div class="text-weight-semi-bold text-up-02">Maria Amorim</div> <div>UX Designer</div> </div> <div class="ml-auto"> <button class="br-button circle" type="button" aria-label="Ícone ilustrativo"><i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> </div> </div> </div> <div class="card-content"> <p>Lorem ipsum doloris sit, amet consectetur adipisicing elit. Tempore perferendis nam porro atque ex at, numquam non optio ab eveniet error vel ad exercitationem, earum et fugiat recusandae harum? Assumenda.</p> </div> <div class="card-footer"> <div class="d-flex"> <div> <button class="br-button" type="button">Button </button> </div> <div class="ml-auto"> <button class="br-button circle" type="button" aria-label="Ícone ilustrativo"><i class="fas fa-heart" aria-hidden="true"></i> </button> <button class="br-button circle" type="button" aria-label="Ícone ilustrativo 3"><i class="fas fa-share-alt" aria-hidden="true"></i> </button> </div> </div> </div> </div> </div> </div> <p class="h4 mt-5">Card com hover</p> <div class="row"> <div class="col-md"> <div class="br-card hover"> <div class="card-content"> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore perferendis nam porro atque ex at, numquam non optio ab eveniet error vel ad exercitationem, earum et fugiat recusandae harum? Assumenda.</p> </div> </div> </div> <div class="col-md"> <div class="br-card hover"> <div class="card-content"> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore perferendis nam porro atque ex at, numquam non optio ab eveniet error vel ad exercitationem, earum et fugiat recusandae harum? Assumenda.</p> </div> </div> </div> <div class="col-md"> <div class="br-card hover"> <div class="card-content"> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore perferendis nam porro atque ex at, numquam non optio ab eveniet error vel ad exercitationem, earum et fugiat recusandae harum? Assumenda.</p> </div> </div> </div> </div> <p class="h5">Card com altura fixa</p> <div class="row mt-5"> <div class="col-sm-6 col-md-4 col-lg-3"> <div class="br-card h-fixed"> <div class="card-header"> <div class="d-flex"><span class="br-avatar mt-1" title="Fulano da Silva"><span class="content"><img src="https://picsum.photos/id/823/400"/></span></span> <div class="ml-3"> <div class="text-weight-semi-bold text-up-02">Maria Amorim</div> <div>UX Designer</div> </div> <div class="ml-auto"> <button class="br-button circle" type="button" aria-label="Ícone ilustrativo"><i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> </div> </div> </div> <div class="card-content" tabindex="0"> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore perferendis nam porro atque ex at, numquam non optio ab eveniet error vel ad exercitationem, earum et fugiat recusandae harum? Assumenda. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore perferendis nam porro atque ex at, numquam non optio ab eveniet error vel ad exercitationem, earum et fugiat recusandae harum? Assumenda.</p> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore perferendis nam porro atque ex at, numquam non optio ab eveniet error vel ad exercitationem, earum et fugiat recusandae harum? Assumenda. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore perferendis nam porro atque ex at, numquam non optio ab eveniet error vel ad exercitationem, earum et fugiat recusandae harum? Assumenda.</p> </div> <div class="card-footer"> <div class="d-flex"> <div> <button class="br-button" type="button">Button </button> </div> <div class="ml-auto"> <button class="br-button circle" type="button" aria-label="Ícone ilustrativo"><i class="fas fa-heart" aria-hidden="true"></i> </button> <button class="br-button circle" type="button" aria-label="Ícone ilustrativo 3"><i class="fas fa-share-alt" aria-hidden="true"></i> </button> </div> </div> </div> </div> </div> </div> </div> <script src="../../core-init.js"></script> </body> </html>