feat(card): add tagIcon and tagBorder options (#791)

This commit is contained in:
Ludovic Fernandez
2025-08-25 17:49:06 +02:00
committed by GitHub
parent c149af0f74
commit 22f81e2470
5 changed files with 32 additions and 18 deletions

View File

@@ -37,14 +37,12 @@ linkTitle: Cards
## Card Parameters
| Parameter | Description |
|------------|---------------------------------------------------------------------------------------|
| `link` | URL (internal or external). |
| `title` | Title heading for the card. |
| `subtitle` | Subtitle heading (supports Markdown). |
| `icon` | Name of the icon. See [icons]({{% relRef "icon" %}}) for more information. |
| `tag` | Text in tag. |
| `tagColor` | Color of the tag. See [badges]({{% relRef "others/#badges" %}}) for more information. |
| Parameter | Description |
|-------------|----------------------------------------------------------------------------------------|
| `link` | URL (internal or external). |
| `title` | Title heading for the card. |
| `subtitle` | Subtitle heading (supports Markdown). |
| `icon` | Name of the icon. See [icons]({{% relRef "icon" %}}) for more information. |
## Image Card
@@ -72,12 +70,20 @@ For more on Hugo's built in image processing commands, methods, and options see
Card supports adding tags which could be useful to show extra status information.
| Parameter | Description |
|-------------|----------------------------------------------------------------------------------------|
| `tag` | Text in tag. |
| `tagColor` | Color of the tag. See [badges]({{% relRef "others/#badges" %}}) for more information. |
| `tagIcon` | Icon of the tag. See [badges]({{% relRef "others/#badges" %}}) for more information. |
| `tagBorder` | Border of the tag. See [badges]({{% relRef "others/#badges" %}}) for more information. |
{{< cards >}}
{{< card link="../callout" title="Card with default tag" tag="tag text" >}}
{{< card link="../callout" title="Card with red tag" tag="tag text" tagColor="red" >}}
{{< card link="../callout" title="Card with blue tag" tag="tag text" tagColor="blue" >}}
{{< card link="../callout" title="Card with yellow tag" tag="tag text" tagColor="yellow" >}}
{{< card link="/" title="Image Card" image="images/space.jpg" subtitle="Internet Image" tag="tag text" tagColor="red" >}}
{{< card link="../callout" title="Card with yellow tag" tag="tag text" tagColor="yellow" tagIcon="sparkles" tagBorder=false >}}
{{< card link="/" title="Image Card" image="/images/card-image-unprocessed.jpg" subtitle="Image" tag="tag text" tagColor="green" >}}
{{< card link="/" title="Image Card" image="images/space.jpg" subtitle="Image" tag="tag text" tagColor="purple" tagIcon="sparkles" tagBorder=false >}}
{{< /cards >}}
```
@@ -85,8 +91,9 @@ Card supports adding tags which could be useful to show extra status information
{{</* card link="../callout" title="Card with default tag color" tag="tag text" */>}}
{{</* card link="../callout" title="Card with red tag" tag="tag text" tagColor="red" */>}}
{{</* card link="../callout" title="Card with blue tag" tag="tag text" tagColor="blue" */>}}
{{</* card link="../callout" title="Card with yellow tag" tag="tag text" tagColor="yellow" */>}}
{{</* card link="/" title="Image Card" image="images/space.jpg" subtitle="Internet Image" tag="tag text" tagColor="red" */>}}
{{</* card link="../callout" title="Card with yellow tag" tag="tag text" tagColor="yellow" tagIcon="sparkles" tagBorder=false */>}}
{{</* card link="/" title="Image Card" image="/images/card-image-unprocessed.jpg" subtitle="Image" tag="tag text" tagColor="green" */>}}
{{</* card link="/" title="Image Card" image="images/space.jpg" subtitle="Image" tag="tag text" tagColor="purple" tagIcon="sparkles" tagBorder=false */>}}
{{</* /cards */>}}
```