Pattern library

NoteNotice

Install UI Patterns Settings to see more settings when using Patterns.

The accordion uses collapse internally to make it collapsible. https://italia.github.io/bootstrap-italia/docs/componenti/accordion/

CampoEtichettaTipoDescrizione
accordion_titleTitle (field, no link)textAccordion title. Without link.
accordion_contentContent (fields)textAccordion content.

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…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…

https://italia.github.io/bootstrap-italia/docs/componenti/alert/

CampoEtichettaTipoDescrizione
headingHeading (raw text)textOptional. Raw text.
messageMessage (field)textAlert content.
VarianteNomeDescrizione
PrimaryprimaryType Primary
VarianteNomeDescrizione
InfoinfoType info
VarianteNomeDescrizione
SuccesssuccessType success
VarianteNomeDescrizione
WarningwarningType waring
VarianteNomeDescrizione
Dangerdangerdanger

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/

CampoEtichettaTipoDescrizione
avatar_imageImage (field)textImage from drupal field. Square format. Only image variant.
avatar_textName (raw text)textAvatar text. Eg. Username. Raw text. Only text variant.
avatar_urlLink (eg. /user/id, raw text).textEnter a url in raw text format.
avatar_tooltip_textTooltip text (field)textTooltip text.
avatar_presencePresence (raw text)textAvatar status. Raw text. ["active", "busy", "hidden"]
avatar_presence_textPresence text (raw text)textCustomize assistive text. Raw text.
avatar_statusStatus type (raw text)textAvatar status. Raw text. ["approved", "declined", "notify"]
avatar_status_textStatus text (raw text)textCustomize assistive text. Raw text.
avatar_extra_titleExtra title (field)textAvatar Extra text. Eg. User Name.
avatar_extra_textExtra text (field)textAvatar Extra text. Eg. Role.
VarianteNomeDescrizione
Iconiconhttps://italia.github.io/bootstrap-italia/docs/componenti/avatar/#avatar-con-icona
Francesca Rossi

Francesca Rossi

Administrator
VarianteNomeDescrizione
Imageimagehttps://italia.github.io/bootstrap-italia/docs/componenti/avatar/#avatar-con-immagine
Francesca Rossi picture

Francesca Rossi

Administrator
VarianteNomeDescrizione
Texttexthttps://italia.github.io/bootstrap-italia/docs/componenti/avatar/#avatar-con-testo
Francesca Rossi

Francesca Rossi

Administrator

Buttons to be used as needed. It includes options for color. https://italia.github.io/bootstrap-italia/docs/componenti/buttons/

CampoEtichettaTipoDescrizione
button_textButton texttextButton text.
button_hrefButton linktextButton link for link variant.
VarianteNomeDescrizione
InputinputButton with tag <input>
VarianteNomeDescrizione
BottonebuttonButton with tag <button>

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/

CampoEtichettaTipoDescrizione
titleTitle (raw text)textCallout title. Raw text.
contentContent (field)textCallout content. Wrap your content with <p> tag.
callout_typeType (raw text)textCallout type: "success", "warning", "danger", "important", "note", "default". Raw text.
more_contentMore content (field, only more variant)textCallout more content. Wrap your content with <p> tag.
more_call_to_action_urlCall to action link (eg. /node/id, raw text).textEnter a url in raw text format. Only more variant.
more_call_to_action_labelCall to action label (raw text).textEnter a string in raw text format. Only more variant.
more_call_to_action_iconCall to action icon (it-name, raw text).textEnter the icon name format in raw text. Only more variant.
custom_iconCustom icon (raw text)textChoose a custom icon. Icon name format in Raw text. Leave blank for automatic icon.
VarianteNomeDescrizione
DefaultdefaultBasic callout. https://italia.github.io/bootstrap-italia/docs/componenti/callout/
InformazioniLorem ipsum

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.

VarianteNomeDescrizione
HighlighthighlightCallout with border only on the left side. https://italia.github.io/bootstrap-italia/docs/componenti/callout/#callout-highlights
InformazioniLorem ipsum

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.

