cashu-design-system
Version:
CashU Design System
2,122 lines • 78.8 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Simulate usage Desgn System Cashu
</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<!-- - Importes em projetos externos devem ser feitos dessa forma -->
<!-- - <link rel="stylesheet" href="./node_modules/cashu-design-system/dist/bundle.css"> -->
<link rel="stylesheet" href="/bundle.css">
</head>
<body>
<header class="fixed-top">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<!-- <img src="./simulate-include/Logo_CashU.png" alt="" width="30" height="24"> -->
Design System CashU
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="https://www.cashu.com.br/" target="_blank">Site</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Componentes
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#graph-d3-link">Graph d3.js</a></li>
<li><a class="dropdown-item" href="#smart-score-link">Smart Score</a></li>
<li><a class="dropdown-item" href="#alert-link">Alert</a></li>
<li><a class="dropdown-item" href="#breadcrumb-link">Breadcrumb</a></li>
<li><a class="dropdown-item" href="#button-link">Button</a></li>
<li><a class="dropdown-item" href="#button-group-link">Button Group</a></li>
<li><a class="dropdown-item" href="#checkbox-link">Checkbox</a></li>
<li><a class="dropdown-item" href="#container-link">Container</a></li>
<li><a class="dropdown-item" href="#date-link">Dates</a></li>
<li><a class="dropdown-item" href="#dialog-link">Dialogs</a></li>
<li><a class="dropdown-item" href="#form-link">Form</a></li>
<li><a class="dropdown-item" href="#m-select-link">Multiple select</a></li>
<li><a class="dropdown-item" href="#navbar-link">Navbar</a></li>
<li><a class="dropdown-item" href="#paginator-link">Paginator</a></li>
<li><a class="dropdown-item" href="#paragraph-link">Paragraph</a></li>
<li><a class="dropdown-item" href="#popover-link">Popover</a></li>
<li><a class="dropdown-item" href="#radio-button-link">Radio Button</a></li>
<li><a class="dropdown-item" href="#search-link">Search</a></li>
<li><a class="dropdown-item" href="#sidebar-link">Sidebar</a></li>
<li><a class="dropdown-item" href="#switch-link">Switch</a></li>
<li><a class="dropdown-item" href="#tab-link">Tab</a></li>
<li><a class="dropdown-item" href="#table-link">Table</a></li>
<li><a class="dropdown-item" href="#toastr-link">Toastr</a></li>
<li><a class="dropdown-item" href="#tooltip-link">Tooltip</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container-fluid pt-20">
<div class="card">
<h5 class="card-header">Destaques importantes</h5>
<div class="card-body">
<h5 class="card-title">Evento de abrir e fechar modal</h5>
<p class="card-text">Qualquer componente pode receber os seguintes paramentos que serão utilizados para abertura
e fechamento de modal</p>
<br />
<p class="card-title">
<code>data-<em>nomeDoComponente</em>-open="<em>nomeDoComponente</em>-<em>referenciaParaCadaItem</em>"</code>
<br />
<br />
<code>data-ref="<em>nomeDoComponente</em>-<em>referenciaParaCadaItem</em>"</code>
<br />
<br />
<code>data-<em>nomeDoComponente</em>-close="<em>nomeDoComponente</em>-<em>referenciaParaCadaItem</em>"</code>
<br />
<br />
</p>
<a class="dropdown-item" href="#dialog-link">Ex: Dialog</a>
</div>
</div>
<br />
<br />
<!-- Graph d3 -->
<div class="row" id="graph-d3-link">
<h2 class="exemples__title" class="btn btn-outline-secondary" data-bs-toggle="collapse" href="#graph-d3"
role="button" aria-expanded="false" aria-controls="graph-d3">
Graph d3:
</h2>
<div class="collapse" id="graph-d3">
<div class="exemples__content">
<div class="row">
<div class="col-12">
<div class="container">
<div class="col d-flex justify-content-center align-items-center">
<div class="w-full h-full">
<div class="graph-d3">
<div class="graph__legend flex flex-row text-seventieslean">
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg id="graph-d3-svg" width="1000" height="1000" data-graph-conections="graph"></svg>
<script>
var graph = {
"nodes": [{
"id": 1,
"name": "A I G AGENCIA DE VIAGENS E CONFECCOES LTDA",
"nivel": 0,
"protesto": 'true'
},
{
"id": 2,
"name": "A I G AGENCIA DE VIAGENS E CONFECCOES LTDA",
"nivel": 1,
},
{
"id": 3,
"name": "A I G AGENCIA DE VIAGENS E CONFECCOES LTDA",
"nivel": 1,
},
{
"id": 4,
"name": "A I G AGENCIA DE VIAGENS E CONFECCOES LTDA",
"nivel": 1,
},
{
"id": 5,
"name": "A I G AGENCIA DE VIAGENS E CONFECCOES LTDA",
"nivel": 2,
"protesto": 'false'
},
{
"id": 6,
"name": "A I G AGENCIA DE VIAGENS E CONFECCOES LTDA",
"nivel": 2,
"protesto": 'true'
},
{
"id": 7,
"name": "A I G AGENCIA DE VIAGENS E CONFECCOES LTDA",
"nivel": 2,
"protesto": 'false',
},
{
"id": 8,
"name": "A I G AGENCIA DE VIAGENS E CONFECCOES LTDA",
"nivel": 2,
"protesto": 'unknown'
},
{
"id": 9,
"name": "A I G AGENCIA DE VIAGENS E CONFECCOES LTDA",
"nivel": 2,
"protesto": 'unknown'
},
{
"id": 10,
"name": "A I G AGENCIA DE VIAGENS E CONFECCOES LTDA",
"nivel": 2,
"protesto": 'unknown'
},
{
"id": 11,
"name": "FO",
"nivel": 2,
"protesto": 'unknown'
},
{
"id": 12,
"name": "FO",
"nivel": 2,
"protesto": 'false'
},
{
"id": 13,
"name": "FO",
"nivel": 2,
"protesto": 'unknown'
},
{
"id": 14,
"name": "FO",
"nivel": 2,
"protesto": 'unknown'
},
{
"id": 15,
"name": "FO",
"nivel": 2,
"protesto": 'false'
}
],
"links": [{
"source": 1,
"target": 2
},
{
"source": 1,
"target": 3
},
{
"source": 1,
"target": 4
},
{
"source": 2,
"target": 5
},
{
"source": 2,
"target": 7
},
{
"source": 2,
"target": 8
},
{
"source": 2,
"target": 9
},
{
"source": 2,
"target": 10
},
{
"source": 3,
"target": 6
},
{
"source": 3,
"target": 11
},
{
"source": 4,
"target": 12
},
{
"source": 4,
"target": 13
},
{
"source": 4,
"target": 14
},
{
"source": 4,
"target": 15
}
]
}
</script>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="container bg-doc">
<div class="row">
<code>
<pre class="text-doc" data-copy-el="alert-1">
<div class="graph-d3">
<div class="graph__legend flex flex-row text-seventieslean">
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg id="graph-d3-svg" width="1000" height="1000" data-graph-conections="graph"></svg>
<script>
var graph = {
"nodes": [{
"id": 1,
"name": "A I G AGENCIA DE VIAGENS E CONFECCOES LTDA",
"nivel": 0,
"protesto": 'true'
},
{
"id": 2,
"name": "A I G AGENCIA DE VIAGENS E CONFECCOES LTDA",
"nivel": 1,
},
{
"id": 3,
"name": "A I G AGENCIA DE VIAGENS E CONFECCOES LTDA",
"nivel": 1,
},
{
"id": 4,
"name": "A I G AGENCIA DE VIAGENS E CONFECCOES LTDA",
"nivel": 1,
},
{
"id": 5,
"name": "A I G AGENCIA DE VIAGENS E CONFECCOES LTDA",
"nivel": 2,
"protesto": 'false'
},
{
"id": 6,
"name": "A I G AGENCIA DE VIAGENS E CONFECCOES LTDA",
"nivel": 2,
"protesto": 'true'
},
{
"id": 7,
"name": "A I G AGENCIA DE VIAGENS E CONFECCOES LTDA",
"nivel": 2,
"protesto": 'false',
},
{
"id": 8,
"name": "A I G AGENCIA DE VIAGENS E CONFECCOES LTDA",
"nivel": 2,
"protesto": 'unknown'
},
{
"id": 9,
"name": "A I G AGENCIA DE VIAGENS E CONFECCOES LTDA",
"nivel": 2,
"protesto": 'unknown'
},
{
"id": 10,
"name": "A I G AGENCIA DE VIAGENS E CONFECCOES LTDA",
"nivel": 2,
"protesto": 'unknown'
},
{
"id": 11,
"name": "FO",
"nivel": 2,
"protesto": 'unknown'
},
{
"id": 12,
"name": "FO",
"nivel": 2,
"protesto": 'false'
},
{
"id": 13,
"name": "FO",
"nivel": 2,
"protesto": 'unknown'
},
{
"id": 14,
"name": "FO",
"nivel": 2,
"protesto": 'unknown'
},
{
"id": 15,
"name": "FO",
"nivel": 2,
"protesto": 'false'
}
],
"links": [{
"source": 1,
"target": 2
},
{
"source": 1,
"target": 3
},
{
"source": 1,
"target": 4
},
{
"source": 2,
"target": 5
},
{
"source": 2,
"target": 7
},
{
"source": 2,
"target": 8
},
{
"source": 2,
"target": 9
},
{
"source": 2,
"target": 10
},
{
"source": 3,
"target": 6
},
{
"source": 3,
"target": 11
},
{
"source": 4,
"target": 12
},
{
"source": 4,
"target": 13
},
{
"source": 4,
"target": 14
},
{
"source": 4,
"target": 15
}
]
}
</script>
</div>
</pre>
</code>
</div>
<div class="row">
<button type="button" class="btn btn-light btn-copy" data-ref="alert-1">Copiar</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="my-4">
<!-- Smart Score -->
<div class="row" id="smart-score-link">
<h2 class="exemples__title" class="btn btn-outline-secondary" data-bs-toggle="collapse" href="#smart-score"
role="button" aria-expanded="false" aria-controls="smart-score">
Smart Score:
</h2>
<div class="collapse" id="smart-score">
<div class="exemples__content">
<p>É possível alterar a imagem do score alternando a class da tag imagem entre as seguintes opções:
<br />
- smart-score-low
<br />
- smart-score-medium
<br />
- smart-score-high
</p>
<br />
<div class="row">
<div class="col">
<div class="container">
<div class="col d-flex justify-content-center align-items-center">
<div class="border border-marcelosgrey bg-cream rounded px-2.5 pb-1 text-center">
<div class="text-seventieslean text-sm">
<span>Smart</span>
<strong>Score</strong>
</div>
<div class="flex flex-row items-center justify-center">
<span class="text-lg font-medium">567</span>
<img class="smart-score-low ml-2" width="40" height="30">
</div>
<div class="text-xs leading-tight text-seventieslean">
risco alto
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="container bg-doc">
<div class="row">
<code>
<pre class="text-doc" data-copy-el="alert-1">
<div class="border border-marcelosgrey bg-cream rounded px-2.5 pb-1 text-center">
<div class="text-seventieslean text-sm">
<span>Smart</span>
<strong>Score</strong>
</div>
<div class="flex flex-row items-center justify-center">
<span class="text-lg font-medium">567</span>
<img class="smart-score-low ml-2" width="40" height="30">
</div>
<div class="text-xs leading-tight text-seventieslean">
risco alto
</div>
</div>
</pre>
</code>
</div>
<div class="row">
<button type="button" class="btn btn-light btn-copy" data-ref="alert-1">Copiar</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="my-4">
<!-- END Smart Score -->
<!-- Alert -->
<div class="row" id="alert-link">
<h2 class="exemples__title" class="btn btn-outline-secondary" data-bs-toggle="collapse" href="#alert"
role="button" aria-expanded="false" aria-controls="alert">
Alerts:
</h2>
<div class="collapse" id="alert">
<p>É possível definir qual direção deseja que o Alert saia da tela: alert-top, alert-right, alert-bottom e
alert-left</p>
<br />
<div class="exemples__content">
<div class="row">
<div class="col">
<div class="container">
<div class="col d-flex justify-content-center align-items-center">
<div class="alert alert-success alert-left">
Alert content
<span class="alert-close"></span>
</div>
</div>
</div>
</div>
<div class="col">
<div class="container bg-doc">
<div class="row">
<code>
<pre class="text-doc" data-copy-el="alert-1">
<div class="alert alert-success alert-left">
Alert content
<span class="alert-close"></span>
</div>
</pre>
</code>
</div>
<div class="row">
<button type="button" class="btn btn-light btn-copy" data-ref="alert-1">Copiar</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="container">
<div class="col d-flex justify-content-center align-items-center">
<div class="alert alert-danger alert-top">
Ops algo de errado
<span class="alert-close"></span>
</div>
</div>
</div>
</div>
<div class="col">
<div class="container bg-doc">
<div class="row">
<code>
<pre class="text-doc" data-copy-el="alert-2">
<div class="alert alert-danger alert-top">
Ops algo de errado
<span class="alert-close"></span>
</div>
</pre>
</code>
</div>
<div class="row">
<button type="button" class="btn btn-light btn-copy" data-ref="alert-2">Copiar</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="container">
<div class="col d-flex justify-content-center align-items-center">
<div class="alert alert-info alert-bottom">
Info/warning
<span class="alert-close"></span>
</div>
</div>
</div>
</div>
<div class="col">
<div class="container bg-doc">
<div class="row">
<code>
<pre class="text-doc" data-copy-el="alert-3">
<div class="alert alert-info alert-bottom">
Info/warning
<span class="alert-close"></span>
</div>
</pre>
</code>
</div>
<div class="row">
<button type="button" class="btn btn-light btn-copy" data-ref="alert-3">Copiar</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="my-4">
<!-- END Alert -->
<!-- Dialog -->
<div class="row" id="dialog-link">
<h2 class="exemples__title" class="btn btn-outline-secondary" data-bs-toggle="collapse" href="#dialog"
role="button" aria-expanded="false" aria-controls="dialog">
Dialog:
</h2>
<div class="collapse" id="dialog">
<div class="exemples__content">
<div class="row">
<div class="col">
<div class="container">
<div class="col d-flex justify-content-center align-items-center">
<button class="btn btn-default" data-dialog-open="dialog-teste">Demo Dialog</button>
<div class="dialog dialog-hidden" tabindex="-1" role="dialog" aria-modal="true"
data-ref="dialog-teste">
<div class="dialog-header">
<h1>Title</h1>
<div class="dialog-close-button" data-dialog-close="dialog-teste"></div>
</div>
<div class="dialog-content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At</p>
<span class="text-assistive">Mostrando dados de 01/02/2017 até 29/1/2021 (última data
disponível)</span>
</div>
<div class="dialog-footer">
<button class="btn btn-default" data-dialog-close="dialog-teste">Cancelar</button>
<button class="btn bg-goldcashu border-notblanco text-blanco font-bold">Confirmar</button>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="container bg-doc">
<div class="row">
<code>
<pre class="text-doc" data-copy-el="dialog">
<div class="dialog" tabindex="-1" role="dialog" aria-modal="true" data-ref="dialog-teste">
<div class="dialog-header">
<h1>Title</h1>
<div class="dialog-close-button" data-dialog-close="dialog-teste"></div>
</div>
<div class="dialog-content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At</p>
<span class="text-assistive">Mostrando dados de 01/02/2017 até 29/1/2021 (última data disponível)</span>
</div>
<div class="dialog-footer">
<button class="btn btn-default" data-dialog-close="dialog-teste">Cancelar</button>
<button class="btn bg-goldcashu border-notblanco text-blanco font-bold">Confirmar</button>
</div>
</div>
</pre>
</code>
</div>
<div class="row">
<button type="button" class="btn btn-light btn-copy" data-ref="dialog">Copiar</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="my-4">
<!-- END Dialog -->
<!-- Toast -->
<div class="row" id="toast-link">
<h2 class="exemples__title" class="btn btn-outline-secondary" data-bs-toggle="collapse" href="#toastr"
role="button" aria-expanded="false" aria-controls="toastr">
Toastr:
</h2>
<div class="collapse" id="toastr">
<div class="exemples__content">
<div class="row">
<div class="col">
<div class="container">
<div class="col d-flex justify-content-center align-items-center">
<div class="toastr" data-ref="toastr-teste">
<div class="toastr__header">
<h4 class="text-goldcashu">Cashu</h4>
<div class="toastr__history">
<div class="toastr__time">11 min ago</div>
<div class="toastr__close" data-toastr-close="toastr-teste"></div>
</div>
</div>
<p class="toastr__content">Hello, world! This is a toast message.</p>
</div>
</div>
</div>
</div>
<div class="col">
<div class="container bg-doc">
<div class="row">
<code>
<pre class="text-doc" data-copy-el="toastr">
<div class="toastr">
<h4 class="text-goldcashu">Cashu</h4>
<p class="text-assistive-bold">Hello, world! This is a toast message.</p>
</div>
</pre>
</code>
</div>
<div class="row">
<button type="button" class="btn btn-light btn-copy" data-ref="toastr">Copiar</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="my-4">
<!-- END Toast -->
<!-- Multiple Select -->
<div class="row" id="m-select-link">
<h2 class="exemples__title" class="btn btn-outline-secondary" data-bs-toggle="collapse" href="#m-select"
role="button" aria-expanded="false" aria-controls="m-select">
Multiple select:
</h2>
<div class="collapse" id="m-select">
<div class="exemples__content">
<div class="row">
<div class="col">
<div class="container">
<div class="col d-flex justify-content-center align-items-center">
<div class="select css-container" data-ref="select-teste">
<div class="select__control">
<div class="select__control--search">
<span class="select__icon"></span>
<input type="text" placeholder="Buscar" class="select__input"></div>
<span class="select__close" data-select-close="select-teste"></span>
</div>
<!-- <div class="select__highlighter"><strong>Selecione ou crie um grupo.</strong></div> -->
<div class="select__list-options" data-name="tipo-estabelecimento"
data-options="Açougues, Comércio de imovies, Hotelaria">
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="container bg-doc">
<div class="row">
<code>
<pre class="text-doc" data-copy-el="m-select">
<div class="select css-container" data-ref="select-teste">
<div class="select__control">
<div class="select__control--search">
<span class="select__icon"></span>
<input type="text" placeholder="Buscar" class="select__input"></div>
<span class="select__close" data-select-close="select-teste"></span>
</div>
<div class="select__list-options" data-name="tipo-estabelecimento" data-options="Açougues, Comércio de imovies, Hotelaria">
</div>
</div>
</pre>
</code>
</div>
<div class="row">
<button type="button" class="btn btn-light btn-copy" data-ref="m-select">Copiar</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="my-4">
<!-- END Multiple Select -->
<!-- Popover -->
<div class="row" id="popover-link">
<h2 class="exemples__title" class="btn btn-outline-secondary" data-bs-toggle="collapse" href="#popover"
role="button" aria-expanded="false" aria-controls="popover">
Popover:
</h2>
<div class="collapse" id="popover">
<p>É possível definir qual direção deseja que o Popover seja exibido: top, right, bottom e left</p>
<br />
<div class="exemples__content">
<div class="row">
<div class="col-6">
<div class="container">
<div class="col d-flex justify-content-center align-items-center">
<div class="container position-relative">
<div class="popover-custon right">
<div class="popover-custon__text">
Popover
</div>
<div class="tippy-box popover-custon__container" data-state="visible" tabindex="-1"
data-animation="fade" role="popover" style="max-width: 350px; transition-duration: 300ms;"
data-placement="top" data-ref="popover-teste">
<div class="tippy-content" data-state="visible" style="transition-duration: 300ms;">
<div>
<div>
<h2 class="mb-xs text-blackcashu">Title</h2><span
class="text-sm text-blackcashu mt-xs mr-0 mb-sm inline-block">Sua senha de certificado é
cadastrada durante
o processo de emissão, a mesma utilizada para emitir Notas Fiscais Eletrônicas (NF-e),
cupons fiscais
eletrônicos (CF-e) ou Comprovantes de Transporte Eletrônicos (CT-e).</span>
<div class="flex justify-between mt-sm"><button class="btn btn-default"
data-popover-close="popover-teste">Cancelar</button><button
class="btn bg-goldcashu border-notblanco text-blanco font-bold">Confirmar</button>
</div>
</div>
</div>
</div>
<div class="tippy-arrow"
style="position: absolute; left: 0px; transform: translate3d(166px, 0px, 0px);"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="container bg-doc">
<div class="row">
<code>
<pre class="text-doc" data-copy-el="popover">
<div class="popover-custon right">
<div class="popover-custon__text">
Popover
</div>
<div class="tippy-box popover-custon__container" data-state="visible" tabindex="-1" data-animation="fade" role="popover"
style="max-width: 350px; transition-duration: 300ms;" data-placement="top">
<div class="tippy-content" data-state="visible" style="transition-duration: 300ms;">
<div>
<div>
<h2 class="mb-xs text-blackcashu">Title</h2><span
class="text-sm text-blackcashu mt-xs mr-0 mb-sm inline-block">Sua senha de certificado é cadastrada durante
o processo de emissão, a mesma utilizada para emitir Notas Fiscais Eletrônicas (NF-e), cupons fiscais
eletrônicos (CF-e) ou Comprovantes de Transporte Eletrônicos (CT-e).</span>
<div class="flex justify-between mt-sm"><button class="btn btn-default">Cancelar</button><button
class="btn bg-goldcashu border-notblanco text-blanco font-bold">Confirmar</button></div>
</div>
</div>
</div>
<div class="tippy-arrow" style="position: absolute; left: 0px; transform: translate3d(166px, 0px, 0px);"></div>
</div>
</div>
</pre>
</code>
</div>
<div class="row">
<button type="button" class="btn btn-light btn-copy" data-ref="popover">Copiar</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="my-4">
<!-- END Popover -->
<!-- Paragraph -->
<div class="row" id="paragraph-link">
<h2 class="exemples__title" class="btn btn-outline-secondary" data-bs-toggle="collapse" href="#paragraph"
role="button" aria-expanded="false" aria-controls="paragraph">
Paragraph:
</h2>
<div class="collapse" id="paragraph">
<div class="exemples__content">
<div class="row">
<div class="col-6">
<div class="container">
<div class="col d-flex justify-content-center align-items-center">
<p>Este é um parágrafo</p>
</div>
</div>
</div>
<div class="col-6">
<div class="container bg-doc">
<div class="row">
<code>
<pre class="text-doc" data-copy-el="paragraph">
<p>Este é um parágrafo</p>
</pre>
</code>
</div>
<div class="row">
<button type="button" class="btn btn-light btn-copy" data-ref="paragraph">Copiar</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="my-4">
<!-- END Paragraph -->
<!-- Paginator -->
<div class="row" id="paginator-link">
<h2 class="exemples__title" class="btn btn-outline-secondary" data-bs-toggle="collapse" href="#paginator"
role="button" aria-expanded="false" aria-controls="paginator">
Paginator:
</h2>
<div class="collapse" id="paginator">
<div class="exemples__content">
<div class="row">
<div class="col-6">
<div class="container">
<div class="col d-flex justify-content-center align-items-center">
<div class="container position-relative">
<div class="pt-md pb-md text-center">
<ul class="pagination">
<a class="page-item" href="#">Anterior</a>
<a class="page-item" href="#">1</a>
<a class="page-item active" href="#">2</a>
<a class="page-item" href="#">3</a>
<a class="page-item" href="#">Próximo</a>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="container bg-doc">
<div class="row">
<code>
<pre class="text-doc" data-copy-el="paginator">
<div class="container position-relative">
<div class="pt-md pb-md text-center">
<ul class="pagination">
<a class="page-item" href="#">Anterior</a>
<a class="page-item" href="#">1</a>
<a class="page-item active" href="#">2</a>
<a class="page-item" href="#">3</a>
<a class="page-item" href="#">Próximo</a>
</ul>
</div>
</div>
</pre>
</code>
</div>
<div class="row">
<button type="button" class="btn btn-light btn-copy" data-ref="paginator">Copiar</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="my-4">
<!-- END Popover -->
<!-- Tooltip -->
<div class="row" id="tooltip-link">
<h2 class="exemples__title" class="btn btn-outline-secondary" data-bs-toggle="collapse" href="#tooltip"
role="button" aria-expanded="false" aria-controls="tooltip">
Tooltip:
</h2>
<div class="collapse" id="tooltip">
<p>É possível definir qual direção deseja que o Tooltip seja exibido: top, right, bottom e left</p>
<br />
<div class="exemples__content">
<div class="row">
<div class="col-6">
<div class="container">
<div class="col d-flex justify-content-center align-items-center">
<div class="tooltip-custon top"
data-content="Sua senha de certificado é cadastrada durante o processo de emissão, a mesma utilizada para emitir Notas Fiscais Eletrônicas (NF-e), cupons fiscais eletrônicos (CF-e) ou Comprovantes de Transporte Eletrônicos (CT-e).">
Tooltip
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="container bg-doc">
<div class="row">
<code>
<pre class="text-doc" data-copy-el="tooltip">
<div class="tooltip-custon top" data-content="Sua senha de certificado é cadastrada durante o processo de emissão, a mesma utilizada para emitir Notas Fiscais Eletrônicas (NF-e), cupons fiscais eletrônicos (CF-e) ou Comprovantes de Transporte Eletrônicos (CT-e).">
Tooltip
</div>
</pre>
</code>
</div>
<div class="row">
<button type="button" class="btn btn-light btn-copy" data-ref="tooltip">Copiar</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="my-4">
<!-- END Tooltip -->
<!-- Breadcrumb -->
<div class="row" id="breadcrumb-link">
<h2 class="exemples__title" class="btn btn-outline-secondary" data-bs-toggle="collapse" href="#breadcrumb"
role="button" aria-expanded="false" aria-controls="breadcrumb">
Breadcrumb:
</h2>
<div class="collapse" id="breadcrumb">
<div class="exemples__content">
<div class="row">
<div class="col-6">
<div class="container">
<div class="col d-flex justify-content-center align-items-center">
<a href="/smart_score/home">
<span class="icon icon-back-arrow-dark mr-2"></span>
</a>
<ul class="breadcrumbs">
<li>
<a href="">Home CashU</a>
</li>
<li>
<a href="">Smart Business Report</a>
</li>
<li>
<a href="">Dalmet Laminação Brasileira de Metais LTDA</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-6">
<div class="container bg-doc">
<div class="row">
<code>
<pre class="text-doc" data-copy-el="breadcrumb">
<a href="/smart_score/home">
<span class="icon icon-back-arrow-dark mr-2"></span>
</a>
<ul class="breadcrumbs">
<li>
<a href="">Home CashU</a>
</li>
<li>
<a href="">Smart Business Report</a>
</li>
<li>
<a href="">Dalmet Laminação Brasileira de Metais LTDA</a>
</li>
</ul>
</pre>
</code>
</div>
<div class="row">
<button type="button" class="btn btn-light btn-copy" data-ref="breadcrumb">Copiar</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="my-4">
<!-- END Breadcrumb -->
<!-- Button -->
<div class="row" id="button-link">
<h2 class="exemples__title" class="btn btn-outline-secondary" data-bs-toggle="collapse" href="#button"
role="button" aria-expanded="false" aria-controls="button">
Buttons:
</h2>
<div class="collapse" id="button">
<div class="exemples__content">
<div class="row">
<div class="col-6">
<div class="container">
<div class="col d-flex justify-content-center align-items-center">
<button class="btn btn-default">Botão padrão</button>
</div>
</div>
</div>
<div class="col-6">
<div class="container bg-doc">
<div class="row">
<code>
<pre class="text-doc" data-copy-el="btn-default">
<button class="btn btn-default">Botão padrão</button>
</pre>
</code>
</div>
<div class="row">
<button type="button" class="btn btn-light btn-copy" data-ref="btn-default">Copiar</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="container">
<div class="col d-flex justify-content-center align-items-center">
<button class="btn btn-ghost">Botão ghost</button>
</div>
</div>
</div>
<div class="col-6">
<div class="container bg-doc">
<div class="row">
<code>
<pre class="text-doc" data-copy-el="alert-2">
<button class="btn btn-ghost">Botão ghost</button>
</pre>
</code>
</div>
<div class="row">
<button type="button" class="btn btn-light btn-copy" data-ref="alert-2">Copiar</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="container">
<div class="col d-flex justify-content-center align-items-center">
<button class="btn btn-default btn-rounded">Botão arredondado</button>
</div>
</div>
</div>
<div class="col-6">
<div class="container bg-doc">
<div class="row">
<code>
<pre class="text-doc" data-copy-el="alert-3">
<button class="btn btn-default btn-rounded">Botão arredondado</button>
</pre>
</code>
</div>
<div class="row">
<button type="button" class="btn btn-light btn-copy" data-ref="alert-3">Copiar</button>
</div>
</div>
</div>
</div>
<!-- TODO Criar botão com icone. Entender quais seram estes icones -->
</div>
</div>
</div>
<hr class="my-4">
<!-- END Button -->
<!-- Button Group -->
<div class="row" id="button-group-link">
<h2 class="exemples__title" class="btn btn-outline-secondary" data-bs-toggle="collapse" href="#button-group"
role="button" aria-expanded="false" aria-controls="button-group">
Button Group:
</h2>
<div class="collapse" id="button-group">
<div class="exemples__content">
<div class="row">
<div class="col-6">
<div class="container">
<div class="col d-flex justify-content-center align-items-center">
<div class="btn-group">
<input id="grafico" type="radio" name="tipo" value="grafico">
<label for="grafico">Gráfico</label>
<input id="lista" type="radio" name="tipo" value="lista">
<label for="lista">Lista</label>
<input id="mapa" type="radio" name="tipo" value="mapa">
<label for="mapa">Mapa</label>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="container bg-doc">
<div class="row">
<code>
<pre class="text-doc" data-copy-el="button-grou">
<div class="btn-group">
<input id="grafico" type="radio" name="tipo" value="grafico">
<label for="grafico">Gráfico</label>
<input id="lista" type="radio" name="tipo" value="lista">
<label for="lista">Lista</label>
<input id="mapa" type="radio" name="tipo" value="mapa">
<label for="mapa">Mapa</label>
</div>
</pre>
</code>
</div>
<div class="row">
<button type="button" class="btn btn-light btn-copy" data-ref="button-grou">Copiar</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="my-4">
<!-- END Button Group -->
<!-- Checkbox -->
<div class="row" id="checkbox-link">
<h2 class="exemples__title" class="btn btn-outline-secondary" data-bs-toggle="collapse" href="#checkbox"
role="button" aria-expanded="false" aria-controls="checkbox">
Checkbox:
</h2>
<div class="collapse" id="checkbox">
<div class="exemples__content">
<div class="row">
<div class="col-6">
<div class="container">
<div class="col d-flex justify-content-center align-items-center">
<input id="check1" type="checkbox" disabled="" class="checkbox">
<label for="check1">Checkbox desabilitado</label>
<input id="check2" type="checkbox" class="checkbox">
<label for="check2"></label>
<input id="check3" type="checkbox" class="checkbox">
<label for="check3"></label>
<input id="check4" type="checkbox" disabled="" class="checkbox" checked="">
<label for="check4">Checkbox marcado - desabilitado</label>
</div>
</div>
</div>
<div class="col-6">
<div class="container bg-doc">
<div class="row">
<code>
<pre class="text-doc" data-copy-el="checkbox">
<input id="check1" type="checkbox" disabled="" class="checkbox">
<label for="check1">Checkbox desabilitado</label>
<input id="check2" type="checkbox" class="checkbox">
<label for="check2"></label>
<input id="check3" type="checkbox" class="checkbox">
<label for="check3"></label>
<input id="check4" type="checkbox" disabled="" class="checkbox" checked="">
<label for="check4">Checkbox marcado - desabilitado</label>
</pre>
</code>
</div>
<div class="row">
<button type="button" class="btn btn-light btn-copy" data-ref="checkbox">Copiar</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="my-4">
<!-- END Checkbox -->
<!-- Container -->
<div class="row" id="container-link">
<h2 class="exemples__title" class="btn btn-outline-secondary" data-bs-toggle="collapse" href="#container"
role="button" aria-expanded="false" aria-controls="container">
Container:
</h2>
<div class="collapse" id="container">
<div class="exemples__content">
<div class="row">
<div class="col-6">
<div class="container">
<div class="col d-flex justify-content-center align-items-center">
<div class="container">
<h1>Container</h1>
<p class="mt-xs">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At</p><span
class="text-assistive text-seventieslean font-bold">Mostrando dados de 01/02/2017 até 29/1/2021
(última data
disponível)</span>
<div class="container-content mt-sm"></div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="container bg-doc">
<div class="row">
<code>
<pre class="text-doc" data-copy-el="container-el">
<div class="container">
<h1>Container</h1>
<p class="mt-xs">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At</p><span
class="text-assistive text-seventieslean font-bold">Mostrando dados de 01/02/2017 até 29/1/2021 (última data
disponível)</span>
<div class="container-content mt-sm"></div>
</div>
</pre>
</code>
</div>
<div class="row">
<button type="button" class="btn btn-light btn-copy" data-ref="container-el">Copiar</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="my-4">
<!-- END Container -->
<!-- Date -->
<div class="row" id="date-link">
<h2 class="exemples__title" class="btn btn-outline-secondary" data-bs-toggle="collapse" href="#date" role="button"
aria-expanded="false" aria-controls="date">
Date:
</h2>
<div class="collapse" id="date">
<div class="exemples__content">
<div class="row">
<div class="col-6">
<div class="container">
<div class="col d-flex justify-content-center align-items-center">
<input type="date" class="form-input">
</div>
</div>
</div>
<div class="col-6">
<div class="container bg-doc">
<div class="row">
<code>
<pre class="text-doc" data-copy-el="date">
<input type="date" class="form-input">
</pre>
</code>
</div>
<div class="row">
<button type="button" class="btn btn-light btn-copy" data-ref="date">Copiar</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="my-4">
<!-- END Date -->
<!-- Form -->
<div class="row" id="form-link">
<h2 class="exemples__title" class="btn btn-outline-secondary" data-bs-toggle="collapse" href="#form" role="button"
aria-expanded="false" aria-controls="form">
Form:
</h2>
<div class="collapse" id="form">
<div class="exemples__content">
<div class="row">
<div class="col-6">
<div class="container">
<div class="col d-flex justify-content-center align-items-center">
<div class="flex-row">
<div>
<h3>Default</h3><label>Text input</label><br><input class="form-input" type="text"
placeholder="Default input"><br><span class="assistive-text-bold">assistive text</span>
</div><br>
<div>
<h3>Correct</h3><label>Text input</label><br><input class="form-input text-correct" type="text"
placeholder="Default input" value="Teste"><br><span class="assistive-text text-correct">Muito
bem</span>
</div><br>
<div>
<h3>Wrong</h3><label>Text input</label><br><input class="form-input text-wrong" type="text"
placeholder="Default input" value="Teste"><br><span class="assistive-text text-wrong">Algo
errado</span>
</div><br>
<h1>Select</h1><br><select class="form-select">
<option value=""></option>
<option value="1">Opção 1</option>
<option value="2">Opção 2</option>
<option value="3">Opção 3</option>
</select>
<h1>Textarea</h1><br><textarea class="form-textarea"></textarea><br>
<h1>Range</h1><input class="form-range" type="range"><br>
<h1>Paginação</h1><br>
<h1>Labels</h1><br><br><label class="label block">Label</label><span
class="text-sm font-bold text-seventieslean">Information</span><br><label
class="label inline-block mr-xs">Label</label><span
class="text-sm font-bold text-seventieslean">Information</span>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="container bg-doc">
<div class="row">
<code>
<pre class="text-doc" data-copy-el="form">
<input type="date" class="form-input">
</pre>
</code>
</div>
<div class="row">
<button type="button" class="btn btn-light btn-copy" data-ref="form">Copiar</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="my-4">
<!-- END Form -->
<!-- Navbar -->
<div class="row" id="navbar-link">
<h2 class="exemples__title" class="btn btn-outline-secondary" data-bs-toggle="collapse" href="#navbar"
role="button" aria-expanded="false" aria-controls="navbar">
Navbar:
</h2>
<div class="collapse" id="navbar">
<div class="exemples__content">
<div class="row">
<div class="col-6">
<div class="container">
<div class="col d-flex justify-content-center align-items-center">
<nav class="nav-bar flex justify-between">
<div class="logo-cashu"></div>
<div>
<div class="icon icon-smart-business-report"></div>
<span class="text-assistive bold">Smart business report</span>
</div>
</nav>
</div>
</div>
</div>
<div class="col-6">
<div class="container bg-doc">
<div class="row">
<code>
<pre class="text-doc" data-copy-el="navbar">
<nav class="nav-bar flex justify-between">
<div class="logo-cashu"></div>
<div>
<div class="icon icon-smart-business-report"></div>
<span class="text-assistive bold">Smart business report</span>
</div>
</nav>
</pre>
</code>
</div>
<div class="row">
<button type="button" class="btn btn-light btn-copy" data-ref="navbar">Copiar</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="my-4">
<!-- END Navbar -->
<!-- Radio Button -->
<div class="row" id="radio-button-link">
<h2 class="exemples__title" class="btn btn-outline-secondary" data-bs-toggle="collapse" href="#radio-button"
role="button" aria-expanded="false" aria-controls="radio-button">
Radio Button:
</h2>
<div class="collapse" id="radio-button">
<div class="exemples__content">
<div class="row">
<div class="col-6">
<div class="container">
<div class="col d-flex justify-content-center align-items-center">
<div class="radio-button__container mx-6">
<input id="radio1" type="radio" name="radio-group" class="radio-button" checked="" hidden>
<label class="radio-button-label pl-6">
Radio
</label>
</div>
<div class="radio-button__container mx-6">
<input id="radio2" type="radio" name="radio-group" class="radio-button" hidden>
<label class="radio-button-label pl-6">
Radio desmarcado
</label>
</div>
</div>
<div class="col d-flex justify-content-center align-items-center">
<div class="radio-button__container mx-6">
<input id="radio4" type="radio" disabled="" class="radio-button" checked="" hidden>
<label class="radio-button-label pl-6">
Radio marcado - desabilitado
</label>
</div>
<div class="radio-button__container mx-6">
<input id="radio3" type="radio" name="radio-group" class="radio-button" disabled="" hidden>
<label class="radio-button-label pl-6">
Radio desabilitado
</label>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="container bg-doc">
<div class="row">
<code>
<pre class="text-doc" data-copy-el="radio-butto">
<div class="radio-button__container mx-6">
<input id="radio1" type="radio" name="radio-group" class="radio-button" checked="" hidden>
<label class="radio-button-label pl-6">
Radio
</label>
</div>
</pre>
</code>
</div>
<div class="row">
<button type="button" class="btn btn-light btn-copy" data-ref="radio-butto">Copiar</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="my-4">
<!-- END Radio Button -->
<!-- Search -->
<div class="row" id="search-link">
<h2 class="exemples__title" class="btn btn-outline-secondary" data-bs-toggle="collapse" href="#search"
role="button" aria-expanded="false" aria-controls="search">
Search:
</h2>
<div class="collapse" id="search">
<div class="exemples__content">
<p>
É possível controlar o tamanho do container passando a class de controle do tailwindcss <a
href="https://tailwindcss.com/docs/width" target="_blank"
rel="noopener noreferrer">(https://tailwindcss.com/docs/width)</a> que define o width
</p>
<br />
<div class="row">
<div class="col-6">
<div class="container">
<div class="col d-flex justify-content-center align-items-center">
<div class="search-input-container w-3/4">
<span class="search-input-addon">
<span class="search-icon"></span>
</span>
<input class="form-input search" type="text" placeholder="Buscar">
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="container bg-doc">
<div class="row">
<code>
<pre class="text-doc" data-copy-el="search">
<div class="search-input-container">
<span class="search-input-addon">
<span class="search-icon"></span>
</span>
<input class="form-input search" type="text" placeholder="Buscar">
</div>
</pre>
</code>
</div>
<div class="row">
<button type="button" class="btn btn-light btn-copy" data-ref="search">Copiar</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="my-4">
<!-- END Search -->
<!-- Sidebar -->
<div class="row" id="sidebar-link">
<h2 class="exemples__title" class="btn btn-outline-secondary" data-bs-toggle="collapse" href="#sidebar"
role="button" aria-expanded="false" aria-controls="sidebar">
Sidebar:
</h2>
<div class="collapse" id="sidebar">
<div class="exemples__content">
<div class="row">
<div class="col-6">
<div class="container">
<div class="col d-flex justify-content-center align-items-center">
<nav class="side-nav">
<header>
<h4>Title</h4>
</header>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</nav>
</div>
</div>
</div>
<div class="col-6">
<div class="container bg-doc">
<div class="row">
<code>
<pre class="text-doc" data-copy-el="sidebar">
<nav class="side-nav">
<header>
<h4>Title</h4>
</header>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</nav>
</pre>
</code>
</div>
<div class="row">
<button type="button" class="btn btn-light btn-copy" data-ref="sidebar">Copiar</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="my-4">
<!-- END Sidebar -->
<!-- Switch -->
<div class="row" id="switch-link">
<h2 class="exemples__title" class="btn btn-outline-secondary" data-bs-toggle="collapse" href="#switch"
role="button" aria-expanded="false" aria-controls="switch">
Switch:
</h2>
<div class="collapse" id="switch">
<div class="exemples__content">
<div class="row">
<div class="col-6">
<div class="container">
<div class="col d-flex justify-content-center align-items-center">
<div class="switch-box"><label class="switch"><input type="checkbox" hidden checked=""><span
class="slider"></span></label>
</div>
<div class="switch-box"><label class="switch"><input type="checkbox" hidden><span
class="slider"></span></label></div>
<div class="switch-box"><label class="switch"><input type="checkbox" hidden disabled=""><span
class="slider"></span></label>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="container bg-doc">
<div class="row">
<code>
<pre class="text-doc" data-copy-el="switch">
<div class="switch-box"><label class="switch"><input type="checkbox" hidden checked=""><span class="slider"></span></label>
</div>
<div class="switch-box"><label class="switch"><input type="checkbox" hidden><span class="slider"></span></label></div>
<div class="switch-box"><label class="switch"><input type="checkbox" hidden disabled=""><span class="slider"></span></label>
</div>
</pre>
</code>
</div>
<div class="row">
<button type="button" class="btn btn-light btn-copy" data-ref="switch">Copiar</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="my-4">
<!-- END Switch -->
<!-- Tab -->
<div class="row" id="tab-link">
<h2 class="exemples__title" class="btn btn-outline-secondary" data-bs-toggle="collapse" href="#tab" role="button"
aria-expanded="false" aria-controls="tab">
Tab:
</h2>
<div class="collapse" id="tab">
<div class="exemples__content">
<div class="row">
<div class="col-6">
<div class="container">
<div class="col d-flex justify-content-center align-items-center">
<div class="tabs">
<div class="tablist">
<div class="tab" role="tab" aria-selected="true">Visão geral</div>
<div class="tab" role="tab" aria-selected="false">Faturamento</div>
<div class="tab" role="tab" aria-selected="false">Fluxo de caixa</div>
<div class="tab" role="tab" aria-selected="false">Curva ABC</div>
<div class="tab" role="tab" aria-selected="false">Lastro</div>
<div class="tab" role="tab" aria-selected="false">Protestos</div>
<div class="tab" role="tab" aria-selected="false">Dados cadastrais</div>
</div>
<div role="tabpanel">
<p>Visão geral</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="container bg-doc">
<div class="row">
<code>
<pre class="text-doc" data-copy-el="tab">
<div class="tabs">
<div class="tablist">
<div class="tab" role="tab" aria-selected="true">Visão geral</div>
<div class="tab" role="tab" aria-selected="false">Faturamento</div>
<div class="tab" role="tab" aria-selected="false">Fluxo de caixa</div>
<div class="tab" role="tab" aria-selected="false">Curva ABC</div>
<div class="tab" role="tab" aria-selected="false">Lastro</div>
<div class="tab" role="tab" aria-selected="false">Protestos</div>
<div class="tab" role="tab" aria-selected="false">Dados cadastrais</div>
</div>
<div role="tabpanel">
<p>Visão geral</p>
</div>
</div>
</pre>
</code>
</div>
<div class="row">
<button type="button" class="btn btn-light btn-copy" data-ref="tab">Copiar</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="my-4">
<!-- END Tab -->
<!-- Table -->
<div class="row" id="table-link">
<h2 class="exemples__title" class="btn btn-outline-secondary" data-bs-toggle="collapse" href="#table"
role="button" aria-expanded="false" aria-controls="table">
Table:
</h2>
<div class="collapse" id="table">
<div class="exemples__content">
<div class="row">
<div class="col-12">
<div class="container">
<div class="col d-flex justify-content-center align-items-center">
<div class="table-fixed-head w-10/12">
<table class="table w-full border border-1 border-marcelosgrey rounded">
<thead class="align-middle">
<tr class="bg-notblanco h-20">
<th class="px-4">Id do pedido</th>
<th class="px-4">Valor</th>
<th class="px-4">Data da ocorrência</th>
</tr>
</thead>
<tbody>
<tr class="h-20 align-middle ">
<td class="px-4 text-sm text-blackcashu font-medium">726241</td>
<td class="px-4 text-sm text-seventieslean font-medium">R$ 1.899,40</td>
<td class="px-4 text-sm text-seventieslean font-medium">14/03/2020</td>
</tr>
<tr class="h-20 align-middle ">
<td class="px-4 text-sm text-blackcashu font-medium">741778</td>
<td class="px-4 text-sm text-seventieslean font-medium">R$ 1.714,25</td>
<td class="px-4 text-sm text-seventieslean font-medium">09/03/2020</td>
</tr>
<tr class="h-20 align-middle ">
<td class="px-4 text-sm text-blackcashu font-medium">761384</td>
<td class="px-4 text-sm text-seventieslean font-medium">R$ 1.376,50</td>
<td class="px-4 text-sm text-seventieslean font-medium">14/03/2020</td>
</tr>
<tr class="h-20 align-middle ">
<td class="px-4 text-sm text-blackcashu font-medium">761162</td>
<td class="px-4 text-sm text-seventieslean font-medium">R$ 1.804,70</td>
<td class="px-4 text-sm text-seventieslean font-medium">22/03/2020</td>
</tr>
<tr class="h-20 align-middle ">
<td class="px-4 text-sm text-blackcashu font-medium">773495</td>
<td class="px-4 text-sm text-seventieslean font-medium">R$ 1.349,10</td>
<td class="px-4 text-sm text-seventieslean font-medium">21/04/2020</td>
</tr>
<tr class="h-20 align-middle ">
<td class="px-4 text-sm text-blackcashu font-medium">773268</td>
<td class="px-4 text-sm text-seventieslean font-medium">R$ 1.468,60</td>
<td class="px-4 text-sm text-seventieslean font-medium">27/04/2020</td>
</tr>
<tr class="h-20 align-middle ">
<td class="px-4 text-sm text-blackcashu font-medium">772382</td>
<td class="px-4 text-sm text-seventieslean font-medium">R$ 1.265,75</td>
<td class="px-4 text-sm text-seventieslean font-medium">06/05/2020</td>
</tr>
<tr class="h-20 align-middle ">
<td class="px-4 text-sm text-blackcashu font-medium">772007</td>
<td class="px-4 text-sm text-seventieslean font-medium">R$ 2.747,40</td>
<td class="px-4 text-sm text-seventieslean font-medium">24/05/2020</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="container bg-doc">
<div class="row">
<code>
<pre class="text-doc" data-copy-el="table">
<table class="table w-full border border-1 border-marcelosgrey rounded">
<thead class="align-middle">
<tr class="bg-notblanco h-20">
<th class="px-4">Id do pedido</th>
<th class="px-4">Valor</th>
<th class="px-4">Data da ocorrência</th>
</tr>
</thead>
<tbody>
<tr class="h-20 align-middle ">
<td class="px-4 text-sm text-blackcashu font-medium">726241</td>
<td class="px-4 text-sm text-seventieslean font-medium">R$ 1.899,40</td>
<td class="px-4 text-sm text-seventieslean font-medium">14/03/2020</td>
</tr>
<tr class="h-20 align-middle ">
<td class="px-4 text-sm text-blackcashu font-medium">741778</td>
<td class="px-4 text-sm text-seventieslean font-medium">R$ 1.714,25</td>
<td class="px-4 text-sm text-seventieslean font-medium">09/03/2020</td>
</tr>
<tr class="h-20 align-middle ">
<td class="px-4 text-sm text-blackcashu font-medium">761384</td>
<td class="px-4 text-sm text-seventieslean font-medium">R$ 1.376,50</td>
<td class="px-4 text-sm text-seventieslean font-medium">14/03/2020</td>
</tr>
<tr class="h-20 align-middle ">
<td class="px-4 text-sm text-blackcashu font-medium">761162</td>
<td class="px-4 text-sm text-seventieslean font-medium">R$ 1.804,70</td>
<td class="px-4 text-sm text-seventieslean font-medium">22/03/2020</td>
</tr>
<tr class="h-20 align-middle ">
<td class="px-4 text-sm text-blackcashu font-medium">773495</td>
<td class="px-4 text-sm text-seventieslean font-medium">R$ 1.349,10</td>
<td class="px-4 text-sm text-seventieslean font-medium">21/04/2020</td>
</tr>
<tr class="h-20 align-middle ">
<td class="px-4 text-sm text-blackcashu font-medium">773268</td>
<td class="px-4 text-sm text-seventieslean font-medium">R$ 1.468,60</td>
<td class="px-4 text-sm text-seventieslean font-medium">27/04/2020</td>
</tr>
<tr class="h-20 align-middle ">
<td class="px-4 text-sm text-blackcashu font-medium">772382</td>
<td class="px-4 text-sm text-seventieslean font-medium">R$ 1.265,75</td>
<td class="px-4 text-sm text-seventieslean font-medium">06/05/2020</td>
</tr>
<tr class="h-20 align-middle ">
<td class="px-4 text-sm text-blackcashu font-medium">772007</td>
<td class="px-4 text-sm text-seventieslean font-medium">R$ 2.747,40</td>
<td class="px-4 text-sm text-seventieslean font-medium">24/05/2020</td>
</tr>
</tbody>
</table>
</pre>
</code>
</div>
<div class="row">
<button type="button" class="btn btn-light btn-copy" data-ref="table">Copiar</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="my-4">
<!-- END Tab -->
</div>
<!-- - Importes em projetos externos devem ser feitos dessa forma -->
<!-- - <script src="./node_modules/cashu-design-system/dist/bundle.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js"
integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous">
</script>
<script src="./bundle.js"></script>
</body>
</html>