Typography

HTML

H1 - Lorem ipsum.

H2 - Beatae, sequi!

H3 - Dolorum, incidunt.

H4 - Ea, id!

H5 - Beatae, similique!

H6 - Blanditiis, ex!

CSS CLASSES

H1 - Lorem ipsum.

H2 - Beatae, sequi!

H3 - Dolorum, incidunt.

H4 - Ea, id!

H5 - Beatae, similique!

H6 - Blanditiis, ex!

Body

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea error placeat repudiandae! A at commodi delectus eligendi, excepturi fugiat minima porro sed sunt voluptatem! Beatae delectus eligendi hic, impedit labore minus nemo nostrum nulla pariatur porro quia rem similique tenetur velit veniam! Accusamus aliquam aspernatur atque dolore doloremque earum enim eum excepturi illum, odit officiis qui quibusdam quo sed soluta veritatis vitae, voluptatem. Culpa enim fugit libero quaerat! Ad aspernatur assumenda at aut, blanditiis, cum delectus deleniti distinctio excepturi facere, libero molestiae nesciunt odio pariatur quae quas quis rerum sunt tenetur totam! Accusamus consequuntur debitis deleniti deserunt dolorum eius minus natus ut? Ab aliquid autem commodi consequatur dignissimos eaque eligendi enim eum eveniet facere fuga illum inventore ipsa ipsam labore libero modi odit, optio perspiciatis porro quidem ratione sequi sint? Libero molestiae, nesciunt omnis tempora voluptatem voluptates!

Body sm (.font-sm)

Display Text 1 (.display-1)

Thank You

Display Text 2 (.display-2)

Il tuo acquisto è andato a buon fine

Icons

help

gift-registry

present

account

arrow-up-thin

arrow-right-thin

arrow-left-thin

arrow-down-thin

wishlist-full

wishlist-empty

warning

update

trash

star

settings

pointer-down

location

list

info

grid

comment-reflected

collapse

checkmark

cart

calendar

arrow-up

arrow-down

remove

pointer-up

pointer-right

pointer-left

flag

expand

envelope

compare-full

compare-empty

comment

down

edit

lock

support_agent

eye

eye-off

facebook

google

card

clock

filter

order-by

phone

return

fast-shipping

undo

Links

Base

Link Primary

Link Small

Messages

Buttons

Primary Buttons

Enabled CTA

Disabled CTA

Enabled CTA S

Disabled CTA S

Enabled CTA XS

Disabled CTA XS

Secondary Buttons

Enabled CTA

Disabled CTA

Enabled CTA S

Disabled CTA S

Alt Buttons

Enabled CTA XL

Disabled CTA XL

Enabled CTA XL

Disabled CTA XL

Social Buttons

CTA Facebook

CTA Social

Text Fields

Modals

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci dolor libero officiis tenetur velit. Aliquid cum dicta dignissimos eius fugiat, itaque magnam numquam repudiandae. Aliquam eius nihil obcaecati reprehenderit voluptatibus.

Accusamus aspernatur assumenda culpa eos ex, explicabo illum laboriosam maxime nisi officiis pariatur quidem quis suscipit temporibus velit, vitae voluptatibus. Animi blanditiis consectetur dicta itaque optio rem sed! Eligendi, nemo?

Accusantium adipisci atque cum cumque cupiditate doloremque earum ex explicabo fugiat, nulla, officiis quae reprehenderit sit. Aperiam asperiores, beatae dignissimos dolores ipsam molestiae pariatur praesentium reiciendis sit tempora temporibus totam.

Ad adipisci aliquam amet blanditiis commodi debitis delectus earum eveniet excepturi facilis harum hic id incidunt minima nam natus officiis praesentium quia rem sequi similique ullam unde, veniam voluptas voluptatem?

Slider

Full width

Emmet code

.full-width-container.flex-row.d-flex.flex-nowrap.overflow-hidden[data-mage-init={ "dnaCarousel": { "outerWrapperClass":"overflow-visible", "middleWrapperClass":"full-width-container", "items": 1, "responsive": false, "nav":true, "controls":true }}]>img[src="https://via.placeholder.com/1456x300?text=Slide+$$"].col-12.px-0*3

Boxed

Emmet code

flex-row.d-flex.flex-nowrap.overflow-hidden[data-mage-init={ "dnaCarousel": { "items": 1, "responsive": false, "nav":true, "controls":true }}]>img[src="https://via.placeholder.com/1456x300?text=Slide+$$"].col-12.px-0*3

Carousels

Base Carousel

Le classi "col-*" definiscono il layout del carosello prima ancora che il js venga caricato ed inizializzato. Evita il layout shift e per questo è molto importante una buona definizione, congrua con la configurazione del carosello.

Slide 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, et.

Slide 2: Deleniti deserunt eius enim harum, ipsam possimus tempora voluptas voluptate.

Slide 3: Enim modi pariatur temporibus. Accusantium dicta magnam nihil provident sapiente.

Slide 4: Corporis dolor iste nam numquam quaerat ratione vel voluptates? In?

