Cards

Os Card são geralmente utilizados para organizar informação específica e facilmente serem interpretados pelos utilizadores. Estes componentes podem conter diferentes elementos, entre os quais botões, imagens, textos. O seu tamanho pode ser adaptado ao layout, sendo que os seguintes componentes, apesar de terem uma determinada altura e largura, ajustam-se ao layout conforme a necessidade.

O card informativo, pode ser utilizado quer em mobile, quer em desktop, permitindo criar uma mancha visual específica. Podem ser ajustados de modo a formarem uma grelha de 2, 3 ou 4 (em Desktop) ou estarem inseridos num carrossel.

A imagem deve ser de boa qualidade e o texto não deve ser demasiado grande. O botão pode não existir, assim como o card pode ser clicável, abrindo uma pop-up ou navegando para outra página. O card no estado default pode assumir a cor branco ou primary 100.

Características Principais

Agrupamento de Conteúdo

Organiza informações relacionadas em um único bloco visual.

Interatividade

Pode incluir elementos interativos como botões, links e imagens.

Versatilidade

Adequado para diversos tipos de conteúdos, como artigos, produtos, perfis de utilizadores, entre outros.

Exemplo de Utilização

Listagem de produtos ou serviços
Pré-visualização de artigos ou postagens
Perfis de utilizadores ou membros de uma equipa

Incorpore Cards sempre que desejar apresentar informações de forma estruturada e atraente, melhorando a legibilidade e a experiência de utilizador na interface.

Card informativo - horizontal

Title Text

Perigo

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

S - Default

                                            
<div class="gra-card-informative card-horizontal card-s">
    <div class="image">
        <img src="/img/exemplos/costa_norte_SM.jpg" alt="Imagem">
    </div>
    <div class="details">
        <div class="title">Title Text</div>
        <div class="badges">
            <div class="gra-status secondary dangerIcon">
                <span class="icon"></span>
                <span>Perigo</span>
            </div>
            <div class="gra-status primary dangerIcon">
                <i class="icon-circle-minus"></i>
                <span>Perigo</span>
            </div>
        </div>
        <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
    </div>
</div>

Title Text

Perigo

S - Desativado

                                            
<div class="gra-card-informative card-horizontal card-s disabled">
    <div class="image">
        <img src="/img/exemplos/costa_norte_SM.jpg" alt="Imagem">
    </div>
    <div class="details">
        <div class="title">Title Text</div>
        <div class="badges">
            <div class="gra-status secondary dangerIcon">
                <span class="icon"></span>
                <span>Perigo</span>
            </div>
            <div class="gra-status primary dangerIcon">
                <i class="icon-circle-minus"></i>
                <span>Perigo</span>
            </div>
        </div>
        <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
    </div>
</div>

Title Text

Perigo

S - Neutro

                                            
<div class="gra-card-informative card-horizontal card-s neutral">
    <div class="image">
        <img src="/img/exemplos/costa_norte_SM.jpg" alt="Imagem">
    </div>
    <div class="details">
        <div class="title">Title Text</div>
        <div class="badges">
            <div class="gra-status secondary dangerIcon">
                <span class="icon"></span>
                <span>Perigo</span>
            </div>
            <div class="gra-status primary dangerIcon">
                <i class="icon-circle-minus"></i>
                <span>Perigo</span>
            </div>
        </div>
        <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
    </div>
</div>

Title Text

Perigo

Link

M - Default

                                            
<div class="gra-card-informative card-horizontal card-m">
    <div class="image">
        <img src="/img/exemplos/costa_norte_SM.jpg" alt="Imagem">
    </div>
    <div class="details">
        <div class="title">Title Text</div>
        <div class="badges">
            <div class="gra-status secondary dangerIcon">
                <span class="icon"></span>
                <span>Perigo</span>
            </div>
            <div class="gra-status primary dangerIcon">
                <i class="icon-circle-minus"></i>
                <span>Perigo</span>
            </div>
        </div>
        <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div class="gra-hr-horizontal-light-s"></div>
        <div class="actions">
            <a href="#" class="gra-link gra-margin-right-2xs">Link</a>
            <button type="button" class="gra-btn btn-primary">Primário</button>
        </div>
    </div>
</div>

Title Text

Perigo

Link

M - Desativado

                                            
<div class="gra-card-informative card-horizontal card-m disabled">
    <div class="image">
        <img src="/img/exemplos/costa_norte_SM.jpg" alt="Imagem">
    </div>
    <div class="details">
        <div class="title">Title Text</div>
        <div class="badges">
            <div class="gra-status secondary dangerIcon">
                <span class="icon"></span>
                <span>Perigo</span>
            </div>
            <div class="gra-status primary dangerIcon">
                <i class="icon-circle-minus"></i>
                <span>Perigo</span>
            </div>
        </div>
        <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div class="gra-hr-horizontal-light-s"></div>
        <div class="actions">
            <a href="#" class="gra-link gra-margin-right-2xs disabled" disabled>Link</a>
            <button type="button" class="gra-btn btn-primary btn-primary-deactivated" disabled>Primário</button>
        </div>
    </div>
