📖 Introdução

Bem-vindo ao Design System do CDN Pelotas! Este é um guia completo que reúne todos os componentes reutilizáveis, classes CSS e padrões de design utilizados no Portal da Prefeitura Municipal de Pelotas.

O que você encontrará aqui:

✅ Componentes PHP prontos para uso (Header, Footer, Topbar)
✅ Classes CSS customizadas para botões, backgrounds, loaders e mais
✅ Paleta de cores oficial do Portal
✅ Exemplos de código para implementação
✅ Demonstrações visuais de cada componente
✅ Guia de responsividade para mobile, tablet e desktop

⚙️ Instalação

1. Dependências

Para utilizar os componentes do CDN Pelotas, você precisa incluir as seguintes dependências:

HTML

<!-- Bootstrap 5.2.3 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Fonte Rawline -->
<link rel="stylesheet" href="https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/fonts/rawline/css/rawline.css">

<!-- CSS do CDN Pelotas -->
<!-- Ajustar conforme o ambiente de produção ou homologação -->
<link rel="stylesheet" href="https://cdnhomolog.coinpel.com.br/css/PUBLIC_style_base-cdn.css">
<link rel="stylesheet" href="https://cdnhomolog.coinpel.com.br/css/PUBLIC_style-cdn.css">
<link rel="stylesheet" href="https://cdnhomolog.coinpel.com.br/css/header-cdn.css">
<link rel="stylesheet" href="https://cdnhomolog.coinpel.com.br/css/footer-cdn.css">

2. JavaScript

HTML

