Skip to content
Monk BusinessMonk BusinessMonk Business Design System

Card

A card links to one service, product or topic: a title, a short description and a “Saiba mais” link.

Three linked cards in a CardGridDark · Grafite

  • Desenvolvimento de software

    Sistemas sob medida, integrações e APIs, do desenho à operação.

  • Assessment de ambientes

    Diagnóstico de infraestrutura, segurança e custos em AWS, Google Cloud e IBM Cloud.

  • IA e agentes

    Agentes, fluxos agênticos e automação de atendimento com Claude, OpenAI e Gemini.

    • Claude
    • OpenAI
    • Gemini
Three linked cards in a CardGridLight · Gelo

  • Desenvolvimento de software

    Sistemas sob medida, integrações e APIs, do desenho à operação.

  • Assessment de ambientes

    Diagnóstico de infraestrutura, segurança e custos em AWS, Google Cloud e IBM Cloud.

  • IA e agentes

    Agentes, fluxos agênticos e automação de atendimento com Claude, OpenAI e Gemini.

    • Claude
    • OpenAI
    • Gemini

Usage

Section titled “Usage”

Provide a heading-3 title, one or two sentences in small/muted, optional tags, and the target href. The whole card is the link: the title link is stretched over the card, so the link’s name is the title and “Saiba mais” stays out of the accessible name. Cards sit on surface with a border outline and radius-lg; on hover the outline turns border-strong. Lay them out in a CardGrid with space-6 gaps.

Do

  • Keep one link per card, with the title as its text.
  • Keep the description to one or two sentences.
  • Use a CardGrid list; each Card renders an <li> by default.

Don't

  • Add shadows or colored side borders.
  • Use icons as decoration.
  • Put more than one link in a card.

Astro

Section titled “Astro”
---
import Card from '@monk-business/astro/Card.astro';
import CardGrid from '@monk-business/astro/CardGrid.astro';
---


<CardGrid>
  <Card
    title="Desenvolvimento de software"
    href="/servicos/desenvolvimento-de-software/"
    description="Sistemas sob medida, integrações e APIs, do desenho à operação."
  />
  <Card title="IA e agentes" href="/servicos/inteligencia-artificial/" tags={['Claude', 'OpenAI', 'Gemini']}>
    Agentes, fluxos agênticos e automação de atendimento.
  </Card>
</CardGrid>

HTML

Section titled “HTML”
<ul class="mb-card-grid" role="list">
  <li class="mb-card">
    <h3 class="mb-card__title">
      <a class="mb-card__link" href="/servicos/desenvolvimento-de-software/">Desenvolvimento de software</a>
    </h3>
    <p>Sistemas sob medida, integrações e APIs, do desenho à operação.</p>
    <span class="mb-card__more" aria-hidden="true">Saiba mais →</span>
  </li>
</ul>

The approved shorthand, an <a class="mb-card"> wrapping the whole card, is also styled; prefer the stretched title link, which gives a short link name.

Props

Section titled “Props”
Card props · also accepts the attributes of <li>
PropTypeDefaultDescription
title *string—Card title (heading-3 style).
hrefstring—Link target. Without it the card is static (no hover, no "Saiba mais").
descriptionstring—One or two sentences. The default slot replaces it when you need markup.
tagsstring[]—Optional technology tags shown under the description.
morestring| false'Saiba mais'The "more" line shown on linked cards; false hides it. Hidden from screen readers, since the title already names the link.
headingLevel2| 3| 43Heading level of the title.
as'li'| 'article'| 'div''li'Element to render: li inside a CardGrid list, article or div elsewhere.

* required.

CardGrid props · also accepts the attributes of <ul>
PropTypeDefaultDescription
as'ul'| 'div''ul'ul for a list of cards (each Card renders an li by default); div for cards rendered with as="article" or as="div".

* required.