VarianteNomeDescrizione
Moremorehttps://italia.github.io/bootstrap-italia/docs/componenti/callout/#callout-approfondimento
NoteLorem ipsum

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.

Download

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.

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

CampoEtichettaTipoDescrizione
card_titleTitle (field)textCard title.
card_subtitleSubtitle (field)textCard subtitle.
card_textText (eg. body, raw text)textCard content.
card_categoryCategory, tag or link (field)textLink of the category, tag or taxonomy term to associate.
card_dateDate (field)textSubmitting date. Format: Bootstrap Italia Medium Format (dd month yyyy)
card_iconIcon (eg. it-name, raw text)texthttps://italia.github.io/bootstrap-italia/docs/utilities/icone/
card_signatureAuthor name (field)textThe author of the content or signature.
card_read_more_urlLink (eg. /node/id, raw text).textEnter a url in raw text format.
card_imageImage (field)textEnter a image field.
VarianteNomeDescrizione
Article (category and date are mandatory)articlehttps://italia.github.io/bootstrap-italia/docs/componenti/card/#card-grande-con-tag-data-e-call-to-action
Category09 October 2022

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
VarianteNomeDescrizione
Flag (category and icon are mandatory)flaghttps://italia.github.io/bootstrap-italia/docs/componenti/card/#esempio-2
Category

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
VarianteNomeDescrizione
Icon (icon are mandatory)iconhttps://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

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
VarianteNomeDescrizione
Image (image are mandatory)imagehttps://italia.github.io/bootstrap-italia/docs/componenti/card/#card-con-immagine
Card big image description
202209October

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Use this card in carousel slide. https://italia.github.io/bootstrap-italia/docs/componenti/carousel/#card-con-immagine-in-evidenza

CampoEtichettaTipoDescrizione
card_titleTitle (field)textCard title.
card_textText (eg. body, raw text)textCard content.
card_categoryCategory, tag or link (field)textLink of the category, tag or taxonomy term to associate.
card_dateDate (field)textSubmitting date. Format: Bootstrap Italia Medium Format (dd month yyyy)
card_signatureAuthor name (field)textThe author of the content or signature.
card_read_more_urlLink (eg. /node/id, raw text).textEnter a url in raw text format.
card_imageImage (field)textEnter a image field.
content_paddingCard content paddingselect

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

CampoEtichettaTipoDescrizione
card_titleTitle (field)textCard title.
card_subtitleSubtitle (field)textCard subtitle.
card_textText (eg. body, raw text)textCard content.
card_categoryCategory, tag or link (field)textLink of the category, tag or taxonomy term to associate.
card_dateDate (field)textSubmitting date. Format: Bootstrap Italia Medium Format (dd month yyyy)
card_iconIcon (eg. it-name, raw text)texthttps://italia.github.io/bootstrap-italia/docs/utilities/icone/
card_signatureAuthor name (field)textThe author of the content or signature.
card_read_more_urlLink (eg. /node/id, raw text).textEnter a url in raw text format.
card_imageImage (field)textEnter a image field.
VarianteNomeDescrizione
Defaultdefaulthttps://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

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Leggi tuttoa proposito di Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
VarianteNomeDescrizione
Article (tags and date are mandatory)articleIn this variant card_category and card_date field are mandatory. https://italia.github.io/bootstrap-italia/docs/componenti/card/#card-articolo-semplice
Category09 October 2022

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
da Federico De PaolisLeggi tuttoa proposito di Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
VarianteNomeDescrizione
Icon (category and icon are mandatory)iconIn 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
Category

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
da Federico De PaolisLeggi tuttoa proposito di Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
VarianteNomeDescrizione
Image (image field are mandatory)imagehttps://italia.github.io/bootstrap-italia/docs/componenti/card/#card-con-immagine
Card simple image description
202209October
Category

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
da Federico De PaolisLeggi tuttoa proposito di Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…

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

