Banner Component
The Banner component is used to create dynamic content banners that introduce visual contrast and simplicity to your layout. Multiple modes are available to ensure flexible integration with your content.
Usage & Properties of the Banner Component
| Parametres |
Values |
| theme |
primary-theme orange-theme green-theme
red-theme blue-theme purple-theme gris-theme
olive-theme gold-theme strawberry-theme
indigo-theme sky-theme yellow-theme
|
| mode |
mode-classic mode-gris-classic mode-white-classic mode-background mode-centered
mode-simple mode-rect
|
| box_type |
mini-box container-box container-view
container-large container-full
|
| align |
align-left align-center align-right
align-justify
|
| font |
serif-font-heading serif-font-global sans-serif-font-heading
sans-serif-font-global
|
| title |
Custom text value |
| sub_title |
Custom text value |
| description |
Custom text value |
| button_link |
Custom URL link value |
| button_text |
Custom text value |
| cover |
Custom URL of an image value |
Banner Component in action
Banner component : Classic Mode
:: banner{theme="blue-theme" mode="mode-classic" font="serif-font-heading" align="align-left" box_type="container-full" cover="https://super-markdown.com/media/uploads/upload/cover3.jpg_7eee91b3.jpeg" sub_title="Sub title" title="Title of banner" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." button_link="https://super-markdown.com" button_text="Super Markdown"} :: banner
Banner component : Classic Gris Mode
:: banner{theme="blue-theme" mode="mode-gris-classic" font="serif-font-heading" align="align-left" box_type="container-full" cover="" sub_title="Sub title" title="Title of banner" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." button_link="https://super-markdown.com" button_text="Super Markdown"} :: banner
Banner component : Classic White Mode
:: banner{theme="blue-theme" mode="mode-white-classic" font="serif-font-heading" align="align-left" box_type="container-view" cover="" sub_title="Sub title" title="Title of banner" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." button_link="https://super-markdown.com" button_text="Super Markdown"} :: banner
Banner component : Background Mode
:: banner{theme="blue-theme" mode="mode-background" font="serif-font-heading" align="align-left" box_type="container-full" cover="https://super-markdown.com/media/uploads/upload/cover3.jpg_7eee91b3.jpeg" sub_title="Sub title" title="Title of banner" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." button_link="https://super-markdown.com" button_text="Super Markdown"} :: banner
Banner component : Centered Mode
:: banner{theme="blue-theme" mode="mode-centered" font="serif-font-heading" align="align-left" box_type="container-full" cover="https://super-markdown.com/media/uploads/upload/cover3.jpg_7eee91b3.jpeg" sub_title="Sub title" title="Title of banner" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." button_link="https://super-markdown.com" button_text="Super Markdown"} :: banner
Banner component : Simple Mode
:: banner{theme="blue-theme" mode="mode-simple" font="serif-font-heading" align="align-left" box_type="container-full" cover="" sub_title="Sub title" title="Title of banner" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." button_link="https://super-markdown.com" button_text="Super Markdown"} :: banner
Banner component : Rect Mode
:: banner{theme="blue-theme" mode="mode-rect" font="serif-font-heading" align="align-left" box_type="container-full" cover="" sub_title="Sub title" title="Title of banner" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." button_link="https://super-markdown.com" button_text="Super Markdown"} :: banner
What's Next ?
Need help ? Our team is here to support you. Contact us or check our FAQ.
