A call-to-action badge featuring a button and an overflown image.
Parameter | Description | Type | Status | |
---|---|---|---|---|
Button text | text | What the button says | String | required |
Button icon | icon | A custom or pre-defined FontAwesome class of icon to display on the button.
| String | suggested |
Button target | target | A page name or a URL the button is linked to. | String | suggested |
Button class | class | A custom or a predefined Bootstrap class name to apply to the button.
| String | suggested |
Image | image | Filename of an image to display. | Page name | suggested |
Class | card_class | A custom or a pre-defined Bootstrap class to apply to the card. | String | optional |
- Example
{{cta |text=Play Now |icon=fas fa-play mr-2 |image=Cta-playnow.png }}
- Result
- Wrapped
To group badges, wrap them in the template Cta block. Do not forget to close the wrapper using template End.
{{cta block}} {{cta |text=Play Now |icon=fas fa-play mr-2 |image=Cta-playnow.png }} {{cta |class=bg-purple |text=Join Discord |icon=fab fa-discord mr-2 |image=Cta-discord.png }} {{cta |class=bg-dark |text=Twitter |icon=fa-brands fa-x-twitter mr-2 |image=Cta-twitter.png }} {{end}}
- Result
- The same with a card class
{{cta block}} {{cta |card-class=alert-warning |text=Play Now |icon=fas fa-play mr-2 |image=Cta-playnow.png }} {{cta |card-class=alert-primary |class=bg-purple |text=Join Discord |icon=fab fa-discord mr-2 |image=Cta-discord.png }} {{cta |card-class=alert-secondary |class=bg-dark |text=Twitter |icon=fa-brands fa-x-twitter mr-2 |image=Cta-twitter.png }} {{end}}
- Result