CalloutCard
CalloutCards são componentes usados para fornecer ao usuário informações úteis, como tutoriais, atalhos ou dicas.
Quando usar:
- For necessário mostrar atalhos, dicas ou tutoriais de uma forma não intrusiva e visualmente marcante.
Quando não usar:
- For necessário mostrar mensagens relacionadas a mudanças ou condições especiais que ocorrem em um componente ou página. Para estes casos, recomenda-se o uso do Alert.
Uso
js
<CdsCalloutCard
image="caminho-da-imagem.jpg"
text="Texto do CalloutCard"
title="Título do CalloutCard"
/>Preview
Título do CalloutCard
Existe uma teoria que diz que, se um dia alguém descobrir exatamente para que serve o Universo e por que ele está aqui, ele desaparecerá instantaneamente.Props
Nome | Tipo | Default | Opções | Descrição |
|---|---|---|---|---|
* title (required) | string | 'Título do AlertCard' | -- | O título do card. O título também pode ser usado com o slot. |
text | string | 'Subtítulo do AlertCard' | -- | O texto do card. O texto também pode ser usado com o slot. |
* image (required) | string | '' | -- | A imagem do card. |
imageDescription | string | 'Imagem de CalloutCard' | -- | A descrição da imagem do card. |
actionButtonVariant | string | 'green' | green teal turquoise blue indigo violet pink red orange amber gray dark | A cor do botão do card. |
actionButtonText | string | 'Ok' | -- | O texto do botão do card. |
actionButtonSecondary | boolean | false | -- | A versão secundária do botão. |
actionButtonDisabled | boolean | false | -- | A versão disabled do botão. |
compact | boolean | false | -- | Modo de exibição do card. |
Eventos
Nome | Descrição |
|---|---|
@action-button-click | Evento que indica que o Botão foi clicado |
Slots
Nome | Descrição |
|---|---|
#text | Slot usado para inserção de conteúdo customizado no texto. |
#action | Slot usado para inserção de conteúdo customizado no lugar do botão de ação. |