<!-- Bootstrap Bundle (inclui Popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

🧩 Componentes PHP

O CDN Pelotas oferece componentes PHP reutilizáveis para facilitar o desenvolvimento.

PHP Responsivo

Arquivo: layout/PUBLIC_topbar_portal.php

Descrição: Barra superior preta com links para redes sociais (Facebook, Instagram, Flickr).

Como usar:

PHP


<?php 
$topbar_url = "https://cdnhomolog.coinpel.com.br/layout/PUBLIC_topbar_portal.php";
echo file_get_contents($topbar_url);
?>

2. Header Portal Component

PHP Responsivo

Arquivo: layout/PUBLIC_header_portal.php

Descrição: Cabeçalho do portal com logo e menu de navegação ou informações de secretary/module.

💡 Dois modos de uso:

Modo 1 (Menu): Com links de navegação
Modo 2 (Secretary/Module): Com título de secretaria e módulo

Modo 1: Com Menu de Links

PHP

<?php 
// Definir links do menu (JSON)
$links = json_encode([
    ['label' => 'Serviços', 'url' => '/servicos'],
    ['label' => 'Governo', 'url' => '/governo'],
    ['label' => 'Secretarias', 'url' => '/secretarias'],
    ['label' => 'Transparência', 'url' => '/transparencia'],
]);

// Passar parâmetros via query string
$header_url = "https://cdnhomolog.coinpel.com.br/layout/PUBLIC_header_portal.php?links=" . urlencode($links);
echo file_get_contents($header_url);
?>

Modo 2: Com Secretary/Module

Secretaria Municipal de Educação > PEMP - Externo

Protocolo

PHP

<?php 
// Definir informações do sistema
$title = 'PEMP - Externo';
$secretary = 'Secretaria Municipal de Educação > PEMP - Externo';
$module = 'Protocolo';
$logo = 'logo-prefeitura'; // Opcional

// Passar parâmetros via query string
$header_url = "https://cdnhomolog.coinpel.com.br/layout/PUBLIC_header_portal.php?" . http_build_query([
    'title' => $title,
    'secretary' => $secretary,
    'module' => $module,
    'logo' => $logo
]);

echo file_get_contents($header_url);
?>

Parâmetros Disponíveis:

Os parâmetros são passados via query string (GET) na URL quando usando file_get_contents().

Parâmetro	Tipo	Descrição	Obrigatório
`links`	JSON (URL encoded)	Array de objetos com `label`, `url` e `target`	Não
`title`	String	Título da página	Não
`secretary`	String	Secretaria/breadcrumb (texto laranja pequeno)	Não
`module`	String	Nome do módulo/sistema (texto grande em destaque)	Não
`logo`	String	Nome do arquivo da logo (padrão: 'logo-prefeitura')	Não

💡 Dica: Use http_build_query() ou urlencode() para passar os parâmetros corretamente na URL!

Exemplos Adicionais:

Exemplo 1: Com logo customizado

PHP

<?php 
$header_url = "https://cdnhomolog.coinpel.com.br/layout/PUBLIC_header_portal.php?" . http_build_query([
    'secretary' => 'Secretaria Municipal de Saúde',
    'module' => 'Sistema de Agendamento',
    'logo' => 'sanep' // Usa sanep.png
]);

echo file_get_contents($header_url);
?>

Exemplo 2: Apenas com módulo

PHP

<?php 
$header_url = "https://cdnhomolog.coinpel.com.br/layout/PUBLIC_header_portal.php?module=" . urlencode('Portal Transparência');
echo file_get_contents($header_url);
?>

Exemplo 3: Com links e parâmetros combinados

PHP

<?php 
$links = json_encode([
    ['label' => 'Início', 'url' => '/'],
    ['label' => 'Sobre', 'url' => '/sobre']
]);

$header_url = "https://cdnhomolog.coinpel.com.br/layout/PUBLIC_header_portal.php?" . http_build_query([
    'links' => $links,
    'module' => 'Sistema de Gestão'
]);

echo file_get_contents($header_url);
?>

Exemplo 4: Integração com Classe Layout

PHP

<?php 
class Layout {
    private $base_url = "https://cdnhomolog.coinpel.com.br/layout/";
    private $title, $secretary, $module, $logo;
    
    public function __construct($title, $secretary, $module, $logo = 'logo-prefeitura') {
        $this->title = $title;
        $this->secretary = $secretary;
        $this->module = $module;
        $this->logo = $logo;
    }
    
    public function getTopbar() {
        return file_get_contents($this->base_url . "PUBLIC_topbar_portal.php");
    }
    
    public function getHeader() {
        $header_url = $this->base_url . "PUBLIC_header_portal.php?" . http_build_query([
            'title' => $this->title,
            'secretary' => $this->secretary,
            'module' => $this->module,
            'logo' => $this->logo
        ]);
        return file_get_contents($header_url);
    }
    
    public function getFooter() {
        return file_get_contents($this->base_url . "PUBLIC_footer_portal.php");
    }
}

// Uso:
$layout = new Layout(
    "PEMP - Externo", 
    "Secretaria Municipal de Educação > PEMP - Externo > Seleções", 
    "Protocolo"
);

echo $layout->getTopbar();
echo $layout->getHeader();
// ... conteúdo da página ...
echo $layout->getFooter();
?>

Visualização:

O header está ativo logo abaixo da topbar! ⬆️

PHP Responsivo

Arquivo: layout/PUBLIC_footer_portal.php

Descrição: Rodapé completo com informações de contato e telefones de emergência. Possui 3 versões responsivas:

Desktop: ≥ 1490px
Tablet: 768px - 1489px
Mobile: < 768px

Como usar:

PHP

<?php 
$footer_url = "https://cdnhomolog.coinpel.com.br/layout/PUBLIC_footer_portal.php";
echo file_get_contents($footer_url);
?>

Parâmetros Disponíveis:

O footer aceita um parâmetro opcional para customizar o texto de desenvolvimento.

Parâmetro	Tipo	Descrição	Obrigatório
`development_text`	String (HTML permitido)	Texto customizado após "\| ". Se não informado, usa o padrão: "Desenvolvido pela COINPEL e SECOM."	Não

💡 Nota: A parte fixa "@2025 - Prefeitura Municipal de Pelotas | " sempre aparece. O parâmetro controla apenas o texto após o "| ".

Exemplos de Uso:

Exemplo 1: Com texto padrão (COINPEL e SECOM)

PHP

<?php 
$footer_url = "https://cdnhomolog.coinpel.com.br/layout/PUBLIC_footer_portal.php";
echo file_get_contents($footer_url);
?>
// Resultado: "@2025 - Prefeitura Municipal de Pelotas | Desenvolvido pela COINPEL e SECOM."

Exemplo 2: Com texto customizado (sem SECOM)

PHP

<?php 
$development_text = 'Desenvolvido pela <b>COINPEL</b>.';
$footer_url = "https://cdnhomolog.coinpel.com.br/layout/PUBLIC_footer_portal.php?" . http_build_query([
    'development_text' => $development_text
]);
echo file_get_contents($footer_url);
?>
// Resultado: "@2025 - Prefeitura Municipal de Pelotas | Desenvolvido pela COINPEL."

Exemplo 3: Com texto totalmente customizado

PHP

<?php 
$development_text = 'Desenvolvido pela <b>COINPEL</b> e <b>TI</b>.';
$footer_url = "https://cdnhomolog.coinpel.com.br/layout/PUBLIC_footer_portal.php?" . http_build_query([
    'development_text' => $development_text
]);
echo file_get_contents($footer_url);
?>
// Resultado: "@2025 - Prefeitura Municipal de Pelotas | Desenvolvido pela COINPEL e TI."

Exemplo 4: Integração com Classe Layout

PHP

<?php 
class Layout {
    private $cdnUrl;
    private $Context;
    
    public function __construct($cdnUrl, $context = null) {
        $this->cdnUrl = $cdnUrl;
        $this->Context = $context;
    }
    
    public function hasCdn() {
        return !empty($this->cdnUrl);
    }
    
    public function getFooterPortal($development_text = null) {
        if (!$this->cdnUrl) {
            return '';
        }
        
        $url = $this->cdnUrl . '/layout/PUBLIC_footer_portal.php';
        
        // Se passou um texto customizado, adiciona na URL
        if ($development_text !== null) {
            $url .= '?' . http_build_query([
                'development_text' => $development_text
            ]);
        }
        
        return file_get_contents($url, false, $this->Context);
    }
}

// Uso:
$layout = new Layout("https://cdn.coinpel.com.br");

// Com texto padrão
echo $layout->getFooterPortal();

// OU com texto customizado
echo $layout->getFooterPortal('Desenvolvido pela <b>COINPEL</b>.');
?>

Exemplo 5: Usando com método existente (sem modificar a classe)

PHP

<?php 
// Se você já tem um método getFooterPortal() sem parâmetros,
// pode definir $_POST antes de chamar:

if ($layout->hasCdn()) {
    // Define o texto customizado antes de chamar
    $_POST['development_text'] = 'Desenvolvido pela <b>COINPEL</b>.';
    echo $layout->getFooterPortal();
}
?>

🎨 Classes CSS Disponíveis

Tabela completa de todas as classes CSS customizadas do CDN Pelotas.

Classe	Descrição	Arquivo
`.btn-pelotas-cdn`	Botão padrão do portal (azul claro)	PUBLIC_style-cdn.css
`.btn-pelotas-cdn-sm`	Botão menor compacto (40x40px, formato quadrado)	PUBLIC_style-cdn.css
`.dropdown-menu-cdn`	Menu dropdown customizado	PUBLIC_style-cdn.css
`.dropdown-item-cdn`	Item do dropdown	PUBLIC_style-cdn.css
`.card-cdn`	Card customizado com hover animado	PUBLIC_style-cdn.css
`.card-cdn-body`	Corpo do card	PUBLIC_style-cdn.css
`.card-cdn-title`	Título do card	PUBLIC_style-cdn.css
`.card-cdn-primary`	Card azul claro	PUBLIC_style-cdn.css
`.card-cdn-secondary`	Card azul escuro	PUBLIC_style-cdn.css
`.card-cdn-accent`	Card laranja	PUBLIC_style-cdn.css
`.bg-blue-pelotas`	Background azul claro (#51bbda)	PUBLIC_style-cdn.css
`.bg-blue-pelotas-strong`	Background azul escuro (#1c6fa7)	PUBLIC_style-cdn.css
`.text-pelotas`	Texto laranja (#D3592F)	PUBLIC_style-cdn.css
`.text-pelotas-blue`	Texto azul claro (#51bbda)	PUBLIC_style-cdn.css
`.text-pelotas-strong`	Texto azul escuro (#1c6fa7)	PUBLIC_style-cdn.css
`.cssload-dots`	Container do loader animado	PUBLIC_style-cdn.css
`.cssload-dot`	Ponto individual do loader	PUBLIC_style-cdn.css
`.timeline`	Container da linha do tempo	PUBLIC_style-cdn.css
`.timeline-item`	Item da timeline	PUBLIC_style-cdn.css
`.menu-home-cdn`	Menu do header (fundo cinza)	header-cdn.css
`.block-news-cdn`	Bloco da topbar (fundo preto)	header-cdn.css

🎨 Paleta de Cores

Cores oficiais do Portal de Pelotas.

Cores Principais

Cores Neutras

✍️ Tipografia

Fontes

Principal: Rawline (do Gov.br Design System)

Alternativa: Montserrat

Disponível: Galano Grotesque (família completa em /font/Galano-Grotesque/)

Exemplos

Heading 1 - Rawline

Heading 2 - Rawline

Heading 3 - Rawline

Parágrafo normal com fonte Rawline. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Texto com classe .text-pelotas (laranja)

Texto com classe .text-pelotas-blue (azul claro)

Texto com classe .text-pelotas-strong (azul escuro)

🔘 Botões

Botão Padrão CDN Pelotas

Classe: .btn-pelotas-cdn

Estados do Botão:

HTML

<button class="btn btn-pelotas-cdn">Botão Padrão</button>
<button class="btn btn-pelotas-cdn" disabled>Botão Desabilitado</button>
<button class="btn btn-pelotas-cdn active">Botão Ativo</button>

Tamanhos:

HTML

<button class="btn btn-pelotas-cdn btn-sm">Botão Pequeno</button>
<button class="btn btn-pelotas-cdn">Botão Normal</button>
<button class="btn btn-pelotas-cdn btn-lg">Botão Grande</button>

Botão Pequeno com .btn-sm

Classe: .btn-pelotas-cdn.btn-sm

Versão reduzida do botão padrão usando a classe Bootstrap .btn-sm. Ideal para espaços compactos.

Especificações CSS do Botão Pequeno:

Largura: 180px (reduzido de 260px)
Padding: 8px vertical (reduzido de 15px)
Font-size: 0.875rem
Border radius: 20px (reduzido de 30px)
Background: #51bbda (azul claro)
Hover: #3787c7 (azul escuro)

Com Dropdown:

HTML

<div class="dropdown">
    <button class="btn btn-pelotas-cdn dropdown-toggle" 
            type="button" 
            data-bs-toggle="dropdown" 
            aria-expanded="false">
        Menu Dropdown
    </button>
    <ul class="dropdown-menu dropdown-menu-cdn">
        <li><a class="dropdown-item dropdown-item-cdn" href="#">Opção 1</a></li>
        <li><a class="dropdown-item dropdown-item-cdn" href="#">Opção 2</a></li>
        <li><a class="dropdown-item dropdown-item-cdn" href="#">Opção 3</a></li>
    </ul>
</div>

Especificações CSS:

Background: #51bbda (azul claro)
Hover: #3787c7 (azul escuro)
Border radius: 30px
Largura padrão: 260px
Padding: 15px (vertical)

Botão Menor (Compacto)

Classe: .btn-pelotas-cdn-sm

Versão compacta e quadrada do botão padrão, ideal para ícones ou ações secundárias.

Preview:

Padrão

Hover

Desabilitado

Ativo

HTML

<!-- Botão com ícone de busca -->
<button class="btn btn-pelotas-cdn-sm" type="button">
    <i class="fas fa-search"></i>
</button>

<!-- Botão com ícone de filtro -->
<button class="btn btn-pelotas-cdn-sm" type="button">
    <i class="fas fa-filter"></i>
</button>

<!-- Botão desabilitado -->
<button class="btn btn-pelotas-cdn-sm" type="button" disabled>
    <i class="fas fa-lock"></i>
</button>

<!-- Botão ativo -->
<button class="btn btn-pelotas-cdn-sm active" type="button">
    <i class="fas fa-check"></i>
</button>

Especificações CSS:

Background: #51bbda (azul claro)
Hover: #3787c7 (azul escuro)
Border radius: 6px
Largura e altura: 40px x 40px
Padding: 0 (usa flexbox para centralizar)
Font-size: 0.7rem
Sem borda: border: none

🃏 Cards CDN

Sistema de cards customizado com a identidade visual do Portal de Pelotas.

Card Básico

Classe: .card-cdn

Card Padrão

Este é um card básico com hover animado e sombra suave.

Header do Card

Com Header

Card com cabeçalho destacado.

Com Footer

Card com rodapé para ações.

HTML

<div class="row">
    <!-- Card Básico -->
    <div class="col-md-4 mb-3">
        <div class="card-cdn">
            <div class="card-cdn-body">
                <h5 class="card-cdn-title">Card Padrão</h5>
                <p class="card-cdn-text">Este é um card básico.</p>
                <button class="btn btn-pelotas-cdn btn-sm">Ação</button>
            </div>
        </div>
    </div>

    <!-- Card com Header -->
    <div class="col-md-4 mb-3">
        <div class="card-cdn">
            <div class="card-cdn-header">Header do Card</div>
            <div class="card-cdn-body">
                <h5 class="card-cdn-title">Com Header</h5>
                <p class="card-cdn-text">Card com cabeçalho destacado.</p>
            </div>
        </div>
    </div>

    <!-- Card com Footer -->
    <div class="col-md-4 mb-3">
        <div class="card-cdn">
            <div class="card-cdn-body">
                <h5 class="card-cdn-title">Com Footer</h5>
                <p class="card-cdn-text">Card com rodapé para ações.</p>
            </div>
            <div class="card-cdn-footer">Atualizado há 2 dias</div>
        </div>
    </div>
</div>

Variantes de Cores

Serviços Online

Acesse serviços digitais de forma rápida e prática.

Transparência

Consulte gastos públicos e licitações.

Ouvidoria

Envie sua sugestão ou reclamação.

HTML

<div class="row">
    <!-- Card Primary (Azul Claro) -->
    <div class="col-md-4 mb-3">
        <div class="card-cdn card-cdn-primary">
            <div class="card-cdn-body">
                <h5 class="card-cdn-title">Serviços Online</h5>
                <p class="card-cdn-text">Acesse serviços digitais de forma rápida e prática.</p>
                <button class="btn btn-light btn-sm">Acessar</button>
            </div>
        </div>
    </div>

    <!-- Card Secondary (Azul Escuro) -->
    <div class="col-md-4 mb-3">
        <div class="card-cdn card-cdn-secondary">
            <div class="card-cdn-body">
                <h5 class="card-cdn-title">Transparência</h5>
                <p class="card-cdn-text">Consulte gastos públicos e licitações.</p>
                <button class="btn btn-light btn-sm">Consultar</button>
            </div>
        </div>
    </div>

    <!-- Card Accent (Laranja) -->
    <div class="col-md-4 mb-3">
        <div class="card-cdn card-cdn-accent">
            <div class="card-cdn-body">
                <h5 class="card-cdn-title">Ouvidoria</h5>
                <p class="card-cdn-text">Envie sua sugestão ou reclamação.</p>
                <button class="btn btn-light btn-sm">Contatar</button>
            </div>
        </div>
    </div>
</div>

Cards com Destaque e Outline

Card com Destaque Azul

Borda lateral azul

Card com borda lateral colorida para destacar informações importantes.

Card com Destaque Laranja

Borda lateral laranja

Use para alertas ou destaques especiais.

Card com Borda

Card transparente com borda colorida.

Card Light

Card com fundo cinza claro.

HTML

<div class="row">
    <!-- Card com Destaque Azul -->
    <div class="col-md-6 mb-3">
        <div class="card-cdn card-cdn-highlight">
            <div class="card-cdn-body">
                <h5 class="card-cdn-title">Card com Destaque Azul</h5>
                <h6 class="card-cdn-subtitle">Borda lateral azul</h6>
                <p class="card-cdn-text">Card com borda lateral colorida.</p>
            </div>
        </div>
    </div>

    <!-- Card com Destaque Laranja -->
    <div class="col-md-6 mb-3">
        <div class="card-cdn card-cdn-highlight-accent">
            <div class="card-cdn-body">
                <h5 class="card-cdn-title">Card com Destaque Laranja</h5>
                <h6 class="card-cdn-subtitle">Borda lateral laranja</h6>
                <p class="card-cdn-text">Use para alertas ou destaques especiais.</p>
            </div>
        </div>
    </div>

    <!-- Card Outline -->
    <div class="col-md-6 mb-3">
        <div class="card-cdn card-cdn-outline">
            <div class="card-cdn-body">
                <h5 class="card-cdn-title">Card com Borda</h5>
                <p class="card-cdn-text">Card transparente com borda colorida.</p>
            </div>
        </div>
    </div>

    <!-- Card Light -->
    <div class="col-md-6 mb-3">
        <div class="card-cdn card-cdn-light">
            <div class="card-cdn-body">
                <h5 class="card-cdn-title">Card Light</h5>
                <p class="card-cdn-text">Card com fundo cinza claro.</p>
            </div>
        </div>
    </div>
</div>

Classes Disponíveis

Classe	Descrição
`.card-cdn`	Card básico com hover animado
`.card-cdn-body`	Corpo do card (padding 1.5rem)
`.card-cdn-title`	Título do card (font-weight 600)
`.card-cdn-subtitle`	Subtítulo (cinza, menor)
`.card-cdn-text`	Texto do conteúdo
`.card-cdn-header`	Cabeçalho do card (fundo cinza)
`.card-cdn-footer`	Rodapé do card (fundo cinza)
`.card-cdn-primary`	Variante azul claro (#51bbda)
`.card-cdn-secondary`	Variante azul escuro (#1c6fa7)
`.card-cdn-accent`	Variante laranja (#D3592F)
`.card-cdn-light`	Variante fundo claro (#F2F2F2)
`.card-cdn-outline`	Card transparente com borda azul
`.card-cdn-highlight`	Borda lateral azul (4px)
`.card-cdn-highlight-accent`	Borda lateral laranja (4px)

Características

✅ Hover animado: Efeito de elevação ao passar o mouse
✅ Border-radius: 12px para cantos arredondados
✅ Sombra suave: Box-shadow que aumenta no hover
✅ Transições: Animações suaves de 0.3s
✅ Variantes de cor: Primary, Secondary, Accent, Light, Outline
✅ Destaques: Bordas laterais coloridas

🖼️ Classes de Background

1. Background Azul Claro

Classe: .bg-blue-pelotas

Background Azul Claro

Cor: #51bbda

2. Background Azul Escuro

Classe: .bg-blue-pelotas-strong

Background Azul Escuro

Cor: #1c6fa7

HTML

<!-- Background Azul Claro -->
<div class="bg-blue-pelotas p-4 text-white rounded mb-4">
    <h4>Background Azul Claro</h4>
    <p class="mb-0">Cor: #51bbda</p>
</div>

<!-- Background Azul Escuro -->
<div class="bg-blue-pelotas-strong p-4 text-white rounded">
    <h4>Background Azul Escuro</h4>
    <p class="mb-0">Cor: #1c6fa7</p>
</div>

⏳ Loader Animado

Loader customizado com animação de pontos coloridos.

HTML

<!-- SVG Filter (necessário) -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display:none;">
    <defs>
        <filter id="goo">
            <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
            <feColorMatrix in="blur" mode="matrix" 
                values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 21 -7"/>
        </filter>
    </defs>
</svg>

<!-- Loader -->
<div class="cssload-dots">
    <div class="cssload-dot"></div>
    <div class="cssload-dot"></div>
    <div class="cssload-dot"></div>
    <div class="cssload-dot"></div>
    <div class="cssload-dot"></div>
</div>

📅 Timeline

Componente de linha do tempo para exibir eventos cronológicos.

10:30

Reunião de Planejamento

Discussão sobre os próximos projetos da prefeitura.

14:00

Projeto Aprovado

O projeto de renovação urbana foi aprovado.

16:30

Comunicado Oficial

Publicação do comunicado sobre novas medidas.

HTML

<div class="row">
    <div class="col-md-8 col-lg-6">
        <div class="timeline">
            <div>
                <i class="fas fa-clock bg-primary"></i>
                <div class="timeline-item">
                    <span class="time">10:30</span>
                    <h3 class="timeline-header">Título do Evento</h3>
                    <div class="timeline-body">
                        Descrição do evento...
                    </div>
                </div>
            </div>
            
            <div>
                <i class="fas fa-check bg-success"></i>
                <div class="timeline-item">
                    <span class="time">14:00</span>
                    <h3 class="timeline-header">Segundo Evento</h3>
                    <div class="timeline-body">
                        Descrição do segundo evento...
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

📱 Responsividade

Breakpoints

Dispositivo	Tamanho	Comportamento
Mobile	< 768px	Layout vertical, menu simplificado, footer compacto
Tablet	768px - 1489px	Layout adaptado, footer tablet, menu reduzido
Desktop	≥ 1490px	Layout completo, todos os elementos visíveis

Componentes Responsivos

Topbar: Padding ajustável, ícones menores no mobile
Header: Menu completo no desktop, logo simples no mobile
Footer: 3 versões diferentes (desktop, tablet, mobile)

📦 Exemplos Práticos com Cards CDN

Dashboard Administrativo

1.234

Atendimentos hoje

567

Protocolos abertos

89%

Taxa de satisfação

HTML

<div class="row">
    <!-- Card Métrica 1 -->
    <div class="col-md-4 mb-3">
        <div class="card-cdn card-cdn-primary">
            <div class="card-cdn-body text-center">
                <h2 class="card-cdn-title" style="font-size: 2.5rem; margin-bottom: 0.5rem;">1.234</h2>
                <p class="card-cdn-text" style="margin-bottom: 0;">Atendimentos hoje</p>
            </div>
        </div>
    </div>
    
    <!-- Card Métrica 2 -->
    <div class="col-md-4 mb-3">
        <div class="card-cdn card-cdn-secondary">
            <div class="card-cdn-body text-center">
                <h2 class="card-cdn-title" style="font-size: 2.5rem; margin-bottom: 0.5rem;">567</h2>
                <p class="card-cdn-text" style="margin-bottom: 0;">Protocolos abertos</p>
            </div>
        </div>
    </div>
    
    <!-- Card Métrica 3 -->
    <div class="col-md-4 mb-3">
        <div class="card-cdn card-cdn-accent">
            <div class="card-cdn-body text-center">
                <h2 class="card-cdn-title" style="font-size: 2.5rem; margin-bottom: 0.5rem;">89%</h2>
                <p class="card-cdn-text" style="margin-bottom: 0;">Taxa de satisfação</p>
            </div>
        </div>
    </div>
</div>

Serviços do Portal

Serviços Online

Acesse os serviços digitais da prefeitura de forma rápida e prática.

Transparência

Consulte informações sobre gastos públicos e licitações.

Ouvidoria

Envie sua sugestão, reclamação ou elogio para a prefeitura.

HTML

<div class="row">
    <!-- Card Serviço 1 -->
    <div class="col-md-4 mb-3">
        <div class="card-cdn card-cdn-highlight">
            <div class="card-cdn-body">
                <h5 class="card-cdn-title text-pelotas">Serviços Online</h5>
                <p class="card-cdn-text">Acesse os serviços digitais da prefeitura de forma rápida e prática.</p>
                <button class="btn btn-pelotas-cdn btn-sm">Acessar</button>
            </div>
        </div>
    </div>
    
    <!-- Card Serviço 2 -->
    <div class="col-md-4 mb-3">
        <div class="card-cdn card-cdn-highlight">
            <div class="card-cdn-body">
                <h5 class="card-cdn-title text-pelotas">Transparência</h5>
                <p class="card-cdn-text">Consulte informações sobre gastos públicos e licitações.</p>
                <button class="btn btn-pelotas-cdn btn-sm">Consultar</button>
            </div>
        </div>
    </div>
    
    <!-- Card Serviço 3 -->
    <div class="col-md-4 mb-3">
        <div class="card-cdn card-cdn-highlight-accent">
            <div class="card-cdn-body">
                <h5 class="card-cdn-title text-pelotas">Ouvidoria</h5>
                <p class="card-cdn-text">Envie sua sugestão, reclamação ou elogio para a prefeitura.</p>
                <button class="btn btn-pelotas-cdn btn-sm">Contatar</button>
            </div>
        </div>
    </div>
</div>

🎨 Design System CDN Pelotas

📖 Introdução

O que você encontrará aqui:

⚙️ Instalação

1. Dependências

2. JavaScript

🧩 Componentes PHP

1. Topbar Component

Como usar:

2. Header Portal Component

Modo 1: Com Menu de Links

Modo 2: Com Secretary/Module

Protocolo

Parâmetros Disponíveis:

Exemplos Adicionais:

Exemplo 1: Com logo customizado

Exemplo 2: Apenas com módulo

Exemplo 3: Com links e parâmetros combinados

Exemplo 4: Integração com Classe Layout

Visualização:

3. Footer Portal Component

Como usar:

Parâmetros Disponíveis:

Exemplos de Uso:

Exemplo 1: Com texto padrão (COINPEL e SECOM)

Exemplo 2: Com texto customizado (sem SECOM)

Exemplo 3: Com texto totalmente customizado

Exemplo 4: Integração com Classe Layout

Exemplo 5: Usando com método existente (sem modificar a classe)

🎨 Classes CSS Disponíveis

🎨 Paleta de Cores

Cores Principais

Cores Neutras

✍️ Tipografia

Fontes

Exemplos

Heading 1 - Rawline

Heading 2 - Rawline

Heading 3 - Rawline

🔘 Botões

Botão Padrão CDN Pelotas

Estados do Botão:

Tamanhos:

Botão Pequeno com .btn-sm

Especificações CSS do Botão Pequeno:

Com Dropdown:

Especificações CSS:

Botão Menor (Compacto)

Preview:

Especificações CSS:

🃏 Cards CDN

Card Básico

Card Padrão

Com Header

Com Footer

Variantes de Cores

Serviços Online

Transparência

Ouvidoria

Cards com Destaque e Outline

Card com Destaque Azul

Borda lateral azul

Card com Destaque Laranja

Borda lateral laranja

Card com Borda

Card Light

Classes Disponíveis

Características

🖼️ Classes de Background

1. Background Azul Claro

Background Azul Claro

2. Background Azul Escuro

Background Azul Escuro

⏳ Loader Animado

📅 Timeline

Reunião de Planejamento

Projeto Aprovado

Comunicado Oficial

📱 Responsividade

Breakpoints