Card Component
The Card component enables the creation of a visual layout that presents key information within a clear, professional structure. Multiple display modes are available, offering flexibility to tailor the document’s presentation and ensure content is delivered clearly and consistently to readers.
Usage & Properties of the Card 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
|
| icon |
home page settings
search notif message
folder
edit security share
clock team calendar
alphabet error
media download branch
check document article
link carousel chart code
note task decision invoice
card infos quote spotlight
|
| mode |
mode-card mode-counter mode-simple
mode-stats mode-colored mode-kpi mode-cover
|
| 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 |
| text |
Custom text value |
| button_link |
Custom URL value |
| stats |
Custom Number value |
| cover |
Custom URL image value |
Card Component in action
Card component : Mode Card
:: card{theme="indigo-theme" mode="mode-card" font="serif-font-heading" align="align-left" box_type="container-full" button_link="" cover="" stats="2200" icon="media" title="title of card" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."} :: card
Card component : Mode With Numbers
:: card{theme="indigo-theme" mode="mode-counter" font="serif-font-heading" align="align-left" box_type="container-full" button_link="" cover="" stats="01." icon="media" title="title of card" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."} :: card
Card component : Simple Mode
:: card{theme="indigo-theme" mode="mode-simple" font="serif-font-heading" align="align-left" box_type="container-full" button_link="" cover="" stats="01." icon="media" title="title of card" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."} :: card
Card component : Stats Mode
:: card{theme="green-theme" mode="mode-stats" font="serif-font-heading" align="align-left" box_type="container-full" button_link="" cover="" stats="15%" icon="media" title="title of card" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."} :: card
Card component : Colored Mode
:: card{theme="orange-theme" mode="mode-colored" font="serif-font-heading" align="align-left" box_type="container-full" button_link="" cover="" stats="15%" icon="media" title="title of card" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."} :: card
Card component : KPI Mode
:: card{theme="blue-theme" mode="mode-kpi" font="sans-serif-font-heading" align="align-left" stats="15%" icon="network" title="Conversion rate" text="Up from yesterday" rate_number="4.3" rate_state="green"} :: card
Card component : Cover Mode with Image
:: card{theme="orange-theme" mode="mode-cover" font="serif-font-heading" align="align-left" box_type="container-full" button_link="https://super-markdown.com" cover="https://super-markdown.com/media/uploads/upload/cover2.jpg_4b3e86cd.jpeg" stats="01" icon="media" title="title of card" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."} :: card
What's Next ?
Need help ? Our team is here to support you. Contact us or check our FAQ.