CampoEtichettaTipoDescrizione
card_titleTitle (raw text)textEnter the title in text format and without links.
card_dateDate (dd/mm/yy)textFormat: dd/mm/yyyy
card_imageImage (field)textMandatory and without links.
card_target_urlTarget Url (raw text)textEnter url in raw text format (eg. /node/id).

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

CampoEtichettaTipoDescrizione
card_titleTitle (field)textEnter the title field.
card_textText (eg. body, raw text)textCard content in raw text
card_iconIcon (eg. it-name, raw text)textOnly icon variant. https://italia.github.io/bootstrap-italia/docs/utilities/icone/
VarianteNomeDescrizione
DefaultdefaultDefault variant title and body

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
VarianteNomeDescrizione
Icon (icon are mandatory)iconIn this variant card_icon field are mandatory, use the settings to provide a default value.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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/

CampoEtichettaTipoDescrizione
imageImage (field)textImage from drupal field.
image_descriptionDescription (raw text)textImage description. Raw text.
icon_nameIcon (raw text)textIcon noma in it-name format. Raw text.
call_to_action_urlCall to action link (eg. /node/id, raw text).textEnter a url in raw text format.
VarianteNomeDescrizione
Standardstandardhttps://italia.github.io/bootstrap-italia/docs/organizzare-i-contenuti/liste-di-immagini/#standard

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/

CampoEtichettaTipoDescrizione
imageImage (field)textImage from drupal field.
hero_kickerKicker (field)textHero Kicker. Field.
hero_titleTitle (field)textHero title. Field.
hero_textContent text (field)textHero content with <p> wrapper. Field.
hero_cta_urlCall to action link (eg. /node/id, raw text).textEnter a url in raw text format.
VarianteNomeDescrizione
Defaultdefaulthttps://italia.github.io/bootstrap-italia/docs/componenti/hero/
Category

Heading lorem ipsum dolor sit amet, consetetur sadipscing.

Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.

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/

CampoEtichettaTipoDescrizione
list_urlLink (eg. /node/id, raw text).textEnter a url in raw text format.
list_textList text (raw text)textList text in raw format.
list_iconIcon (eg. it-name, raw text)texthttps://italia.github.io/bootstrap-italia/docs/utilities/icone/
list_imageImage (field)textImage from drupal field. Only avatar and image variant.
list_metadataMetadata (field)texthttps://italia.github.io/bootstrap-italia/docs/organizzare-i-contenuti/liste/#con-metadata
VarianteNomeDescrizione
Simplesimplehttps://italia.github.io/bootstrap-italia/docs/organizzare-i-contenuti/liste/#lista-semplice-solo-testo
VarianteNomeDescrizione
Avataravatarhttps://italia.github.io/bootstrap-italia/docs/organizzare-i-contenuti/liste/#lista-con-avatar
VarianteNomeDescrizione
Iconiconhttps://italia.github.io/bootstrap-italia/docs/organizzare-i-contenuti/liste/#lista-con-icona
VarianteNomeDescrizione
Imageimagehttps://italia.github.io/bootstrap-italia/docs/organizzare-i-contenuti/liste/#lista-con-immagine

https://italia.github.io/bootstrap-italia/docs/componenti/modale/

CampoEtichettaTipoDescrizione
modal_titleTitle (raw text).textEnter a title in raw text.
modal_bodyBody (field).textEnter a body. Wrap text in <p> tag
modal_footerFooter (field).textEnter a footer.
modal_iconIcon (eg. it-name, raw text)texthttps://italia.github.io/bootstrap-italia/docs/utilities/icone/
modal_labelButton label (raw text)textCustomize button label
VarianteNomeDescrizione
Defaultdefaulthttps://italia.github.io/bootstrap-italia/docs/componenti/modale/

https://italia.github.io/bootstrap-italia/

CampoEtichettaTipoDescrizione
dateDate (raw text)textUsually is the day, 1...31. Raw text
monthMonth (raw text)textThe month. Raw text
contentContent (raw text)textThe content.
VarianteNomeDescrizione
PrimaryprimaryType Primary
09
Oct