Slide 5: Ad aliquam autem corporis cupiditate dignissimos esse ex nemo sequi.

Slide 6: Accusantium ad asperiores cum debitis error laborum praesentium similique tempore.

Slide 7: Amet explicabo facilis incidunt laboriosam omnis quae quaerat saepe vero.

Slide 8: Dolores facilis, id ipsam iste laudantium perferendis repudiandae suscipit. Possimus.

Emmet code

.row.d-block>.flex-row.d-flex.flex-nowrap.overflow-hidden[data-mage-init={ "dnaCarousel": { "innerWrapperClass":"w-100", "items": 2, "dots":true, "controls":false, "responsive": { "sm":{ "items":3, "dots":false, "controls":true }, "md":{ "items":4 }, "lg":{ "items":6 } } }}]>(.col-6.col-sm-4.col-md-3.col-lg-2>.text-white.bg-secondary.px-4.py-5>{Slide $: }+lorem10)*8

Same Height Carousel

La classe "flex-fill", se coadiuvata da un parent "d-flex" o "d-inline-flex", permette di unificare l'altezza di tutti gli elementi del carosello, in base al contenuto più alto.

Slide 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, suscipit!

Slide 2: Accusantium alias animi architecto culpa delectus, ea incidunt quia suscipit!

Slide 3: Ex fuga molestiae molestias odio officia quasi quis sapiente voluptatum. A impedit in inventore, modi quae quisquam soluta tempora ut?

Slide 4: Asperiores autem deleniti iste maiores, mollitia necessitatibus nihil nulla vitae?

Slide 5: Ad culpa dolorum incidunt maiores nihil nostrum pariatur perspiciatis quae.

Slide 6: A autem cupiditate, id nesciunt pariatur recusandae. Consequuntur, earum tenetur!

Slide 7: Dicta distinctio ex facere fugiat hic, incidunt nobis quisquam unde.

Slide 8: A impedit in inventore, modi quae quisquam soluta tempora ut?

Emmet code

.row.d-block>.flex-row.d-flex.flex-nowrap.overflow-hidden[data-mage-init={ "dnaCarousel": { "innerWrapperClass":"w-100", , "items": 2, "dots":true, "controls":false, "responsive": { "sm":{ "items":3, "dots":false, "controls":true }, "md":{ "items":4 }, "lg":{ "items":6 } } }}]>(.col-6.col-sm-4.col-md-3.col-lg-2.d-inline-flex>.text-white.bg-primary.px-4.py-5.flex-fill>{Slide $: }+lorem10)*8

Full Width/Breakout Carousel

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Emmet code

.row.d-block>.flex-row.d-flex.flex-nowrap.overflow-hidden[data-mage-init={ "dnaCarousel": { "middleWrapperClass":"full-width-container overflow-hidden", "innerWrapperClass":"mx-auto container-fixed-lg", "items": 2, "dots":true, "controls":false, "responsive": { "sm":{ "items":3, "dots":false, "controls":true }, "md":{ "items":4 }, "lg":{ "items":6 } } }}]>(.col-6.col-sm-4.col-md-3.col-lg-2.d-inline-flex>.text-white.bg-dark.px-4.py-5.flex-fill>{Slide $})*8

Full Width/Breakout Carousel 2

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Emmet code

.row.d-block>.flex-row.d-flex.flex-nowrap.overflow-hidden[data-mage-init={ "dnaCarousel": { "middleWrapperClass":"full-width-container overflow-hidden", "innerWrapperClass":"mx-auto container-fixed-lg", "items": 2, "dots":true, "controls":false, "responsive": { "sm":{ "items":3, "dots":false, "controls":true }, "md":{ "items":4 }, "lg":{ "items":6 } } }}]>(.col-6.col-sm-4.col-md-3.d-inline-flex>.text-white.bg-dark.px-4.py-5.flex-fill>{Slide $})*8

Cards carousel

Lorem.

Lorem ipsum dolor sit amet.

click

Id.

Est harum obcaecati pariatur veritatis!

click

In.

Laborum odit quasi quia voluptates.

click

Est?

Ad dignissimos eaque in nisi.

click

Aliquam.

Cumque nostrum odio sit vitae?

click

Ut!

Autem nam ratione temporibus veniam.

click

Beatae maxime ratione sed vel.

click

Perspiciatis.

Debitis enim impedit magni maiores.

click

Emmet code

.row.d-block>.flex-row.d-flex.flex-nowrap.overflow-hidden[data-mage-init={ "dnaCarousel": { "middleWrapperClass":"full-width-container overflow-hidden", "innerWrapperClass":"mx-auto container-fixed-lg", "responsive":{ "xs":{"items":2}, "sm":{"items":3, "nav":false,"controls":true}, "md":{"items":6 } } }}]>(.col-6.col-sm-4.col-md-2.d-inline-flex>.card.flex-fill>(img.card-img-top[src=https://via.placeholder.com/250])+(.card-body>(lorem1.h3.card-title+(p.card-text>lorem5)))+.card-footer.bg-white.border-0>a.btn.btn-primary[href=#]>{click})*8