Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 59 additions & 0 deletions src/pages/blocks/cards/cards-with-buttons.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
---
title: Cards with Buttons
description: Display cards with button calls to action using the Cards block.
---

# Cards with Buttons

Cards that show their call to action as a button. See [Cards parameters](index.md) for `slots`, `width`, and other options.

## Syntax

```markdown
<Cards slots="image, heading, text, buttons" width="33%" />

![Card Image](path/to/image.png)

## Card Heading

Card description text goes here.

[Learn more](link-url.md)

```

## Parameters

- **slots**: Use `buttons` instead of `links` to show the call to action as a button. Don't use `links` and `buttons` in the same block.

## Example

<Cards slots="image, heading, text, buttons" width="33%" />

![Card Image](../../assets/column.jpg)

### First Card

This is a sample description for the first card in the grid.

[Learn more](https://developer.adobe.com/)

<Cards slots="image, heading, text, buttons" width="33%" />

![Card Image](../../assets/column.jpg)

### Second Card

This is a sample description for the second card in the grid.

[Learn more](https://developer.adobe.com/)

<Cards slots="image, heading, text, buttons" width="33%" />

![Card Image](../../assets/column.jpg)

### Third Card

This is a sample description for the third card in the grid.

[Learn more](https://developer.adobe.com/)
5 changes: 5 additions & 0 deletions src/pages/blocks/cards/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,9 @@ Card description text goes here.
- `"image, heading, text, links"` - Full card with all elements
- `"heading, text, links"` - Card without image
- `"image, heading, links"` - Card without description text
- Use either `links` or `buttons` for the call to action, not both:
- `links` - Shows the call to action as a text link
- `buttons` - Shows the call to action as a button. See [Cards with Buttons](cards-with-buttons.md).

- **width**: Card width for grid layout (optional)
- Full width (default)
Expand Down Expand Up @@ -69,3 +72,5 @@ This is a sample description for the third card in the grid.
[Learn more](https://developer.adobe.com/)

For cards with a wide image, see [Cards - Wide Variant](cards-wide.md).

For cards with buttons, see [Cards with Buttons](cards-with-buttons.md).
1 change: 1 addition & 0 deletions src/pages/config.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@
- [Announcement](/blocks/announcement/index.md)
- [Cards](/blocks/cards/index.md)
- [Cards Wide](/blocks/cards/cards-wide.md)
- [Cards with Buttons](/blocks/cards/cards-with-buttons.md)
- [Code](/blocks/code/index.md)
- [Code Basic](/blocks/code/code-basic.md)
- [Code Highlighted Line](/blocks/code/code-highlighted-line.md)
Expand Down
Loading