12:34 - Lorem ipsum dolor sit amet.

10
Oct

12:34 - Lorem ipsum dolor sit amet.

11
Oct

12:34 - Lorem ipsum dolor sit amet.

VarianteNomeDescrizione
SecondarysecondaryType Primary
09
Oct

12:34 - Lorem ipsum dolor sit amet.

10
Oct

12:34 - Lorem ipsum dolor sit amet.

11
Oct

12:34 - Lorem ipsum dolor sit amet.

VarianteNomeDescrizione
InfoinfoType info
09
Oct

12:34 - Lorem ipsum dolor sit amet.

10
Oct

12:34 - Lorem ipsum dolor sit amet.

11
Oct

12:34 - Lorem ipsum dolor sit amet.

VarianteNomeDescrizione
SuccesssuccessType success
09
Oct

12:34 - Lorem ipsum dolor sit amet.

10
Oct

12:34 - Lorem ipsum dolor sit amet.

11
Oct

12:34 - Lorem ipsum dolor sit amet.

VarianteNomeDescrizione
WarningwarningType waring
09
Oct

12:34 - Lorem ipsum dolor sit amet.

10
Oct

12:34 - Lorem ipsum dolor sit amet.

11
Oct

12:34 - Lorem ipsum dolor sit amet.

VarianteNomeDescrizione
Dangerdangerdanger
09
Oct

12:34 - Lorem ipsum dolor sit amet.

10
Oct

12:34 - Lorem ipsum dolor sit amet.

11
Oct

12:34 - Lorem ipsum dolor sit amet.

VarianteNomeDescrizione
Dangerdarkdanger
09
Oct

12:34 - Lorem ipsum dolor sit amet.

10
Oct

12:34 - Lorem ipsum dolor sit amet.

11
Oct

12:34 - Lorem ipsum dolor sit amet.

Elenco componenti

Accordion Go to example code in new window

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Alert demo Go to example code in new window

Avatar size Go to example code in new window

Giovanna Ferrero picture xs
Giovanna Ferrero picture sm
Giovanna Ferrero picture md
Giovanna Ferrero picture lg
Giovanna Ferrero picture xl
Giovanna Ferrero picture xxl

Avatar with text Go to example code in new window

User
User
User
User
User
User

Avatar with icon Go to example code in new window

User
User
User
User
User
User

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

Giovanna Ferrero active
User active
Giovanna Ferrero busy
User busy
Giovanna Ferrero hidden

Avatar status Go to example code in new window

Giovanna Ferrero approved
User approved
Giovanna Ferrero declined
User declined
Giovanna Ferrero notify
New notification

Badge with title Go to example code in new window

Example title h1 Nuovo

Example title h2 Nuovo

Example title h3 Nuovo

Example title h4 Nuovo

Example title h5 Nuovo
Example title h6 Nuovo

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

Link

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

Riuscitosuccess

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.

Avvisowarning

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.

Pericolodanger

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.

Importanteimportant

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.

Notenote

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.

Informazionidefault

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

Riuscitosuccess

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.

Avvisowarning

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.

Pericolodanger

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.

Importanteimportant

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.

Notenote

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.

Informazionidefault

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

NoteMore note

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.

PDF Scarica

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 incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Card simple article Go to example code in new window

Categoria10/12/2024

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
da Federico De PaolisLeggi tuttoa proposito di Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…

Card with icon Go to example code in new window

Categoria

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
(2) File

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…

Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Linka proposito di 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…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Leggi tuttoa proposito di Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…

Card shadow with image Go to example code in new window

Card shadow with image description
20249October

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Leggi tuttoa proposito di 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

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Card big 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 incididunt ut labore et dolore magna aliqua.

Card big 2 Go to example code in new window

Categoria

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Card big 2, flag invisible and not border bottom Go to example code in new window

Categoria

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Card big with tag, date and call to action Go to example code in new window

Categoria10/12/2024

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Card big with tag, image, date and call to action Go to example code in new window

