Buttons
Button types
Success btn
Danger btn
Warning btn
Button sizes
Extra small (xs) btn – color: primarySmall (sm) btn – color: secondaryLarge (lg) btn – color: primaryExtra large (xl) btn- color: accent
Button flags
Block btnDisabled btn
Fixed btn
Outlined btn
Plain btn
Rounded btn
Text btn
Tile btn
Other button props
Elevation
elevation 1
elevation 4
elevation 10
elevation 20
elevation 24
Link & target
Go to Google!
Rows & Columns
Example: Mobile and desktop
md="1"
md="1"
md="1"
md="1"
md="1"
md="1"
md="1"
md="1"
md="1"
md="1"
md="1"
md="1"
Example: Mobile, tablet, desktop
xs="12" sm="6" md="8"
xs="6" md="4"
xs="6" sm="4"
xs="6" sm="4"
xs="6" sm="4"
Offsetting columns
md="4"
md="4" offset_md="4"
md="3" offset_md="3"
md="3" offset_md="3"
Align options
Applies the align-items css property. Available options are start, center, end, baseline and stretch.
Note: generic and all breakpoints all also available! align, align_sm, align_md, align_lg, align_xl
align=”start”
Flex item
Flex item
Flex item
align=”center”
Flex item
Flex item
Flex item
align=”end”
Flex item
Flex item
Flex item
align=”baseline”
Flex item
Flex item
Flex item
align=”stretch”
Flex item
Flex item
Flex item
Align content options
Applies the align-content css property. Available options are start, center, end, space-between, space-around and stretch.
Note: generic and all breakpoints all also available! align_content, align_content_sm, align_content_md, align_content_lg, align_content_xl
align_content=”start”
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
align_content=”center”
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
align_content=”end”
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
align_content=”space-between”
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
align_content=”space-around”
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
align_content=”stretch”
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Justify content options
Applies the justify-content css property. Available options are start, center, end, space-between and space-around.
Note: generic and all breakpoints all also available! justify, justify_sm, justify_md, justify_lg, justify_xl
justify=”start”
Flex item
Flex item
Flex item
justify=”center”
Flex item
Flex item
Flex item
justify=”end”
Flex item
Flex item
Flex item
justify=”space-between”
Flex item
Flex item
Flex item
justify=”space-around”
Flex item
Flex item
Flex item
Alerts
I’m an alert with a top border and red color
I’m an alert with a right border and blue-grey color
I’m an alert with a bottom border and pink color
I’m an alert with a left border and indigo color
Aliquam eu nunc. Fusce commodo aliquam arcu. In consectetuer turpis ut velit. Nulla facilisi..
Morbi mollis tellus ac sapien. Fusce vel dui. Praesent ut ligula non mi varius sagittis. Vivamus consectetuer hendrerit lacus. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi.
Vestibulum ullamcorper mauris at ligula. Nam pretium turpis et arcu. Ut varius tincidunt libero. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Morbi nec metus.
Sed in libero ut nibh placerat accumsan. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis.
Fusce commodo aliquam arcu. Pellentesque posuere. Phasellus tempus. Donec posuere vulputate arcu.
I’m a dense alert with a type of info
I’m a dense alert with the text prop and a type of success
I’m a dense alert with the border prop and a type of warning
I’m a dense alert with the outlined prop and a type of error
Aenean imperdiet. Quisque id odio. Cras dapibus. Pellentesque ut neque. Cras dapibus.
Vivamus consectetuer hendrerit lacus. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Curabitur blandit mollis lacus. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.
Collapsibles
Collapsibles with no flags
Panel 1
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
Panel 2
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Panel 3
Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt.
Collapsibles with flags=”accordion”
Panel 1
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
Panel 2
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Panel 3
Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt.
Collapsibles with flags=”flat”
Panel 1
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
Panel 2
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Panel 3
Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt.
Collapsibles with flags=”focusable”
Panel 1
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
Panel 2
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Panel 3
Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt.
Collapsibles with flags=”hover”
Panel 1
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
Panel 2
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Panel 3
Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt.
Collapsibles with flags=”inset”
Panel 1
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
Panel 2
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Panel 3
Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt.
Collapsibles with flags=”popout”
Panel 1
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
Panel 2
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Panel 3
Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt.
Collapsibles with flags=”tile”
Panel 1
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
Panel 2
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Panel 3
Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt.
Collapsibles with flags=”accordion flat tile hover inset”
Panel 1
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
Panel 2
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Panel 3
Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt.
Tooltips
Top tooltip
Top position! Color primary. Lorem ipsum dolor sit amet
Right tooltip
Right position! Color secondary. Lorem ipsum dolor sit amet
Bottom tooltip
Bottom position! Color accent Lorem ipsum dolor sit amet
Left tooltip
left position! Color pink. Lorem ipsum dolor sit amet
Cards
Caffè Digi
⭐️⭐️⭐️⭐️⭐️ $ • Bar, Caffè
Piccoli piatti, insalate e panini: un ambiente intimo con 12 posti a sedere al coperto più posti a sedere nel patio.
Orari e disponibilità
17:30 – 22:00PM
Prenotare
Lists
Single-line item
Two-line item
Secondary text
Three-line item
Secondary line text Lorem ipsum dolor sit amet,
consectetur adipiscing elit.