chore: improve tags styling on card (#431)
Some checks failed
Deploy Hugo site to Pages / build (push) Has been cancelled
Deploy Hugo site to Pages / deploy (push) Has been cancelled

* chore: improve tags styling on card

* chore: npm run build:css
This commit is contained in:
Xin
2024-08-11 18:47:03 +01:00
committed by GitHub
parent f439e6bb87
commit e83c11f31a
7 changed files with 46 additions and 73 deletions

View File

@ -7,12 +7,12 @@ linkTitle: Cards
{{< cards >}}
{{< card link="../callout" title="Callout" icon="warning" >}}
{{< card link="../callout" title="Card with tag" icon="tag" tag="A custom tag">}}
{{< card link="../callout" title="Card with tag" icon="tag" tag="custom tag">}}
{{< card link="/" title="No Icon" >}}
{{< /cards >}}
{{< cards >}}
{{< card link="/" title="Image Card" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplash Landscape" >}}
{{< card link="/" title="Image Card" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="Internet Image" >}}
{{< card link="/" title="Local Image" image="/images/card-image-unprocessed.jpg" subtitle="Raw image under static directory." >}}
{{< card link="/" title="Local Image" image="images/space.jpg" subtitle="Image under assets directory, processed by Hugo." method="Resize" options="600x q80 webp" >}}
{{< /cards >}}
@ -69,20 +69,21 @@ For more on Hugo's built in image processing commands, methods, and options see
## Tags
The card supports adding tags with custom text and colors:
Card supports adding tags which could be useful to show extra status information.
{{< cards >}}
{{< 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="../callout" title="Card with default tag" tag="tag text" >}}
{{< card link="../callout" title="Card with error tag" tag="tag text" tagType="error" >}}
{{< card link="../callout" title="Card with info tag" tag="tag text" tagType="info" >}}
{{< card link="../callout" title="Card with warning tag" tag="tag text" tagType="warning" >}}
{{< card link="/" title="Image Card" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="Internet Image" tag="tag text" tagType="error" >}}
{{< /cards >}}
```
{{</* cards */>}}
{{</* card link="../callout" title="Card with default tag color" tag= "tag text" */>}}
{{</* card link="../callout" title="Card with default 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="../callout" title="Card with default tag color" tag="tag text" */>}}
{{</* card link="../callout" title="Card with default red tag" tag="tag text" tagType="error" */>}}
{{</* card link="../callout" title="Card with blue tag" tag="tag text" tagType="info" */>}}
{{</* card link="../callout" title="Card with yellow tag" tag="tag text" tagType="warning" */>}}
{{</* /cards */>}}
```

View File

@ -211,6 +211,7 @@
"hextra-card-icon",
"hextra-card-image",
"hextra-card-subtitle",
"hextra-card-tag",
"hextra-cards",
"hextra-code-block",
"hextra-code-copy-btn",
@ -418,6 +419,7 @@
"hx-pt-8",
"hx-px-1.5",
"hx-px-2",
"hx-px-2.5",
"hx-px-3",
"hx-px-4",
"hx-px-6",
@ -454,7 +456,6 @@
"hx-shrink-0",
"hx-sr-only",
"hx-sticky",
"hx-tag",
"hx-text-2xl",
"hx-text-4xl",
"hx-text-[10px]",