@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>Utilitário de Elevaçã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">Camadas</p> <div class="row mb-5"> <div class="col"><strong class="bg-support-02 px-half mr-1 rounder-sm">.layer-0</strong> <div class="p-5 shadow-none layer-0"><strong class="bg-support-02 px-half mr-1 rounder-sm">.layer-1</strong> <div class="p-5 shadow-sm layer-1"><strong class="bg-support-02 px-half mr-1 rounder-sm">.layer-2</strong> <div class="p-5 shadow-md layer-2"><strong class="bg-support-02 px-half mr-1 rounder-sm">.layer-3</strong> <div class="p-5 shadow-lg layer-3"><strong class="bg-support-02 px-half mr-1 rounder-sm">.layer-4</strong> <div class="p-5 shadow-xl layer-4"></div> </div> </div> </div> </div> </div> </div> <p class="h4 mt-5">Sombra</p> <div class="row mb-5"> <div class="col"> <div class="p-1 shadow-none"><strong class="bg-support-02 px-half mr-1 rounder-sm">.shadow-none</strong></div> </div> </div> <p class="mt-5">Externa</p> <div class="row mb-5"> <div class="col"> <div class="p-1 shadow-sm"><strong class="bg-support-02 px-half mr-1 rounder-sm">.shadow-sm</strong></div> </div> <div class="col"> <div class="p-1 shadow-md"><strong class="bg-support-02 px-half mr-1 rounder-sm">.shadow-md</strong></div> </div> <div class="col"> <div class="p-1 shadow-lg"><strong class="bg-support-02 px-half mr-1 rounder-sm">.shadow-lg</strong></div> </div> <div class="col"> <div class="p-1 shadow-xl"><strong class="bg-support-02 px-half mr-1 rounder-sm">.shadow-xl</strong></div> </div> </div> <div class="row mb-5"> <div class="col"> <div class="p-1 shadow-sm-up"><strong class="bg-support-02 px-half mr-1 rounder-sm">.shadow-sm-up</strong></div> </div> <div class="col"> <div class="p-1 shadow-md-up"><strong class="bg-support-02 px-half mr-1 rounder-sm">.shadow-md-up</strong></div> </div> <div class="col"> <div class="p-1 shadow-lg-up"><strong class="bg-support-02 px-half mr-1 rounder-sm">.shadow-lg-up</strong></div> </div> <div class="col"> <div class="p-1 shadow-xl-up"><strong class="bg-support-02 px-half mr-1 rounder-sm">.shadow-xl-up</strong></div> </div> </div> <div class="row mb-5"> <div class="col"> <div class="p-1 shadow-sm-right"><strong class="bg-support-02 px-half mr-1 rounder-sm">.shadow-sm-right</strong></div> </div> <div class="col"> <div class="p-1 shadow-md-right"><strong class="bg-support-02 px-half mr-1 rounder-sm">.shadow-md-right</strong></div> </div> <div class="col"> <div class="p-1 shadow-lg-right"><strong class="bg-support-02 px-half mr-1 rounder-sm">.shadow-lg-right</strong></div> </div> <div class="col"> <div class="p-1 shadow-xl-right"><strong class="bg-support-02 px-half mr-1 rounder-sm">.shadow-xl-right</strong></div> </div> </div> <div class="row mb-5"> <div class="col"> <div class="p-1 shadow-sm-left"><strong class="bg-support-02 px-half mr-1 rounder-sm">.shadow-sm-left</strong></div> </div> <div class="col"> <div class="p-1 shadow-md-left"><strong class="bg-support-02 px-half mr-1 rounder-sm">.shadow-md-left</strong></div> </div> <div class="col"> <div class="p-1 shadow-lg-left"><strong class="bg-support-02 px-half mr-1 rounder-sm">.shadow-lg-left</strong></div> </div> <div class="col"> <div class="p-1 shadow-xl-left"><strong class="bg-support-02 px-half mr-1 rounder-sm">.shadow-xl-left</strong></div> </div> </div> <p class="mt-5">Interna</p> <div class="row mb-5"> <div class="col"> <div class="p-1 shadow-sm-inset"><strong class="bg-support-02 px-half mr-1 rounder-sm">.shadow-sm-inset</strong></div> </div> <div class="col"> <div class="p-1 shadow-md-inset"><strong class="bg-support-02 px-half mr-1 rounder-sm">.shadow-md-inset</strong></div> </div> <div class="col"> <div class="p-1 shadow-lg-inset"><strong class="bg-support-02 px-half mr-1 rounder-sm">.shadow-lg-inset</strong></div> </div> <div class="col"> <div class="p-1 shadow-xl-inset"><strong class="bg-support-02 px-half mr-1 rounder-sm">.shadow-xl-inset</strong></div> </div> </div> <div class="row mb-5"> <div class="col"> <div class="p-1 shadow-sm-inset-up"><strong class="bg-support-02 px-half mr-1 rounder-sm">.shadow-sm-inset-up</strong></div> </div> <div class="col"> <div class="p-1 shadow-md-inset-up"><strong class="bg-support-02 px-half mr-1 rounder-sm">.shadow-md-inset-up</strong></div> </div> <div class="col"> <div class="p-1 shadow-lg-inset-up"><strong class="bg-support-02 px-half mr-1 rounder-sm">.shadow-lg-inset-up</strong></div> </div> <div class="col"> <div class="p-1 shadow-xl-inset-up"><strong class="bg-support-02 px-half mr-1 rounder-sm">.shadow-xl-inset-up</strong></div> </div> </div> <div class="row mb-5"> <div class="col"> <div class="p-1 shadow-sm-inset-right"><strong class="bg-support-02 px-half mr-1 rounder-sm">.shadow-sm-inset-right</strong></div> </div> <div class="col"> <div class="p-1 shadow-md-inset-right"><strong class="bg-support-02 px-half mr-1 rounder-sm">.shadow-md-inset-right</strong></div> </div> <div class="col"> <div class="p-1 shadow-lg-inset-right"><strong class="bg-support-02 px-half mr-1 rounder-sm">.shadow-lg-inset-right</strong></div> </div> <div class="col"> <div class="p-1 shadow-xl-inset-right"><strong class="bg-support-02 px-half mr-1 rounder-sm">.shadow-xl-inset-right</strong></div> </div> </div> <div class="row mb-5"> <div class="col"> <div class="p-1 shadow-sm-inset-left"><strong class="bg-support-02 px-half mr-1 rounder-sm">.shadow-sm-inset-left</strong></div> </div> <div class="col"> <div class="p-1 shadow-md-inset-left"><strong class="bg-support-02 px-half mr-1 rounder-sm">.shadow-md-inset-left</strong></div> </div> <div class="col"> <div class="p-1 shadow-lg-inset-left"><strong class="bg-support-02 px-half mr-1 rounder-sm">.shadow-lg-inset-left</strong></div> </div> <div class="col"> <div class="p-1 shadow-xl-inset-left"><strong class="bg-support-02 px-half mr-1 rounder-sm">.shadow-xl-inset-left</strong></div> </div> </div> </div> <script src="../../core-init.js"></script> </body> </html>