Skip to content

Card refactor #339

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: mainframe
Choose a base branch
from
Open

Card refactor #339

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
19c0abd
Cards: Removed card-layout shortcode + replaced showAsCards with new …
lamATnginx Aug 5, 2025
18271d1
Cards: Removed showAsSingleRow option
lamATnginx Aug 6, 2025
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
152 changes: 70 additions & 82 deletions assets/css/v2/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1508,119 +1508,107 @@ a:hover {
}

/* Product landing page cards */
.card-layout {
.card-section {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-block-start: 0.5rem;

.card-section {
&.featured-section {
/* Hide all the cards past 3 if it is a featured card section */
.card-section-content > *:nth-child(n + 4 of a.card) {
display: none;
}
}

.card-section-title {
font-weight: 500;
font-size: var(--font-step-2);
display: block;
}

.card-section-content {
display: flex;
flex-direction: column;
gap: 1.5rem;
gap: 1rem;

&.featured-section {
/* Hide all the cards past 3 if it is a featured card section */
.card-section-content > *:nth-child(n + 4 of a.card) {
display: none;
&.card-grid {
display: grid;
grid-template-columns: repeat(var(--grid-columns), 1fr);
gap: 1.5rem;

@media (max-width: 55rem) {
grid-template-columns: 1fr;
}
}

.card-section-title {
font-weight: 500;
font-size: var(--font-step-2);
display: block;
.card {
border: 1px solid oklch(var(--color-codeblock-border));
box-shadow: 3px 3px 0px oklch(var(--color-shadow));
padding: 1rem;
order: 2;
}
}

.card-section-content {
display: flex;
flex-direction: column;
gap: 1rem;

&.card-grid {
display: grid;
grid-template-columns: repeat(var(--grid-columns), 1fr);
gap: 1.5rem;

@media (max-width: 55rem) {
grid-template-columns: 1fr;
}
.card {
color: oklch(var(--color-foreground));
text-decoration: none;

.card {
border: 1px solid oklch(var(--color-codeblock-border));
box-shadow: 3px 3px 0px oklch(var(--color-shadow));
padding: 1rem;
order: 2;
}
.card-container {
display: flex;
flex-direction: column;
gap: 0.5rem;
}

.card {
color: oklch(var(--color-foreground));
text-decoration: none;
.card-header {
display: flex;
flex-direction: row;
gap: 1rem;
align-items: center;
color: oklch(var(--color-brand));

.card-container {
display: flex;
flex-direction: column;
gap: 0.5rem;
img.card-brand-icon {
height: 1.5rem;
width: auto;
}

.card-header {
display: flex;
flex-direction: row;
gap: 1rem;
align-items: center;
color: oklch(var(--color-brand));

img.card-brand-icon {
height: 1.5rem;
width: auto;
}

h2 {
padding: 0;
margin: 0;
font-size: var(--font-step-1);
}
h2 {
padding: 0;
margin: 0;
font-size: var(--font-step-1);
}
}
}
}
}

/* Home landing page cards */
.homepage .card-layout {
margin-block-end: 3rem;
gap: 3rem;
.homepage .card-section {
.card-section-content.card-grid {
grid-template-columns: 1fr;

.card-section {
.card-section-content.card-grid {
grid-template-columns: 1fr;
@media (min-width: 70rem) {
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: 1fr;
}

@media (min-width: 70rem) {
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: 1fr;
}
.card {
padding: 1rem 2rem 2rem 2rem;

.card {
padding: 1rem 2rem 2rem 2rem;

.card-container {
.card-header {
justify-content: flex-start;
.card-container {
.card-header {
justify-content: flex-start;

.lucide,
.card-brand-icon {
height: 40px;
width: auto;
}
.lucide,
.card-brand-icon {
height: 40px;
width: auto;
}
}
}

&:hover {
box-shadow: 3px 3px 0px oklch(var(--color-brand) / 0.4);
text-decoration-color: oklch(var(--color-background));
border: 1px solid oklch(var(--color-brand) / 0.8);
}
&:hover {
box-shadow: 3px 3px 0px oklch(var(--color-brand) / 0.4);
text-decoration-color: oklch(var(--color-background));
border: 1px solid oklch(var(--color-brand) / 0.8);
}
}
}
Expand Down
18 changes: 8 additions & 10 deletions exampleSite/content/_index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,12 @@ description:

## NGINX Hugo Theme Documentation
Documentation for hugo theme
{{<card-layout>}}
{{<card-section showAsCards="true">}}
{{<card title="Test Product" titleUrl="/test-product/" icon="test-tubes" isLanding="true">}}
See explanations and usages of shortcodes
{{</card >}}
{{<card title="NGINX Plus" titleUrl="/nginx/" brandIcon="NGINX-Plus-product-icon-RGB.svg" isLanding="true">}}
See a live example of theme components
{{</card >}}
{{</card-section>}}
{{</card-layout>}}
{{<card-section>}}
{{<card title="Test Product" titleUrl="/test-product/" icon="test-tubes" isLanding="true">}}
See explanations and usages of shortcodes
{{</card >}}
{{<card title="NGINX Plus" titleUrl="/nginx/" brandIcon="NGINX-Plus-product-icon-RGB.svg" isLanding="true">}}
See a live example of theme components
{{</card >}}
{{</card-section>}}

30 changes: 13 additions & 17 deletions exampleSite/content/test-product/_index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,25 +35,21 @@ This is a compilation of all our shortcodes to show how they look, function, res
[//]: # "One card will take full width page: two will take half width each. Three will stack like an inverse pyramid."
[//]: # "Some examples of content could be the latest release note, the most common install path, and a popular new feature."

{{<card-layout >}}
{{<card-section showAsCards="true" isFeaturedSection="true">}}
{{<card title="Everything" titleUrl="everything" icon="circle-dot-dashed">}}
All shortcodes in one page.
{{</card >}}
{{<card title="Call Out usages" titleUrl="call-out/all-callouts/" icon="message-square">}}
Examples for call-out shortcode
{{</card >}}
{{<card title="Code Block usages" titleUrl="code-blocks/code-blocks-highlighting/" icon="code">}}
Examples for codeblock shortcode
{{</card >}}
{{</card-section>}}
{{</card-layout >}}
{{<card-section isFeaturedSection="true">}}
{{<card title="Everything" titleUrl="everything" icon="circle-dot-dashed">}}
All shortcodes in one page.
{{</card >}}
{{<card title="Call Out usages" titleUrl="call-out/all-callouts/" icon="message-square">}}
Examples for call-out shortcode
{{</card >}}
{{<card title="Code Block usages" titleUrl="code-blocks/code-blocks-highlighting/" icon="code">}}
Examples for codeblock shortcode
{{</card >}}
{{</card-section>}}

## Other Content
[//]: # "You can add any extra content for the page here, such as additional cards, diagrams or text."

{{<card-layout >}}
{{<card-section title="NGINX" showAsCards="true" >}}
{{<card-section title="NGINX" >}}
{{<card title="NGINX Plus" titleUrl="/nginx/" brandIcon="NGINX-Plus-product-icon-RGB.svg" />}}
{{</card-section >}}
{{</card-layout >}}
{{</card-section >}}
92 changes: 36 additions & 56 deletions exampleSite/content/test-product/cards/permitted.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,26 +6,24 @@ weight: 100
## General usage
The structure of a card looks like the following:
```plaintext
<card-layout >
<card-section>
<card title="SOME_TITLE">SOME CONTENT icon="SOME_LUCIDE_ICON"><\card>
...
<card>SOME CONTENT<\card>
</card-section>
</card-layout >
<card-section>
<card title="SOME_TITLE">SOME CONTENT icon="SOME_LUCIDE_ICON">SOME_CONTENT<\card>
...
<card>...<\card>
</card-section>
```

and will render as the following:
<div data-testid="cards-test__basic">
{{<card-layout >}}
{{<card-section>}}
{{<card title="SOME_TITLE">}}
SOME CONTENT
{{</card >}}
{{</card-section>}}
{{</card-layout >}}
{{<card-section>}}
{{<card title="SOME_TITLE">}}
SOME CONTENT
{{</card >}}
{{</card-section>}}
</div>

Essentially, you have some `card` shortcodes that can only be put inside a `card-section` shortcode to group content together better.

### Params
To support customization, there are also some params you can add to the shortcode `<card>` such as `title`, `titleUrl`, `icon`, `brandIcon`, `isFullSize`.

Expand All @@ -41,56 +39,38 @@ To support customization, there are also some params you can add to the shortcod
* `isFullSize` (optional) - Boolean indicating whether or not the card should be full size. By default, cards are half sized.
* Usage: `<card isFullSize="true"...>`

For the `<card-section>`, there are some params you can add such as `title`, `isFeaturedSection`, and `showAsCards`.
For the `<card-section>`, there are some params you can add such as `title` and `isFeaturedSection`.
* `title` - Title of the section.
<br>
* `isFeaturedSection` (optional) - Boolean indicating whether or not the section is a featured one - will discuss later down the page. By default, false.
<br>
* `showAsCards` (optional) - Boolean indicating whether or not the cards in the section should appear with borders. By default, false.

### Additional Information
While it may come immediate, you can't use a `<card>` shortcode on its own in your markdown or else the build will fail. This is because if you call a card, there is no way to structure it in a writer-friendly customizable way.

## Show as cards
As you can see from the above example in 'General usage', it renders as a plain box that does not resemble a card. To change the appearance and render as a card, use the param `showAsCards` in the shortcode `<card-section>`. The usage as seen below:
```plaintext
<card-layout >
<card-section showAsCards="true">
<card title="SOME_TITLE">SOME CONTENT icon="SOME_LUCIDE_ICON"><\card>
...
<card>SOME CONTENT<\card>
</card-section>
</card-layout >
```
and will render as the following:
<div data-testid="cards-test__showAsCards">
{{<card-layout >}}
{{<card-section showAsCards="true">}}
{{<card title="SOME_TITLE">}}
SOME CONTENT
{{</card >}}
{{</card-section>}}
{{</card-layout >}}
</div>

## Featured Section
Denoted by the param `isFeaturedSection` in the shortcode `<card-layout>`, this block of cards can contain only up to three cards.
Denoted by the param `isFeaturedSection` in the shortcode `<card-section>`, this block of cards can contain only up to three cards. The usage as seen below:
```plaintext
<card-section isFeaturedSection="true">
<card ... >...</card>
<card ... >...</card>
<card ... >...</card>
<card ... >...</card>
</card-section>
```

<div data-testid="cards-test__featuredSection">
{{<card-layout >}}
{{<card-section showAsCards="true" isFeaturedSection="true">}}
{{<card title="Everything" titleUrl="everything" icon="circle-dot-dashed">}}
All shortcodes in one page.
{{</card >}}
{{<card title="Call Out usages" titleUrl="call-out/all-callouts/" icon="message-square">}}
Examples for call-out shortcode
{{</card >}}
{{<card title="Code Block usages" titleUrl="code-blocks/code-blocks-highlighting/" icon="code">}}
Examples for codeblock shortcode
{{</card >}}
{{<card title="Code Block usages" titleUrl="code-blocks/code-blocks-highlighting/" icon="code">}}
Examples for codeblock shortcode
{{</card >}}
{{</card-section>}}
{{</card-layout >}}
{{<card-section isFeaturedSection="true">}}
{{<card title="Everything" titleUrl="everything" icon="circle-dot-dashed">}}
All shortcodes in one page.
{{</card >}}
{{<card title="Call Out usages" titleUrl="call-out/all-callouts/" icon="message-square">}}
Examples for call-out shortcode
{{</card >}}
{{<card title="Code Block usages" titleUrl="code-blocks/code-blocks-highlighting/" icon="code">}}
Examples for codeblock shortcode
{{</card >}}
{{<card title="Code Block usages" titleUrl="code-blocks/code-blocks-highlighting/" icon="code">}}
Examples for codeblock shortcode
{{</card >}}
{{</card-section>}}
</div>
2 changes: 0 additions & 2 deletions layouts/shortcodes/card-layout.html
View file
Open in desktop

This file was deleted.

Loading