Card big image description
20249October
Categoria10/12/2024

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Card big with tag, image, date without shadow Go to example code in new window

Card big image description 2
20249October
Categoria10/12/2024

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Chips standard and big Go to example code in new window

Solo testo

Etichetta

Chiudibile

Etichetta

Chiudibile con icona

Etichetta

Chiudibile con avatar

Giovanna Ferrero chip picture
label

Solo testo

Etichetta

Chiudibile

Etichetta

Chiudibile con icona

Etichetta

Chiudibile con avatar

Giovanna Ferrero
label

Chip color Go to example code in new window

Etichetta
Etichetta
Etichetta
Etichetta
Etichetta

Chip disabled Go to example code in new window

Etichetta
Etichetta
Etichetta
Etichetta
Etichetta

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 description gallery A
Image description gallery B
Image description gallery B
Image description gallery C
Image description gallery C

Image list: grid standard Go to example code in new window

Image description gallery 1
Image description gallery 2
Image description gallery 3
Image description gallery 4
Image description gallery 5
Image description gallery 6

Image list: grid standard with caption Go to example code in new window

Image description gallery 1
Image description gallery 1
Image description gallery 2
Image description gallery 2
Image description gallery 3
Image description gallery 3
Image description gallery 4
Image description gallery 4
Image description gallery 5
Image description gallery 5
Image description gallery 6
Image description gallery 6

Image list: grid quilted with caption Go to example code in new window

Image description gallery 7
Image description gallery 7
Image description gallery 8
Image description gallery 8
Image description gallery 9
Image description gallery 9
Image description gallery 10
Image description gallery 10

Image list: masonry Go to example code in new window

Image description gallery 11
Image description gallery 11
Image description gallery 12
Image description gallery 12
Image description gallery 13
Image description gallery 13
Image description gallery 14
Image description gallery 14
Image description gallery 15
Image description gallery 15
Image description gallery 16
Image description gallery 16
Image description gallery 17
Image description gallery 17
Image description gallery 18
Image description gallery 18
Image description gallery 19
Image description gallery 19
Image description gallery 20
Image description gallery 20
Image description gallery 21
Image description gallery 21
Image description gallery 22
Image description gallery 22

Hero whith image Go to example code in new window

Image description

Hero small whith image Go to example code in new window

Image description

Hero textual Go to example code in new window

Categoria

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

Categoria

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

Image description
Categoria

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

Image description
Categoria

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

Image description

Simple List demo Go to example code in new window

List with avatar icon Go to example code in new window

List with icon demo Go to example code in new window

List with image demo Go to example code in new window

List with arrow demo Go to example code in new window

List with metadata demo Go to example code in new window

Modal demo Go to example code in new window

Modal demo icon Go to example code in new window

Modal demo link-list centered Go to example code in new window

Modal popconfirm centered Go to example code in new window

Modal demo long text Go to example code in new window

Modal demo long text fullscreen Go to example code in new window

Modal demo long text fullscreen 2 Go to example code in new window

Overlay Go to example code in new window

Overlay image description
Image label

Overlay fullheight Go to example code in new window

Overlay full height image description
Image label

Overlay large image Go to example code in new window

Overlay large image description
Image label

Overlay dark Go to example code in new window

Overlay black image description
Image label

Overlay fullheight dark Go to example code in new window

Overlay panel image description
Image label

Overlay large image dark Go to example code in new window

Overlay black large image description
Image label

Overlay icon primary Go to example code in new window

Overlay icon image description
Image label

Overlay icon primary black Go to example code in new window

Overlay black icon image description
Image label

Timeline Go to example code in new window

May 2022
Categoria10/12/2022

Lorem ipsum dolor sit amet, consectetur adipiscing elit…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
da Federico De PaolisLeggi tuttoa proposito di Lorem ipsum dolor sit amet, consectetur adipiscing elit…
June 2022

Lorem ipsum dolor sit amet, consectetur adipiscing elit…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
July 2022

Lorem ipsum dolor sit amet, consectetur adipiscing elit…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Oggi
August 2022
Categoria10/12/2022

