proposal: cards with buttons

[ldez]

Feature Description

Adds buttons to cards.

The design of the cards allows adding elements at the bottom.

Problem/Solution

Currently, a card is one link, but sometimes, it's useful to have more than one link.

This can be useful, for example, with the showcase. It allows adding links to the site and to the repository.

Alternatives Considered

Creates custom cards.

Additional Context

This required considering several challenges (parameters, shortcodes/partials, etc.).

So this is just a raw idea.

I hardcoded the examples.

2 buttons with text and icons

Video

https://github.com/user-attachments/assets/2fa72276-ed32-485e-8ed6-a9c5b6101d0f

If you are interested, it can be a feature for the v0.12.

[imfing]

This looks fantastic!

I have a few questions:

• What will the interface look like in practice?
• How will users provide icons for these links?
• Should we support an optional title so the bottom space can be reused for buttons?
• And finally, how should we handle the link in the current interface?

[ldez]

I'm thinking about something like that:

{{< demo/cards >}}
    {{< demo/card title="Title" subtitle="Subtitle" image="my-image.jpg" >}}
        {{< demo/card/button label="Button 1" icon="github" link="/foo" >}}
        {{< demo/card/button label="Button 2" icon="sparkles" link="/bar" >}}
    {{< /demo/card >}}
{{< /demo/cards >}}

To achieve this, I will have to refactor deeply cards and card (and hextra/grid and maybe hextra/card) shortcodes and partials.

I think I can create a smooth migration path by using a temporary prefix. I don't have a full plan, I will do it step by step.

I already have a refactor for cards + hextra/grid and card (just a first step).

Edit: I opened the Pandora box, and I have a better proposal.

the Pandora Box

{{< demo/cards >}}
    {{< demo/card >}}
      {{< demo/card/title title="Callout" icon="warning" >}}
      {{< youtube id=dQw4w9WgXcQ loading=lazy >}}
    {{< /demo/card >}}
{{< /demo/cards >}}

{{< demo/cards >}}
    {{< demo/card  >}}
        {{< youtube id=dQw4w9WgXcQ loading=lazy >}}
        {{< demo/card/title title="With subtitle" subtitle="Subtitle" >}}
        {{< demo/card/buttons >}}
            {{< demo/card/button label="Button 1" link="#tags" >}}
            {{< demo/card/button label="Button 2" icon="globe-alt" link="#image-card" >}}
            {{< demo/card/button icon="sparkles" >}}
        {{< /demo/card/buttons >}}
    {{< /demo/card >}}
{{< /demo/cards >}}

[imfing]

I'm thinking about something like that:

{{< demo/cards >}}
    {{< demo/card title="Title" subtitle="Subtitle" image="my-image.jpg" >}}
        {{< demo/card/button label="Button 1" icon="github" link="/foo" >}}
        {{< demo/card/button label="Button 2" icon="sparkles" link="/bar" >}}
    {{< /demo/card >}}
{{< /demo/cards >}}

To achieve this, I will have to refactor deeply cards and card (and hextra/grid and maybe hextra/card) shortcodes and partials.

I think I can create a smooth migration path by using a temporary prefix. I don't have a full plan, I will do it step by step.

I already have a refactor for cards + hextra/grid and card (just a first step).

Edit: I opened the Pandora box, and I have a better proposal.

the Pandora Box

{{< demo/cards >}}
    {{< demo/card >}}
      {{< demo/card/title title="Callout" icon="warning" >}}
      {{< youtube id=dQw4w9WgXcQ loading=lazy >}}
    {{< /demo/card >}}
{{< /demo/cards >}}

{{< demo/cards >}}
    {{< demo/card  >}}
        {{< youtube id=dQw4w9WgXcQ loading=lazy >}}
        {{< demo/card/title title="With subtitle" subtitle="Subtitle" >}}
        {{< demo/card/buttons >}}
            {{< demo/card/button label="Button 1" link="#tags" >}}
            {{< demo/card/button label="Button 2" icon="globe-alt" link="#image-card" >}}
            {{< demo/card/button icon="sparkles" >}}
        {{< /demo/card/buttons >}}
    {{< /demo/card >}}
{{< /demo/cards >}}

Yeah, I think it looks very great. We need to properly document what are the supported shortcodes inside the card container.

[ldez]

We need to properly document what are the supported shortcodes inside the card container.

I implemented a check inside each shortcode to check the parent, the parent name, and the parent properties. The shortcodes will complain if they are not in the expected scope, and then the documentation will be easier.

I'm fighting with some CSS classes, but I have a working implementation.

[imfing]

We need to properly document what are the supported shortcodes inside the card container.

I implemented a check inside each shortcode to check the parent, the parent name, and the parent properties. The shortcodes will complain if they are not in the expected scope, and then the documentation will be easier.

I'm fighting with some CSS classes, but I have a working implementation.

I'd be happy to help with the CSS part, maybe we can start with a basic version and refine it as we go

[ldez]

I'm not trying to do something crazy: I only want to keep the existing style.

But I cannot use the current implementation with conditional CSS inside the partials. As the partials will be independent, the conditions don't work, so I should convert the existing condition to pure CSS (with Tailwind) expressions. For now, I'm playing with Tailwind, it's fun because I've never used it before this project.

Be sure that the CSS will not be perfect when I will open the PR, so I hope you will help me at this moment.

[imfing]

Thanks! Yes, the CSS part can definitely be tricky. Feel free to ask if you need any help.