Header Component
The Header component creates a professional introduction for your document, presenting key information such as title, description, and metadata in a unified, visually consistent format that guides readers before they explore the full content.
Preview of differents versions of the 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-text mode-text-minimalist mode-simple mode-cover mode-centered mode-article
mode-classic-outisdemode-classic-rectmode-book-covermode-backgroundmode-presentation
|
| 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
|
| sub_title |
Custom text value |
| title |
Custom text value |
| description |
Custom text value |
| button_link |
Custom text value |
| cover |
URL of custom image |
Header Component in action
Header component : Mode Text Pure
:: header{theme="purple-theme" mode="mode-text" font="serif-font-heading" align="align-left" box_type="container-full" sub_title="sub title" button_link="https://super-markdown.com" button_text="Super Markdown" cover="" title="title of header" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."} :: header
Header component : Mode Text Minimalist
:: header{theme="purple-theme" mode="mode-text-minimalist" font="serif-font-heading" align="align-left" box_type="container-full" title="title of header" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."} :: header
Header component : Mode Simple
:: header{theme="orange-theme" mode="mode-simple" sub_title="sub title" button_link="https://super-markdown.com" button_text="Super Markdown" cover="" title="title of header" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."} :: header
Header component : Mode Cover
:: header{theme="orange-theme" mode="mode-cover" font="serif-font-heading" align="align-left" box_type="container-full" sub_title="sub title" button_link="https://super-markdown.com" button_text="Super Markdown" cover="" title="title of header" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."} :: header
Header component : Mode Classic
:: header{theme="primary-theme" mode="mode-classic" font="serif-font-heading" align="align-left" box_type="container-full" title="Title of document" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor." cover="https://super-markdown.com/static/images/cover-vertical-2.jpg"} :: header
Header component : Center Title in header
:: header{theme="primary-theme" mode="mode-centered" font="serif-font-heading" align="align-left" box_type="container-full" title="Title of document" description="" cover=""} :: header
Header component : Article Mode
:: header{theme="primary-theme" mode="mode-article" font="serif-font-heading" align="align-left" box_type="container-full" title="Title of document" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." cover="https://super-markdown.com/static/images/cover-article.jpg"} :: header
Header component : Outside Mode
:: header{theme="primary-theme" mode="mode-classic-outisde" font="serif-font-heading" align="align-left" box_type="container-full" title="Title of document" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." cover="https://super-markdown.com/static/images/woman-profile.png" button_link="https://super-markdown.com" button_text="Super Markdown"} :: header
Header component : Rectangle Classic Mode
:: header{theme="primary-theme" mode="mode-classic-rect" font="serif-font-heading" align="align-left" box_type="container-full" title="Title of document" description="" cover="https://super-markdown.com/static/images/cover3.jpg" button_link="" button_text="" sub_title="Sub title text"} :: header
Header component : Book Cover Mode
:: header{theme="primary-theme" mode="mode-book-cover" font="serif-font-heading" align="align-left" box_type="container-full" title="Title of document" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." cover="https://super-markdown.com/static/images/cover-carre.jpg" button_link="https://super-markdown.com" button_text="Super Markdown" sub_title=""} :: header
Header component : Background Mode
:: header{theme="primary-theme" mode="mode-background" font="serif-font-heading" align="align-left" box_type="container-full" title="Title of document" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." cover="https://super-markdown.com/static/images/cover-carre.jpg" button_link="https://super-markdown.com" button_text="Super Markdown" sub_title=""} :: header
Header component : Presentation Mode
:: header{theme="primary-theme" mode="mode-presentation" font="serif-font-heading" align="align-left" box_type="container-full" title="Title of document" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." cover="https://super-markdown.com/static/images/cover-carre.jpg" button_link="https://super-markdown.com" button_text="Super Markdown" sub_title=""} :: header
What's Next ?
Need help ? Our team is here to support you. Contact us or check our FAQ.
