@govbr-ds/core
Version:
Padrão Digital de Governo
64 lines (63 loc) • 7.84 kB
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 Textos</title>
<!-- Fonte Rawline-->
<link rel="stylesheet" href="https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/fonts/rawline/css/rawline.css"/>
<!-- Fonte Raleway-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700,800,900&display=swap"/>
<!-- Design System de Governo-->
<link rel="stylesheet" href="../../core.css"/>
<!-- Fontawesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"/>
<style>
.overflow {
overflow: auto;
}
</style>
</head>
<body>
<div class="container-fluid">
<p class="h4">Alinhamento</p><strong class="bg-support-02 px-half rounder-sm">.text-center</strong>
<p class="text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quae officiis ipsam numquam optio aliquid distinctio ea minima tempore corrupti, quos suscipit deleniti in minus deserunt officia. Sunt, soluta ex.</p><strong class="bg-support-02 px-half rounder-sm">.text-justify</strong>
<p class="text-justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quae officiis ipsam numquam optio aliquid distinctio ea minima tempore corrupti, quos suscipit deleniti in minus deserunt officia. Sunt, soluta ex.</p><strong class="bg-support-02 px-half rounder-sm">.text-left</strong>
<p class="text-left">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quae officiis ipsam numquam optio aliquid distinctio ea minima tempore corrupti, quos suscipit deleniti in minus deserunt officia. Sunt, soluta ex.</p><strong class="bg-support-02 px-half rounder-sm">.text-right</strong>
<p class="text-right">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quae officiis ipsam numquam optio aliquid distinctio ea minima tempore corrupti, quos suscipit deleniti in minus deserunt officia. Sunt, soluta ex.</p>
<p class="h4">Wrap e overflow</p><strong class="bg-support-02 px-half rounder-sm">.text-wrap</strong>
<p class="text-wrap">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quae officiis ipsam numquam optio aliquid distinctio ea minima tempore corrupti, quos suscipit deleniti in minus deserunt officia. Sunt, soluta ex. Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci quibusdam saepe provident, quisquam numquam aliquid commodi deleniti vitae ullam, laboriosam aut perspiciatis optio veritatis velit natus nam, hic architecto itaque.</p><strong class="bg-support-02 px-half rounder-sm">.text-nowrap</strong>
<p class="text-nowrap overflow-auto overflow">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quae officiis ipsam numquam optio aliquid distinctio ea minima tempore corrupti, quos suscipit deleniti in minus deserunt officia. Sunt, soluta ex. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur odit laboriosam ratione maxime adipisci velit, earum, est dolorem ullam, ducimus molestias totam accusantium explicabo inventore aperiam culpa ad. Quis, eius.</p><strong class="bg-support-02 px-half rounder-sm">.text-truncate</strong>
<p class="text-truncate">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quae officiis ipsam numquam optio aliquid distinctio ea minima tempore corrupti, quos suscipit deleniti in minus deserunt officia. Sunt, soluta ex. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi inventore eos, facilis iste, doloribus molestias nesciunt enim magni voluptatum voluptatem illo. Dolore ipsa voluptatem quisquam deserunt tempora fugit est. Consequatur.</p><strong class="bg-support-02 px-half rounder-sm">.text-break</strong>
<p class="text-break">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quae officiis ipsam numquam optio aliquid distinctio ea minima tempore corrupti, quos suscipit deleniti in minus deserunt officia. Sunt, soluta ex. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia illum, alias quam cum corporis veritatis nobis repellendus, molestias nostrum ad veniam. Voluptatem velit at, quidem adipisci ullam quo. Ad, consequuntur?</p>
<p class="h4 mt-5">Transformação</p>
<p><strong class="bg-support-02 px-half mr-1 rounder-sm">.text-lowercase</strong><span class="text-lowercase">Lorem ipsum</span></p>
<p><strong class="bg-support-02 px-half mr-1 rounder-sm">.text-uppercase</strong><span class="text-uppercase">Lorem ipsum</span></p>
<p><strong class="bg-support-02 px-half mr-1 rounder-sm">.text-capitalize</strong><span class="text-capitalize">Lorem ipsum</span></p>
<p class="h4 mt-5">Peso</p>
<p><strong class="bg-support-02 px-half mr-1 rounder-sm">.text-weight-thin</strong><span class="text-weight-thin">Lorem ipsum</span></p>
<p><strong class="bg-support-02 px-half mr-1 rounder-sm">.text-weight-extra-light</strong><span class="text-weight-extra-light">Lorem ipsum</span></p>
<p><strong class="bg-support-02 px-half mr-1 rounder-sm">.text-weight-light</strong><span class="text-weight-light">Lorem ipsum</span></p>
<p><strong class="bg-support-02 px-half mr-1 rounder-sm">.text-weight-regular</strong><span class="text-weight-regular">Lorem ipsum</span></p>
<p><strong class="bg-support-02 px-half mr-1 rounder-sm">.text-weight-medium</strong><span class="text-weight-medium">Lorem ipsum</span></p>
<p><strong class="bg-support-02 px-half mr-1 rounder-sm">.text-weight-semi-bold</strong><span class="text-weight-semi-bold">Lorem ipsum</span></p>
<p><strong class="bg-support-02 px-half mr-1 rounder-sm">.text-weight-bold</strong><span class="text-weight-bold">Lorem ipsum</span></p>
<p><strong class="bg-support-02 px-half mr-1 rounder-sm">.text-weight-extra-bold</strong><span class="text-weight-extra-bold">Lorem ipsum</span></p>
<p><strong class="bg-support-02 px-half mr-1 rounder-sm">.text-weight-black</strong><span class="text-weight-black">Lorem ipsum</span></p>
<p class="h4 mt-5">Tamanho</p>
<p><strong class="bg-support-02 px-half mr-1 rounder-sm">.text-up-07</strong><span class="text-up-07">Lorem ipsum</span></p>
<p><strong class="bg-support-02 px-half mr-1 rounder-sm">.text-up-06</strong><span class="text-up-06">Lorem ipsum</span></p>
<p><strong class="bg-support-02 px-half mr-1 rounder-sm">.text-up-05</strong><span class="text-up-05">Lorem ipsum</span></p>
<p><strong class="bg-support-02 px-half mr-1 rounder-sm">.text-up-04</strong><span class="text-up-04">Lorem ipsum</span></p>
<p><strong class="bg-support-02 px-half mr-1 rounder-sm">.text-up-03</strong><span class="text-up-03">Lorem ipsum</span></p>
<p><strong class="bg-support-02 px-half mr-1 rounder-sm">.text-up-02</strong><span class="text-up-02">Lorem ipsum</span></p>
<p><strong class="bg-support-02 px-half mr-1 rounder-sm">.text-up-01</strong><span class="text-up-01">Lorem ipsum</span></p>
<p><strong class="bg-support-02 px-half mr-1 rounder-sm">.text-base</strong><span class="text-base">Lorem ipsum</span></p>
<p><strong class="bg-support-02 px-half mr-1 rounder-sm">.text-down-01</strong><span class="text-down-01">Lorem ipsum</span></p>
<p><strong class="bg-support-02 px-half mr-1 rounder-sm">.text-down-02</strong><span class="text-down-02">Lorem ipsum</span></p>
<p><strong class="bg-support-02 px-half mr-1 rounder-sm">.text-down-03</strong><span class="text-down-03">Lorem ipsum</span></p>
</div>
<script src="../../core-init.js"></script>
</body>
</html>