</div>

Title Text

Perigo

Link

M - Neutro

                                            
<div class="gra-card-informative card-horizontal card-m neutral">
    <div class="image">
        <img src="/img/exemplos/costa_norte_SM.jpg" alt="Imagem">
    </div>
    <div class="details">
        <div class="title">Title Text</div>
        <div class="badges">
            <div class="gra-status secondary dangerIcon">
                <span class="icon"></span>
                <span>Perigo</span>
            </div>
            <div class="gra-status primary dangerIcon">
                <i class="icon-circle-minus"></i>
                <span>Perigo</span>
            </div>
        </div>
        <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div class="gra-hr-horizontal-light-s"></div>
        <div class="actions">
            <a href="#" class="gra-link gra-margin-right-2xs">Link</a>
            <button type="button" class="gra-btn btn-primary">Primário</button>
        </div>
    </div>
</div>

Card informativo - vertical

Title Text

Perigo

Link

Default

                                            
<div class="gra-card-informative card-vertical">
    <div class="image">
        <img src="/img/exemplos/costa_norte_SM.jpg" alt="Imagem">
    </div>
    <div class="details">
        <div class="title">Title Text</div>
        <div class="badges">
            <div class="gra-status secondary dangerIcon">
                <span class="icon"></span>
                <span>Perigo</span>
            </div>
            <div class="gra-status primary dangerIcon">
                <i class="icon-circle-minus"></i>
                <span>Perigo</span>
            </div>
        </div>
        <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div class="gra-hr-horizontal-light-s"></div>
        <div class="actions">
            <a href="#" class="gra-link gra-margin-right-2xs">Link</a>
            <button type="button" class="gra-btn btn-primary">Primário</button>
        </div>
    </div>
</div>

Title Text

Perigo

Link

Desativado

                                            
<div class="gra-card-informative card-vertical disabled">
    <div class="image">
        <img src="/img/exemplos/costa_norte_SM.jpg" alt="Imagem">
    </div>
    <div class="details">
        <div class="title">Title Text</div>
        <div class="badges">
            <div class="gra-status secondary dangerIcon">
                <span class="icon"></span>
                <span>Perigo</span>
            </div>
            <div class="gra-status primary dangerIcon">
                <i class="icon-circle-minus"></i>
                <span>Perigo</span>
            </div>
        </div>
        <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div class="gra-hr-horizontal-light-s"></div>
        <div class="actions">
            <a href="#" class="gra-link gra-margin-right-2xs disabled" disabled>Link</a>
            <button type="button" class="gra-btn btn-primary btn-primary-deactivated" disabled>Primário</button>
        </div>
    </div>
</div>

Title Text

Perigo

Link

Neutro

                                            
<div class="gra-card-informative card-vertical neutral">
    <div class="image">
        <img src="/img/exemplos/costa_norte_SM.jpg" alt="Imagem">
    </div>
    <div class="details">
        <div class="title">Title Text</div>
        <div class="badges">
            <div class="gra-status secondary dangerIcon">
                <span class="icon"></span>
                <span>Perigo</span>
            </div>
            <div class="gra-status primary dangerIcon">
                <i class="icon-circle-minus"></i>
                <span>Perigo</span>
            </div>
        </div>
        <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div class="gra-hr-horizontal-light-s"></div>
        <div class="actions">
            <a href="#" class="gra-link gra-margin-right-2xs">Link</a>
            <button type="button" class="gra-btn btn-primary">Primário</button>
        </div>
    </div>
</div>

Card feedback - horizontal

Title Text

Perigo

Consultar informação

Perigo

                                            
<div class="gra-card-feedback card-horizontal danger">
    <div class="details">
        <div class="title">
            <span>Title Text</span>
            <i class="icon-close card-feedback-close"></i>
        </div>
        <div class="badges">
            <div class="gra-status primary dangerIcon">
                <i class="icon-circle-minus"></i>
                <span>Perigo</span>
            </div>
        </div>
        <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div class="actions">
            <a href="#" class="gra-link">Consultar informação</a>
        </div>
    </div>
</div>

Title Text

Informação

Consultar informação

Informação

                                            
<div class="gra-card-feedback card-horizontal info">
    <div class="details">
        <div class="title">
            <span>Title Text</span>
            <i class="icon-close card-feedback-close"></i>
        </div>
        <div class="badges">
            <div class="gra-status primary infoIcon">
                <i class="icon-circle-info"></i>
                <span>Informação</span>
            </div>
        </div>
        <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div class="actions">
            <a href="#" class="gra-link">Consultar informação</a>
        </div>
    </div>
</div>

Title Text

Alerta

Consultar informação

Alerta

                                            
<div class="gra-card-feedback card-horizontal alert">
    <div class="details">
        <div class="title">
            <span>Title Text</span>
            <i class="icon-close card-feedback-close"></i>
        </div>
        <div class="badges">
            <div class="gra-status primary alertIcon">
                <i class="icon-warning"></i>
                <span>Alerta</span>
            </div>
        </div>
        <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div class="actions">
            <a href="#" class="gra-link">Consultar informação</a>
        </div>
    </div>
