Bootstrap italia
Bootstrap Italia
Tema: v2.x-dev / Liberia: v2.12.1 / Drupal 11
Follow us on
Cerca

Pattern library

Notice

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/

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…

Alert 2 View Alert 2

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

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/

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

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

Administrator

Button 2 View Button 2

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
LinklinkButton with tag <a>
Go to...
VarianteNomeDescrizione
InputinputButton with tag <input>
VarianteNomeDescrizione
BottonebuttonButton 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/

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/
Lorem 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
Lorem 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
Lorem 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.

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

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.
da Federico De PaolisLeggi tutto
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.
da Federico De PaolisLeggi tutto
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.
da Federico De PaolisLeggi tutto
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.
da Federico De PaolisLeggi tutto

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

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

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

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 tutto
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 tutto
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 tutto
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 tutto

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

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).
Card special image description
09/10/2022

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

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

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.

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/

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
Gallery image description
Lorem ipsum dolor sit amet
Gallery image description
Lorem ipsum dolor sit amet
Gallery image description
Lorem ipsum dolor sit amet
Gallery image description
Lorem ipsum dolor sit amet
Gallery image description
Lorem ipsum dolor sit amet
Gallery image description
Lorem ipsum dolor sit amet

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/

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.

Read More

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/

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

Modal 2 View Modal 2

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/

Point list 2 View Point list 2

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

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

Avatar size

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

Avatar with icon

Avatar link

Giovanna Ferrero

Avatar link with tooltip

Francesca Rossi

Avatar presence

Giovanna Ferrero active
Giovanna Ferrero busy
Giovanna Ferrero hidden

Avatar status

Giovanna Ferrero approved
Giovanna Ferrero declined
Giovanna Ferrero notify

Badge with title

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

Badge contestual variants

primary   secondary   success   danger   warning   white   dark   light   black  

primary   secondary   success   danger   warning   white   dark   light   black  

primary   secondary   success   danger   warning   white   dark   light   black  

primary   secondary   success   danger   warning   white   dark   light   black  

Button base

Link

Button variants

Button outline variants

Button disabled

Button outline disabled

Button with dark background

Button outline with dark background

Button disabled with dark background

Button outline disabled with dark background

Button with icon

Button with rounded icon

Button various size

Button full width

Button full width responsive md

Callout

success

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.

warning

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.

danger

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.

important

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.

note

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.

default

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

success

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.

warning

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.

danger

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.

important

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.

note

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.

default

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

More 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.

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.

it-Card: minimal

Lorem ipsum dolor sit amet

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.

it-Card: base

Lorem ipsum dolor sit amet

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

it-Card: publishing card

Lorem ipsum dolor sit amet

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

it-Card: publishing featured card

Lorem ipsum dolor sit amet

da Maria Verde

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

it-Card: inline

it-Card: inline mini

it-Card: events

Lorem ipsum dolor sit amet

From 4 to 6 November

da Maria Verde

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

it-Card: inline events

Lorem ipsum dolor sit amet

From 4 to 6 November

da Maria Verde

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

it-Card: for media

it-Card: media inline

it-Card: for info and services

Lorem ipsum dolor sit amet

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

  • Attivato
Expire:

it-Card: for documents and attachments

Card simple (deprecated)

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 (deprecated)

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 tutto

Card with icon (deprecated)

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.
Link

Card shadow (deprecated)

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 tutto

Card shadow with image (deprecated)

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 tutto

Card special (deprecated)

Card special image description
10/12/2024

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

Card teaser (deprecated)

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 (deprecated)

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 tutto

Card big 2 (deprecated)

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.
Leggi tutto

Card big 2, flag invisible and not border bottom (deprecated)

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.
Leggi tutto

Card big with tag, date and call to action (deprecated)

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 tutto

Card big with tag, image, date and call to action (deprecated)

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.
da Federico De PaolisLeggi tutto

Card big with tag, image, date without shadow (deprecated)

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.
da Federico De PaolisLeggi tutto

Chips standard and big

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

Etichetta
Etichetta
Etichetta
Etichetta
Etichetta

Chip disabled

Etichetta
Etichetta
Etichetta
Etichetta
Etichetta

Chip Link

Etichetta Etichetta Etichetta Etichetta Etichetta

Dropdown variant

Dropdown link

Dropdown direction

Dropdown dark variant

Dropdown with icon

Image list

Image description gallery A
Image description gallery B
Image description gallery B
Image description gallery C
Image description gallery C

Image list: grid standard

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

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

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

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

Image description

Hero small whith image

Image description

Hero textual

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.

Label CTA

Hero textual centered

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.

Label CTA

Hero textual whit image background

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.

Label CTA

Hero textual whit image background and overlay

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.

Label CTA

Hero whith image and filter

Image description

Simple List demo

List with avatar icon

List with icon demo

List with image demo

List with arrow demo

List with metadata demo

List with text, action and metadata

Modal demo

Modal demo icon

Modal demo link-list centered

Modal popconfirm centered

Modal demo long text

Modal demo long text fullscreen

Modal demo long text fullscreen 2

Overlay

Overlay image description
Image label

Overlay fullheight

Overlay full height image description
Image label

Overlay large image

Overlay large image description
Image label

Overlay dark

Overlay black image description
Image label

Overlay fullheight dark

Overlay panel image description
Image label

Overlay large image dark

Overlay black large image description
Image label

Overlay icon primary

Overlay icon image description

Overlay icon primary black

Overlay black icon image description

Timeline

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 tutto

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 tutto

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 tutto

Timeline - Point List

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

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-car
it-card
it-cart
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-sign
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

it-android
it-android-square
it-apple
it-apple-square
it-behance
it-bluesky
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-spotify
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

it-designers-italia
it-team-digitale

File icons

it-file
it-files
it-file-audio
it-file-compressed
it-file-csv
it-file-docx
it-file-image
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-signed
it-file-slides
it-file-txt
it-file-video
it-file-xlsx
it-file-xml