Pattern library
Install UI Patterns Settings to see more settings when using Patterns.
Accordion 2 Item View Accordion 2 Item
The accordion uses collapse internally to make it collapsible. https://italia.github.io/bootstrap-italia/docs/componenti/accordion/
| Field | Label | Type | Description |
|---|---|---|---|
accordion_title | Title (field, no link) | text | Accordion title. Without link. |
accordion_content | Content (fields) | text | Accordion content. |
Alert 2 View Alert 2
https://italia.github.io/bootstrap-italia/docs/componenti/alert/
| Field | Label | Type | Description |
|---|---|---|---|
heading | Heading (raw text) | text | Optional. Raw text. |
message | Message (field) | text | Alert content. |
| Variant | Name | Description |
|---|---|---|
| Primary | primary | Type Primary |
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…| Variant | Name | Description |
|---|---|---|
| Info | info | Type info |
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…| Variant | Name | Description |
|---|---|---|
| Success | success | Type success |
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…| Variant | Name | Description |
|---|---|---|
| Warning | warning | Type waring |
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…| Variant | Name | Description |
|---|---|---|
| Danger | danger | danger |
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…Avatar 2 View Avatar 2
The Avatar element is a graphical representation of a user and can include an image, text, icon, or drop-down menu with additional content. https://italia.github.io/bootstrap-italia/docs/componenti/avatar/
| Field | Label | Type | Description |
|---|---|---|---|
avatar_image | Image (field) | text | Image from drupal field. Square format. Only image variant. |
avatar_text | Name (raw text) | text | Avatar text. Eg. Username. Raw text. Only text variant. |
avatar_url | Link (eg. /user/id, raw text). | text | Enter a url in raw text format. |
avatar_tooltip_text | Tooltip text (field) | text | Tooltip text. |
avatar_presence | Presence (raw text) | text | Avatar status. Raw text. ["active", "busy", "hidden"] |
avatar_presence_text | Presence text (raw text) | text | Customize assistive text. Raw text. |
avatar_status | Status type (raw text) | text | Avatar status. Raw text. ["approved", "declined", "notify"] |
avatar_status_text | Status text (raw text) | text | Customize assistive text. Raw text. |
avatar_extra_title | Extra title (field) | text | Avatar Extra text. Eg. User Name. |
avatar_extra_text | Extra text (field) | text | Avatar Extra text. Eg. Role. |
| Variant | Name | Description |
|---|---|---|
| Icon | icon | https://italia.github.io/bootstrap-italia/docs/componenti/avatar/#avatar-con-icona |
Francesca Rossi
Administrator| Variant | Name | Description |
|---|---|---|
| Image | image | https://italia.github.io/bootstrap-italia/docs/componenti/avatar/#avatar-con-immagine |
Francesca Rossi
Administrator| Variant | Name | Description |
|---|---|---|
| Text | text | https://italia.github.io/bootstrap-italia/docs/componenti/avatar/#avatar-con-testo |
Francesca Rossi
AdministratorButton 2 View Button 2
Buttons to be used as needed. It includes options for color. https://italia.github.io/bootstrap-italia/docs/componenti/buttons/
| Field | Label | Type | Description |
|---|---|---|---|
button_text | Button text | text | Button text. |
button_href | Button link | text | Button link for link variant. |
| Variant | Name | Description |
|---|---|---|
| Link | link | Button with tag <a> |
| Variant | Name | Description |
|---|---|---|
| Input | input | Button with tag <input> |
| Variant | Name | Description |
|---|---|---|
| Bottone | button | Button with tag <button> |
Callout 2 View Callout 2
Callouts can be used to highlight certain parts of the text that require special attention. They may contain error messages, warnings, tips, etc. https://italia.github.io/bootstrap-italia/docs/componenti/callout/
| Field | Label | Type | Description |
|---|---|---|---|
title | Title (raw text) | text | Callout title. Raw text. |
content | Content (field) | text | Callout content. Wrap your content with <p> tag. |
callout_type | Type (raw text) | text | Callout type: "success", "warning", "danger", "important", "note", "default". Raw text. |
more_content | More content (field, only more variant) | text | Callout more content. Wrap your content with <p> tag. |
more_call_to_action_url | Call to action link (eg. /node/id, raw text). | text | Enter a url in raw text format. Only more variant. |
more_call_to_action_label | Call to action label (raw text). | text | Enter a string in raw text format. Only more variant. |
more_call_to_action_icon | Call to action icon (it-name, raw text). | text | Enter the icon name format in raw text. Only more variant. |
custom_icon | Custom icon (raw text) | text | Choose a custom icon. Icon name format in Raw text. Leave blank for automatic icon. |
| Variant | Name | Description |
|---|---|---|
| Default | default | Basic callout. https://italia.github.io/bootstrap-italia/docs/componenti/callout/ |
Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius. Maecenas ullamcorper tincidunt nulla quis laoreet.
| Variant | Name | Description |
|---|---|---|
| Highlight | highlight | Callout with border only on the left side. https://italia.github.io/bootstrap-italia/docs/componenti/callout/#callout-highlights |
Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius. Maecenas ullamcorper tincidunt nulla quis laoreet.
| Variant | Name | Description |
|---|---|---|
| More | more | https://italia.github.io/bootstrap-italia/docs/componenti/callout/#callout-approfondimento |
Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius. Maecenas ullamcorper tincidunt nulla quis laoreet.
Aenean tortor enim, suscipit eget commodo at, imperdiet quis diam. Vestibulum non accumsan felis, at ultrices lorem. Pellentesque ac diam a ipsum cursus interdum id nec odio. Vestibulum nec congue mauris. Aliquam et dui purus. Mauris in imperdiet risus, sed blandit tellus. Donec posuere accumsan lacinia. Mauris dignissim, sem vel volutpat rhoncus, neque mi ullamcorper ante, vitae volutpat ipsum quam id purus. Duis tincidunt sodales nisl eget ultricies. Sed condimentum mi eu ex venenatis, quis bibendum dui ultrices. Quisque ex eros, pellentesque vitae enim sed, pharetra tempus dolor. Donec eu nibh ac lacus luctus pellentesque. Duis interdum scelerisque magna nec malesuada.
Maecenas at erat id sem interdum efficitur eu sed nunc. Mauris sit amet erat eget augue molestie malesuada ut sed ex. In sed dignissim elit. Donec efficitur, sem eget vestibulum auctor, sem erat interdum magna, eu commodo odio mauris semper dolor.
Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius. Maecenas ullamcorper tincidunt nulla quis laoreet.
Card 2 Big View Card 2 Big
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. https://italia.github.io/bootstrap-italia/docs/componenti/card/#card-grande
| Field | Label | Type | Description |
|---|---|---|---|
card_title | Title (field) | text | Card title. |
card_subtitle | Subtitle (field) | text | Card subtitle. |
card_text | Text (eg. body, raw text) | text | Card content. |
card_category | Category, tag or link (field) | text | Link of the category, tag or taxonomy term to associate. |
card_date | Date (field) | text | Submitting date. Format: Bootstrap Italia Medium Format (dd month yyyy) |
card_icon | Icon (eg. it-name, raw text) | text | https://italia.github.io/bootstrap-italia/docs/utilities/icone/ |
card_signature | Author name (field) | text | The author of the content or signature. |
card_read_more_url | Link (eg. /node/id, raw text). | text | Enter a url in raw text format. |
card_image | Image (field) | text | Enter a image field. |
| Variant | Name | Description |
|---|---|---|
| Article (category and date are mandatory) | article | https://italia.github.io/bootstrap-italia/docs/componenti/card/#card-grande-con-tag-data-e-call-to-action |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
Lorem ipsum dolor sit amet
| Variant | Name | Description |
|---|---|---|
| Flag (category and icon are mandatory) | flag | https://italia.github.io/bootstrap-italia/docs/componenti/card/#esempio-2 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
Lorem ipsum dolor sit amet
| Variant | Name | Description |
|---|---|---|
| Icon (icon are mandatory) | icon | https://italia.github.io/bootstrap-italia/docs/componenti/card/#card-grande |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
Lorem ipsum dolor sit amet
| Variant | Name | Description |
|---|---|---|
| Image (image are mandatory) | image | https://italia.github.io/bootstrap-italia/docs/componenti/card/#card-con-immagine |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
Lorem ipsum dolor sit amet
Card 2 Carousel evidence View Card 2 Carousel evidence
Use this card in carousel slide. https://italia.github.io/bootstrap-italia/docs/componenti/carousel/#card-con-immagine-in-evidenza
| Field | Label | Type | Description |
|---|---|---|---|
card_title | Title (field) | text | Card title. |
card_text | Text (eg. body, raw text) | text | Card content. |
card_category | Category, tag or link (field) | text | Link of the category, tag or taxonomy term to associate. |
card_date | Date (field) | text | Submitting date. Format: Bootstrap Italia Medium Format (dd month yyyy) |
card_signature | Author name (field) | text | The author of the content or signature. |
card_read_more_url | Link (eg. /node/id, raw text). | text | Enter a url in raw text format. |
card_image | Image (field) | text | Enter a image field. |
content_padding | Card content padding | select |
Card 2 Simple View Card 2 Simple
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. https://italia.github.io/bootstrap-italia/docs/componenti/card/#card-semplice
| Field | Label | Type | Description |
|---|---|---|---|
card_title | Title (field) | text | Card title. |
card_subtitle | Subtitle (field) | text | Card subtitle. |
card_text | Text (eg. body, raw text) | text | Card content. |
card_category | Category, tag or link (field) | text | Link of the category, tag or taxonomy term to associate. |
card_date | Date (field) | text | Submitting date. Format: Bootstrap Italia Medium Format (dd month yyyy) |
card_icon | Icon (eg. it-name, raw text) | text | https://italia.github.io/bootstrap-italia/docs/utilities/icone/ |
card_signature | Author name (field) | text | The author of the content or signature. |
card_read_more_url | Link (eg. /node/id, raw text). | text | Enter a url in raw text format. |
card_image | Image (field) | text | Enter a image field. |
| Variant | Name | Description |
|---|---|---|
| Default | default | https://italia.github.io/bootstrap-italia/docs/componenti/card/#card-semplice |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
Lorem ipsum dolor sit amet
| Variant | Name | Description |
|---|---|---|
| Article (tags and date are mandatory) | article | In this variant card_category and card_date field are mandatory. https://italia.github.io/bootstrap-italia/docs/componenti/card/#card-articolo-semplice |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
Lorem ipsum dolor sit amet
| Variant | Name | Description |
|---|---|---|
| Icon (category and icon are mandatory) | icon | In this variant card_icon field are mandatory, use the settings to provide a default value. https://italia.github.io/bootstrap-italia/docs/componenti/card/#card-con-icona |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
Lorem ipsum dolor sit amet
| Variant | Name | Description |
|---|---|---|
| Image (image field are mandatory) | image | https://italia.github.io/bootstrap-italia/docs/componenti/card/#card-con-immagine |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
Lorem ipsum dolor sit amet
Card 2 Special View Card 2 Special
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. https://italia.github.io/bootstrap-italia/docs/componenti/card/#card-speciali
| Field | Label | Type | Description |
|---|---|---|---|
card_title | Title (raw text) | text | Enter the title in text format and without links. |
card_date | Date (dd/mm/yy) | text | Format: dd/mm/yyyy |
card_image | Image (field) | text | Mandatory and without links. |
card_target_url | Target Url (raw text) | text | Enter url in raw text format (eg. /node/id). |
Card 2 Teaser View Card 2 Teaser
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. https://italia.github.io/bootstrap-italia/docs/componenti/card/#card-teaser
| Field | Label | Type | Description |
|---|---|---|---|
card_title | Title (field) | text | Enter the title field. |
card_text | Text (eg. body, raw text) | text | Card content in raw text |
card_icon | Icon (eg. it-name, raw text) | text | Only icon variant. https://italia.github.io/bootstrap-italia/docs/utilities/icone/ |
| Variant | Name | Description |
|---|---|---|
| Default | default | Default variant title and body |
| Variant | Name | Description |
|---|---|---|
| Icon (icon are mandatory) | icon | In this variant card_icon field are mandatory, use the settings to provide a default value. |
Gallery 2 View Gallery 2
The image list is a flexible component for displaying series of images in the form of a grid. https://italia.github.io/bootstrap-italia/docs/organizzare-i-contenuti/liste-di-immagini/
| Field | Label | Type | Description |
|---|---|---|---|
image | Image (field) | text | Image from drupal field. |
image_description | Description (raw text) | text | Image description. Raw text. |
icon_name | Icon (raw text) | text | Icon noma in it-name format. Raw text. |
call_to_action_url | Call to action link (eg. /node/id, raw text). | text | Enter a url in raw text format. |
| Variant | Name | Description |
|---|---|---|
| Standard | standard | https://italia.github.io/bootstrap-italia/docs/organizzare-i-contenuti/liste-di-immagini/#standard |
Hero 2 View Hero 2
Hero is a lightweight and flexible component that can optionally extend the entire window to show featured posts on your site. https://italia.github.io/bootstrap-italia/docs/componenti/hero/
| Field | Label | Type | Description |
|---|---|---|---|
image | Image (field) | text | Image from drupal field. |
hero_kicker | Kicker (field) | text | Hero Kicker. Field. |
hero_title | Title (field) | text | Hero title. Field. |
hero_text | Content text (field) | text | Hero content with <p> wrapper. Field. |
hero_cta_url | Call to action link (eg. /node/id, raw text). | text | Enter a url in raw text format. |
| Variant | Name | Description |
|---|---|---|
| Default | default | https://italia.github.io/bootstrap-italia/docs/componenti/hero/ |
List 2 View List 2
The list is a flexible component for displaying lists with related text, links, or items. https://italia.github.io/bootstrap-italia/docs/organizzare-i-contenuti/liste/
| Field | Label | Type | Description |
|---|---|---|---|
list_url | Link (eg. /node/id, raw text). | text | Enter a url in raw text format. |
list_text | List text (raw text) | text | List text in raw format. |
list_icon | Icon (eg. it-name, raw text) | text | https://italia.github.io/bootstrap-italia/docs/utilities/icone/ |
list_image | Image (field) | text | Image from drupal field. Only avatar and image variant. |
list_metadata | Metadata (field) | text | https://italia.github.io/bootstrap-italia/docs/organizzare-i-contenuti/liste/#con-metadata |
| Variant | Name | Description |
|---|---|---|
| Simple | simple | https://italia.github.io/bootstrap-italia/docs/organizzare-i-contenuti/liste/#lista-semplice-solo-testo |
| Variant | Name | Description |
|---|---|---|
| Avatar | avatar | https://italia.github.io/bootstrap-italia/docs/organizzare-i-contenuti/liste/#lista-con-avatar |
| Variant | Name | Description |
|---|---|---|
| Icon | icon | https://italia.github.io/bootstrap-italia/docs/organizzare-i-contenuti/liste/#lista-con-icona |
| Variant | Name | Description |
|---|---|---|
| Image | image | https://italia.github.io/bootstrap-italia/docs/organizzare-i-contenuti/liste/#lista-con-immagine |
Modal 2 View Modal 2
https://italia.github.io/bootstrap-italia/docs/componenti/modale/
| Field | Label | Type | Description |
|---|---|---|---|
modal_title | Title (raw text). | text | Enter a title in raw text. |
modal_body | Body (field). | text | Enter a body. Wrap text in <p> tag |
modal_footer | Footer (field). | text | Enter a footer. |
modal_icon | Icon (eg. it-name, raw text) | text | https://italia.github.io/bootstrap-italia/docs/utilities/icone/ |
modal_label | Button label (raw text) | text | Customize button label |
| Variant | Name | Description |
|---|---|---|
| Default | default | https://italia.github.io/bootstrap-italia/docs/componenti/modale/ |
Point list 2 View Point list 2
https://italia.github.io/bootstrap-italia/
| Field | Label | Type | Description |
|---|---|---|---|
date | Date (raw text) | text | Usually is the day, 1...31. Raw text |
month | Month (raw text) | text | The month. Raw text |
content | Content (raw text) | text | The content. |
| Variant | Name | Description |
|---|---|---|
| Primary | primary | Type Primary |
| Variant | Name | Description |
|---|---|---|
| Secondary | secondary | Type Primary |
| Variant | Name | Description |
|---|---|---|
| Info | info | Type info |
| Variant | Name | Description |
|---|---|---|
| Success | success | Type success |
| Variant | Name | Description |
|---|---|---|
| Warning | warning | Type waring |
| Variant | Name | Description |
|---|---|---|
| Danger | danger | danger |
| Variant | Name | Description |
|---|---|---|
| Danger | dark | danger |
Components list
Accordion Go to example code in new window
Alert demo Go to example code in new window
Heading primary
You are reading this important message. This sample text will be longer so you can see how spacing works within an alert with this type of content.Heading info
You are reading this important message. This sample text will be longer so you can see how spacing works within an alert with this type of content.Heading success
You are reading this important message. This sample text will be longer so you can see how spacing works within an alert with this type of content.Heading warning
You are reading this important message. This sample text will be longer so you can see how spacing works within an alert with this type of content.Heading danger
You are reading this important message. This sample text will be longer so you can see how spacing works within an alert with this type of content.Avatar size Go to example code in new window
Avatar with text Go to example code in new window
Avatar with icon Go to example code in new window
Avatar link Go to example code in new window
Avatar link with tooltip Go to example code in new window
Avatar presence Go to example code in new window
Avatar status Go to example code in new window
Badge with title Go to example code in new window
Example title h1 New
Example title h2 New
Example title h3 New
Example title h4 New
Example title h5 New
Example title h6 New
Badge with button Go to example code in new window
Badge contestual variants Go to example code in new window
primaryVariants secondaryVariants successVariants dangerVariants warningVariants whiteVariants darkVariants lightVariants blackVariants
primaryVariants secondaryVariants successVariants dangerVariants warningVariants whiteVariants darkVariants lightVariants blackVariants
primaryVariants secondaryVariants successVariants dangerVariants warningVariants whiteVariants darkVariants lightVariants blackVariants
primaryVariants secondaryVariants successVariants dangerVariants warningVariants whiteVariants darkVariants lightVariants blackVariants
Button base Go to example code in new window
Button variants Go to example code in new window
Button outline variants Go to example code in new window
Button disabled Go to example code in new window
Button outline disabled Go to example code in new window
Button with dark background Go to example code in new window
Button outline with dark background Go to example code in new window
Button disabled with dark background Go to example code in new window
Button outline disabled with dark background Go to example code in new window
Button with icon Go to example code in new window
Button with rounded icon Go to example code in new window
Button various size Go to example code in new window
Button full width Go to example code in new window
Button full width responsive md Go to example code in new window
Callout Go to example code in new window
You are reading this message. This sample text will be longer so you can see how spacing works within an alert with this type of content.
You are reading this message. This sample text will be longer so you can see how spacing works within an alert with this type of content.
You are reading this message. This sample text will be longer so you can see how spacing works within an alert with this type of content.
You are reading this message. This sample text will be longer so you can see how spacing works within an alert with this type of content.
You are reading this message. This sample text will be longer so you can see how spacing works within an alert with this type of content.
You are reading this message. This sample text will be longer so you can see how spacing works within an alert with this type of content.
Callout highlight Go to example code in new window
You are reading this message. This sample text will be longer so you can see how spacing works within an alert with this type of content.
You are reading this message. This sample text will be longer so you can see how spacing works within an alert with this type of content.
You are reading this message. This sample text will be longer so you can see how spacing works within an alert with this type of content.
You are reading this message. This sample text will be longer so you can see how spacing works within an alert with this type of content.
You are reading this message. This sample text will be longer so you can see how spacing works within an alert with this type of content.
You are reading this message. This sample text will be longer so you can see how spacing works within an alert with this type of content.
Callout more Go to example code in new window
Quisque suscipit interdum augue non volutpat. Cras tristique arcu tortor. Mauris eu magna nibh. Curabitur malesuada neque in lectus sagittis accumsan. In vitae justo eros. Maecenas pellentesque lacinia ipsum vitae rhoncus. Vestibulum pretium tempor turpis, nec gravida eros viverra in. Proin dictum nibh ut semper tristique.
Maecenas at erat id sem interdum efficitur eu sed nunc. Mauris sit amet erat eget augue molestie malesuada ut sed ex. In sed dignissim elit. Donec efficitur, sem eget vestibulum auctor, sem erat interdum magna, eu commodo odio mauris semper dolor.
Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius. Maecenas ullamcorper tincidunt nulla quis laoreet.
Aenean tortor enim, suscipit eget commodo at, imperdiet quis diam. Vestibulum non accumsan felis, at ultrices lorem. Pellentesque ac diam a ipsum cursus interdum id nec odio. Vestibulum nec congue mauris. Aliquam et dui purus. Mauris in imperdiet risus, sed blandit tellus. Donec posuere accumsan lacinia. Mauris dignissim, sem vel volutpat rhoncus, neque mi ullamcorper ante, vitae volutpat ipsum quam id purus. Duis tincidunt sodales nisl eget ultricies. Sed condimentum mi eu ex venenatis, quis bibendum dui ultrices. Quisque ex eros, pellentesque vitae enim sed, pharetra tempus dolor. Donec eu nibh ac lacus luctus pellentesque. Duis interdum scelerisque magna nec malesuada.
Maecenas at erat id sem interdum efficitur eu sed nunc. Mauris sit amet erat eget augue molestie malesuada ut sed ex. In sed dignissim elit. Donec efficitur, sem eget vestibulum auctor, sem erat interdum magna, eu commodo odio mauris semper dolor.
Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius. Maecenas ullamcorper tincidunt nulla quis laoreet.
Card simple Go to example code in new window
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
Card simple article Go to example code in new window
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
Card with icon Go to example code in new window
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
Card shadow Go to example code in new window
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
Card shadow with image Go to example code in new window
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
Card special Go to example code in new window
Card teaser Go to example code in new window
Card big icon Go to example code in new window
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
Card big 2 Go to example code in new window
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
Card big 2, flag invisible and not border bottom Go to example code in new window
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
Card big with tag, date and call to action Go to example code in new window
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
Card big with tag, image, date and call to action Go to example code in new window
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
Card big with tag, image, date without shadow Go to example code in new window
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
Chips standard and big Go to example code in new window
Only text
Dismissible
Dismissible with icon
Dismissible with avatar
Only text
Dismissible
Dismissible with icon
Dismissible with avatar
Chip color Go to example code in new window
Chip disabled Go to example code in new window
Dropdown variant Go to example code in new window
Dropdown link Go to example code in new window
Dropdown direction Go to example code in new window
Dropdown dark variant Go to example code in new window
Dropdown with icon Go to example code in new window
Image list Go to example code in new window
Image list: grid standard Go to example code in new window
Image list: grid standard with caption Go to example code in new window
Image list: grid quilted with caption Go to example code in new window
Image list: masonry Go to example code in new window
Hero whith image Go to example code in new window
Hero small whith image Go to example code in new window
Hero textual Go to example code in new window
Heading lorem ipsum dolor sit amet, consetetur sadipscing.
You are reading this important message. This sample text will be longer so you can see how spacing works within an alert with this type of content.
Hero textual centered Go to example code in new window
Heading lorem ipsum dolor sit amet, consetetur sadipscing.
You are reading this important message. This sample text will be longer so you can see how spacing works within an alert with this type of content.
Hero textual whit image background Go to example code in new window
Heading lorem ipsum dolor sit amet, consetetur sadipscing.
You are reading this important message. This sample text will be longer so you can see how spacing works within an alert with this type of content.
Hero textual whit image background and overlay Go to example code in new window
Heading lorem ipsum dolor sit amet, consetetur sadipscing.
You are reading this important message. This sample text will be longer so you can see how spacing works within an alert with this type of content.
Hero whith image and filter Go to example code in new window
Simple List demo Go to example code in new window
- Text
- Link
- Link active
List with avatar icon Go to example code in new window
Text- Link
Link active
List with icon demo Go to example code in new window
- Text
- Link
- Link active
List with image demo Go to example code in new window
Text- Link
- Link active
List with arrow demo Go to example code in new window
- Text
- Link
- Link active
List with metadata demo Go to example code in new window
- Text
- Link
- Link active