Lorem ipsum dolor sit amet, consectetur adipiscing elit…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
da Federico De PaolisLeggi tuttoa proposito di Lorem ipsum dolor sit amet, consectetur adipiscing elit…
September 2022

Lorem ipsum dolor sit amet, consectetur adipiscing elit…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Octobre 2022

Lorem ipsum dolor sit amet, consectetur adipiscing elit…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
November 2022

Lorem ipsum dolor sit amet, consectetur adipiscing elit…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
December 2022
Categoria10/12/2022

Lorem ipsum dolor sit amet, consectetur adipiscing elit…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
da Federico De PaolisLeggi tuttoa proposito di Lorem ipsum dolor sit amet, consectetur adipiscing elit…

Timeline - Point List Go to example code in new window

09
Oct

Lorem ipsum

10
Oct

Lorem ipsum

11
Oct

Lorem ipsum

12
Oct

Lorem ipsum

13
Oct

Lorem ipsum

14
Oct

Lorem ipsum

Icons list Go to example code in new window

it-arrow-down
it-arrow-down-circle
it-arrow-down-triangle
it-arrow-left
it-arrow-left-circle
it-arrow-left-triangle
it-arrow-right
it-arrow-right-circle
it-arrow-right-triangle
it-arrow-up
it-arrow-up-circle
it-arrow-up-triangle
it-ban
it-bookmark
it-box
it-burger
it-calendar
it-camera
it-card
it-chart-line
it-check
it-check-circle
it-chevron-left
it-chevron-right
it-clip
it-clock
it-close
it-close-big
it-close-circle
it-code-circle
it-collapse
it-comment
it-copy
it-delete
it-download
it-error
it-exchange-circle
it-expand
it-external-link
it-flag
it-folder
it-fullscreen
it-funnel
it-hearing
it-help
it-help-circle
it-horn
it-inbox
it-info-circle
it-key
it-link
it-list
it-locked
it-logout
it-mail
it-mail-open
it-map-marker
it-map-marker-circle
it-map-marker-minus
it-map-marker-plus
it-maximize
it-maximize-alt
it-minimize
it-minus
it-minus-circle
it-more-actions
it-more-items
it-note
it-open-source
it-pa
it-password-invisible
it-password-visible
it-pencil
it-piattaforme
it-pin
it-plug
it-plus
it-plus-circle
it-presentation
it-print
it-refresh
it-restore
it-rss
it-rss-square
it-search
it-settings
it-share
it-software
it-star-full
it-star-outline
it-telephone
it-tool
it-unlocked
it-upload
it-user
it-video
it-warning
it-warning-circle
it-wifi
it-zoom-in
it-zoom-out

Platforms icons Go to example code in new window

it-android
it-android-square
it-apple
it-apple-square
it-behance
it-facebook
it-facebook-square
it-figma
it-figma-square
it-flickr
it-flickr-square
it-github
it-instagram
it-linkedin
it-linkedin-square
it-medium
it-medium-square
it-mastodon
it-mastodon-square
it-moodle
it-moodle-square
it-pinterest
it-pinterest-square
it-quora
it-quora-square
it-reddit
it-reddit-square
it-slack
it-slack-square
it-snapchat
it-snapchat-square
it-stackexchange
it-stackexchange-square
it-stackoverflow
it-stackoverflow-square
it-telegram
it-threads
it-threads-square
it-tiktok
it-tiktok-square
it-twitter
it-twitter-square
it-vimeo
it-vimeo-square
it-whatsapp
it-whatsapp-square
it-youtube
it-google

Extra icons Go to example code in new window

it-designers-italia
it-team-digitale

File icons Go to example code in new window

it-file
it-files
it-file-audio
it-file-compressed
it-file-csv
it-file-json
it-file-odp
it-file-ods
it-file-odt
it-file-pdf
it-file-pdf-ext
it-file-ppt
it-file-sheet
it-file-slides
it-file-txt
it-file-video
it-file-xml