mirror of
https://github.com/imfing/hextra.git
synced 2025-06-19 10:44:16 -04:00
chore: improve tags styling on card (#431)
* chore: improve tags styling on card * chore: npm run build:css
This commit is contained in:
@ -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 */>}}
|
||||
```
|
||||
|
@ -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]",
|
||||
|
Reference in New Issue
Block a user