# Cards

> Cards

---


## General usage

The structure of a card looks like the following:
```go-html-template
  
    
      SOME CONTENT
    

  
```

and will render as the following:
  
    
### SOME_TITLE

      SOME CONTENT
    

  

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`.

* `title` (required) - Title of the card. 

* `titleUrl` (optional) - URL for the card.

* `icon` (optional) - Custom icon using <a href="https://lucide.dev/icons/">lucide</a> icons.

* `brandIcon` (optional) - Custom icon using image from  `nginx-hugo-theme/static/images/icons`.
  * Usage: `<card brandIcon="NGINX-App-Protect-WAF-product-icon"...>`

* `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` and `isFeaturedSection`.
* `title` - Title of the section.

* `isFeaturedSection` (optional) - Boolean indicating whether or not the section is a featured one - will discuss later down the page. By default, false.

### Additional Information

Even if it may seem simple, 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. 

## Featured Section

This block of cards is marked with the isFeaturedSection parameter in the <card-section> shortcode and can contain a maximum of three cards. Usage is shown below:

```go-html-template 
  
    
      All shortcodes in one page.
    
    
      Examples for call-out shortcode
    
    
      Examples for codeblock shortcode
    
    
      Examples for codeblock shortcode
    
  
```

  
### [Everything](everything)

    All shortcodes in one page.
  

  
### [Call Out usages](call-out/all-callouts/)

    Examples for call-out shortcode
  

  
### [Code Block usages](code-blocks/code-blocks-highlighting/)

    Examples for codeblock shortcode
  

  
### [Code Block usages](code-blocks/code-blocks-highlighting/)

    Examples for codeblock shortcode