@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 Espaçamento</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">Margin</p> <p class="my-1">Sentido</p> <div class="border-solid-sm d-inline-block m-1"> <div class="bg-support-02 px-half rounder-sm text-weight-bold mx-3">mx-3</div> </div> <div class="border-solid-sm d-inline-block m-1"> <div class="bg-support-02 px-half rounder-sm text-weight-bold my-3">my-3</div> </div> <p class="my-1">Direção específica</p> <div class="border-solid-sm d-inline-block m-1"> <div class="bg-support-02 px-half rounder-sm text-weight-bold mt-3">mt-3</div> </div> <div class="border-solid-sm d-inline-block m-1"> <div class="bg-support-02 px-half rounder-sm text-weight-bold mr-3">mr-3</div> </div> <div class="border-solid-sm d-inline-block m-1"> <div class="bg-support-02 px-half rounder-sm text-weight-bold mb-3">mb-3</div> </div> <div class="border-solid-sm d-inline-block m-1"> <div class="bg-support-02 px-half rounder-sm text-weight-bold ml-3">ml-3</div> </div> <p class="my-1">Todas as direções</p> <div class="border-solid-sm d-inline-block m-1"> <div class="bg-support-02 px-half rounder-sm text-weight-bold m-0">m-0</div> </div> <div class="border-solid-sm d-inline-block m-1"> <div class="bg-support-02 px-half rounder-sm text-weight-bold m-half">m-half</div> </div> <div class="border-solid-sm d-inline-block m-1"> <div class="bg-support-02 px-half rounder-sm text-weight-bold m-base">m-base</div> </div> <div class="border-solid-sm d-inline-block m-1"> <div class="bg-support-02 px-half rounder-sm text-weight-bold m-1">m-1</div> </div> <div class="border-solid-sm d-inline-block m-1"> <div class="bg-support-02 px-half rounder-sm text-weight-bold m-baseh">m-baseh</div> </div> <div class="border-solid-sm d-inline-block m-1"> <div class="bg-support-02 px-half rounder-sm text-weight-bold m-2">m-2</div> </div> <div class="border-solid-sm d-inline-block m-1"> <div class="bg-support-02 px-half rounder-sm text-weight-bold m-2x">m-2x</div> </div> <div class="border-solid-sm d-inline-block m-1"> <div class="bg-support-02 px-half rounder-sm text-weight-bold m-3">m-3</div> </div> <div class="border-solid-sm d-inline-block m-1"> <div class="bg-support-02 px-half rounder-sm text-weight-bold m-2xh">m-2xh</div> </div> <div class="border-solid-sm d-inline-block m-1"> <div class="bg-support-02 px-half rounder-sm text-weight-bold m-3x">m-3x</div> </div> <div class="border-solid-sm d-inline-block m-1"> <div class="bg-support-02 px-half rounder-sm text-weight-bold m-4">m-4</div> </div> <div class="border-solid-sm d-inline-block m-1"> <div class="bg-support-02 px-half rounder-sm text-weight-bold m-3xh">m-3xh</div> </div> <div class="border-solid-sm d-inline-block m-1"> <div class="bg-support-02 px-half rounder-sm text-weight-bold m-4x">m-4x</div> </div> <div class="border-solid-sm d-inline-block m-1"> <div class="bg-support-02 px-half rounder-sm text-weight-bold m-4xh">m-4xh</div> </div> <div class="border-solid-sm d-inline-block m-1"> <div class="bg-support-02 px-half rounder-sm text-weight-bold m-5x">m-5x</div> </div> <div class="border-solid-sm d-inline-block m-1"> <div class="bg-support-02 px-half rounder-sm text-weight-bold m-5">m-5</div> </div> <div class="border-solid-sm d-inline-block m-1"> <div class="bg-support-02 px-half rounder-sm text-weight-bold m-5xh">m-5xh</div> </div> <div class="border-solid-sm d-inline-block m-1"> <div class="bg-support-02 px-half rounder-sm text-weight-bold m-6x">m-6x</div> </div> <div class="border-solid-sm d-inline-block m-1"> <div class="bg-support-02 px-half rounder-sm text-weight-bold m-6xh">m-6xh</div> </div> <div class="border-solid-sm d-inline-block m-1"> <div class="bg-support-02 px-half rounder-sm text-weight-bold m-7x">m-7x</div> </div> <div class="border-solid-sm d-inline-block m-1"> <div class="bg-support-02 px-half rounder-sm text-weight-bold m-7xh">m-7xh</div> </div> <div class="border-solid-sm d-inline-block m-1"> <div class="bg-support-02 px-half rounder-sm text-weight-bold m-8x">m-8x</div> </div> <div class="border-solid-sm d-inline-block m-1"> <div class="bg-support-02 px-half rounder-sm text-weight-bold m-8xh">m-8xh</div> </div> <div class="border-solid-sm d-inline-block m-1"> <div class="bg-support-02 px-half rounder-sm text-weight-bold m-9x">m-9x</div> </div> <div class="border-solid-sm d-inline-block m-1"> <div class="bg-support-02 px-half rounder-sm text-weight-bold m-9xh">m-9xh</div> </div> <div class="border-solid-sm d-inline-block m-1"> <div class="bg-support-02 px-half rounder-sm text-weight-bold m-10x">m-10x</div> </div> <div class="border-solid-sm d-inline-block m-1"> <div class="bg-support-02 px-half rounder-sm text-weight-bold m-10xh">m-10xh</div> </div> <p class="h4 mt-5">Padding</p> <p class="my-1">Sentido</p> <div class="bg-support-02 d-inline-block m-1 rounder-sm text-weight-bold px-3">px-3</div> <div class="bg-support-02 d-inline-block m-1 rounder-sm text-weight-bold py-3">py-3</div> <p class="my-1">Direção específica</p> <div class="bg-support-02 d-inline-block m-1 rounder-sm text-weight-bold pt-3">pt-3</div> <div class="bg-support-02 d-inline-block m-1 rounder-sm text-weight-bold pr-3">pr-3</div> <div class="bg-support-02 d-inline-block m-1 rounder-sm text-weight-bold pb-3">pb-3</div> <div class="bg-support-02 d-inline-block m-1 rounder-sm text-weight-bold pl-3">pl-3</div> <p class="my-1">Todas as direções</p> <div class="bg-support-02 d-inline-block m-1 rounder-sm text-weight-bold p-0">p-0</div> <div class="bg-support-02 d-inline-block m-1 rounder-sm text-weight-bold p-half">p-half</div> <div class="bg-support-02 d-inline-block m-1 rounder-sm text-weight-bold p-base">p-base</div> <div class="bg-support-02 d-inline-block m-1 rounder-sm text-weight-bold p-1">p-1</div> <div class="bg-support-02 d-inline-block m-1 rounder-sm text-weight-bold p-baseh">p-baseh</div> <div class="bg-support-02 d-inline-block m-1 rounder-sm text-weight-bold p-2">p-2</div> <div class="bg-support-02 d-inline-block m-1 rounder-sm text-weight-bold p-2x">p-2x</div> <div class="bg-support-02 d-inline-block m-1 rounder-sm text-weight-bold p-3">p-3</div> <div class="bg-support-02 d-inline-block m-1 rounder-sm text-weight-bold p-2xh">p-2xh</div> <div class="bg-support-02 d-inline-block m-1 rounder-sm text-weight-bold p-3x">p-3x</div> <div class="bg-support-02 d-inline-block m-1 rounder-sm text-weight-bold p-4">p-4</div> <div class="bg-support-02 d-inline-block m-1 rounder-sm text-weight-bold p-3xh">p-3xh</div> <div class="bg-support-02 d-inline-block m-1 rounder-sm text-weight-bold p-4x">p-4x</div> <div class="bg-support-02 d-inline-block m-1 rounder-sm text-weight-bold p-4xh">p-4xh</div> <div class="bg-support-02 d-inline-block m-1 rounder-sm text-weight-bold p-5x">p-5x</div> <div class="bg-support-02 d-inline-block m-1 rounder-sm text-weight-bold p-5">p-5</div> <div class="bg-support-02 d-inline-block m-1 rounder-sm text-weight-bold p-5xh">p-5xh</div> <div class="bg-support-02 d-inline-block m-1 rounder-sm text-weight-bold p-6x">p-6x</div> <div class="bg-support-02 d-inline-block m-1 rounder-sm text-weight-bold p-6xh">p-6xh</div> <div class="bg-support-02 d-inline-block m-1 rounder-sm text-weight-bold p-7x">p-7x</div> <div class="bg-support-02 d-inline-block m-1 rounder-sm text-weight-bold p-7xh">p-7xh</div> <div class="bg-support-02 d-inline-block m-1 rounder-sm text-weight-bold p-8x">p-8x</div> <div class="bg-support-02 d-inline-block m-1 rounder-sm text-weight-bold p-8xh">p-8xh</div> <div class="bg-support-02 d-inline-block m-1 rounder-sm text-weight-bold p-9x">p-9x</div> <div class="bg-support-02 d-inline-block m-1 rounder-sm text-weight-bold p-9xh">p-9xh</div> <div class="bg-support-02 d-inline-block m-1 rounder-sm text-weight-bold p-10x">p-10x</div> <div class="bg-support-02 d-inline-block m-1 rounder-sm text-weight-bold p-10xh">p-10xh</div> </div> <script src="../../core-init.js"></script> </body> </html>