</div>

Title Text

Sucesso

Consultar informação

Sucesso

                                            
<div class="gra-card-feedback card-horizontal success">
    <div class="details">
        <div class="title">
            <span>Title Text</span>
            <i class="icon-close card-feedback-close"></i>
        </div>
        <div class="badges">
            <div class="gra-status primary successIcon">
                <i class="icon-circle-success"></i>
                <span>Sucesso</span>
            </div>
        </div>
        <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div class="actions">
            <a href="#" class="gra-link">Consultar informação</a>
        </div>
    </div>
</div>

Card feedback - vertical

Title Text

Perigo

Consultar informação

Perigo

                                            
<div class="gra-card-feedback card-vertical danger">
    <div class="details">
        <div class="title">
            <span>Title Text</span>
            <i class="icon-close card-feedback-close"></i>
        </div>
        <div class="badges">
            <div class="gra-status primary dangerIcon">
                <i class="icon-circle-minus"></i>
                <span>Perigo</span>
            </div>
        </div>
        <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div class="actions">
            <a href="#" class="gra-link">Consultar informação</a>
        </div>
    </div>
</div>

Title Text

Informação

Consultar informação

Informação

                                            
<div class="gra-card-feedback card-vertical info">
    <div class="details">
        <div class="title">
            <span>Title Text</span>
            <i class="icon-close card-feedback-close"></i>
        </div>
        <div class="badges">
            <div class="gra-status primary infoIcon">
                <i class="icon-circle-info"></i>
                <span>Informação</span>
            </div>
        </div>
        <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div class="actions">
            <a href="#" class="gra-link">Consultar informação</a>
        </div>
    </div>
</div>

Title Text

Alerta

Consultar informação

Alerta

                                            
<div class="gra-card-feedback card-vertical alert">
    <div class="details">
        <div class="title">
            <span>Title Text</span>
            <i class="icon-close card-feedback-close"></i>
        </div>
        <div class="badges">
            <div class="gra-status primary alertIcon">
                <i class="icon-warning"></i>
                <span>Alerta</span>
            </div>
        </div>
        <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div class="actions">
            <a href="#" class="gra-link">Consultar informação</a>
        </div>
    </div>
</div>

Title Text

Sucesso

Consultar informação

Sucesso

                                            
<div class="gra-card-feedback card-vertical success">
    <div class="details">
        <div class="title">
            <span>Title Text</span>
            <i class="icon-close card-feedback-close"></i>
        </div>
        <div class="badges">
            <div class="gra-status primary successIcon">
                <i class="icon-circle-success"></i>
                <span>Sucesso</span>
            </div>
        </div>
        <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div class="actions">
            <a href="#" class="gra-link">Consultar informação</a>
        </div>
    </div>
</div>

Card texto

Title Text

Default

                                            
<div class="gra-card-text">
    <div class="picture">
        <i class="icon-task"></i>
    </div>
    <div class="details">
        <div class="title">Title Text</div>
        <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
    </div>
</div>

Title Text

Desativado

                                            
<div class="gra-card-text disabled">
    <div class="picture">
        <i class="icon-task"></i>
    </div>
    <div class="details">
        <div class="title">Title Text</div>
        <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
    </div>
</div>

Title Text

Neutro

                                            
<div class="gra-card-text neutral">
    <div class="picture">
        <i class="icon-task"></i>
    </div>
    <div class="details">
        <div class="title">Title Text</div>
        <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
    </div>
</div>

Card dashboards

Lorem ipsum

32.432.23

Erro

                                            
<div class="gra-card-dashboard">
    <div class="title">
        <span>Lorem ipsum</span>
        <div class="dashboard-icon error">
            <i class="icon-circle-arrow-down-left-solid"></i>
        </div>
    </div>
    <div class="value">32.432.23</div>
</div>

Lorem ipsum

32.432.23

Informação

                                            
<div class="gra-card-dashboard">
    <div class="title">
        <span>Lorem ipsum</span>
        <div class="dashboard-icon info">
            <i class="icon-circle-arrow-up-right-solid"></i>
        </div>
    </div>
    <div class="value">32.432.23</div>
</div>

Lorem ipsum

32.432.23

Alerta

                                            
<div class="gra-card-dashboard">
    <div class="title">
        <span>Lorem ipsum</span>
        <div class="dashboard-icon alert">
            <i class="icon-danger-solid"></i>
        </div>
    </div>
    <div class="value">32.432.23</div>
</div>

Lorem ipsum

32.432.23

Sucesso

                                            
<div class="gra-card-dashboard">
    <div class="title">
        <span>Lorem ipsum</span>
        <div class="dashboard-icon success">
            <i class="icon-circle-check-solid"></i>
        </div>
    </div>
    <div class="value">32.432.23</div>
</div>