"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[915],{3905:function(t,e,i){i.d(e,{Zo:function(){return m},kt:function(){return u}});var s=i(7294);function a(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}function l(t,e){var i=Object.keys(t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(t);e&&(s=s.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),i.push.apply(i,s)}return i}function n(t){for(var e=1;e<arguments.length;e++){var i=null!=arguments[e]?arguments[e]:{};e%2?l(Object(i),!0).forEach((function(e){a(t,e,i[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(i)):l(Object(i)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(i,e))}))}return t}function c(t,e){if(null==t)return{};var i,s,a=function(t,e){if(null==t)return{};var i,s,a={},l=Object.keys(t);for(s=0;s<l.length;s++)i=l[s],e.indexOf(i)>=0||(a[i]=t[i]);return a}(t,e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);for(s=0;s<l.length;s++)i=l[s],e.indexOf(i)>=0||Object.prototype.propertyIsEnumerable.call(t,i)&&(a[i]=t[i])}return a}var o=s.createContext({}),r=function(t){var e=s.useContext(o),i=e;return t&&(i="function"==typeof t?t(e):n(n({},e),t)),i},m=function(t){var e=r(t.components);return s.createElement(o.Provider,{value:e},t.children)},p={inlineCode:"code",wrapper:function(t){var e=t.children;return s.createElement(s.Fragment,{},e)}},d=s.forwardRef((function(t,e){var i=t.components,a=t.mdxType,l=t.originalType,o=t.parentName,m=c(t,["components","mdxType","originalType","parentName"]),d=r(i),u=a,v=d["".concat(o,".").concat(u)]||d[u]||p[u]||l;return i?s.createElement(v,n(n({ref:e},m),{},{components:i})):s.createElement(v,n({ref:e},m))}));function u(t,e){var i=arguments,a=e&&e.mdxType;if("string"==typeof t||a){var l=i.length,n=new Array(l);n[0]=d;var c={};for(var o in e)hasOwnProperty.call(e,o)&&(c[o]=e[o]);c.originalType=t,c.mdxType="string"==typeof t?t:a,n[1]=c;for(var r=2;r<l;r++)n[r]=i[r];return s.createElement.apply(null,n)}return s.createElement.apply(null,i)}d.displayName="MDXCreateElement"},2695:function(t,e,i){i.d(e,{Z:function(){return c}});var s=i(7462),a=i(3366),l=i(7294),n=["isBad","isGood","children","disableFullscreen","limitWidth"];function c(t){var e=t.isBad,i=t.isGood,c=t.children,o=t.disableFullscreen,r=t.limitWidth,m=(0,a.Z)(t,n),p=(0,l.useState)(!1),d=p[0],u=p[1];return l.createElement("div",{className:"preview-box-wrapper",style:r?{width:r,display:"table",margin:"0 auto"}:{}},!o&&l.createElement("button",{"aria-label":d?"Minimize the example":"Fullscreen the example",className:"preview-box-fullscreen-toggle",onClick:function(t){var e=t.target.closest(".preview-box-wrapper");d?document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.msExitFullscreen&&document.msExitFullscreen():e.requestFullscreen?e.requestFullscreen():e.webkitRequestFullscreen?e.webkitRequestFullscreen():e.msRequestFullscreen&&e.msRequestFullscreen(),u(!d)}},d?l.createElement("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"0 0 24 24"},l.createElement("path",{d:"M19.707 18.293a1 1 0 01-1.414 1.414L16 17.414V18a1 1 0 01-2 0v-3a1 1 0 011-1h3a1 1 0 010 2h-.586zM9 14H6a1 1 0 000 2h.586l-2.293 2.293a1 1 0 001.414 1.414L8 17.414V18a1 1 0 002 0v-3a1 1 0 00-1-1zm0-9a1 1 0 00-1 1v.586L5.707 4.293a1 1 0 00-1.414 1.414L6.586 8H6a1 1 0 000 2h3a1 1 0 001-1V6a1 1 0 00-1-1zm6 5h3a1 1 0 000-2h-.586l2.293-2.293a1 1 0 00-1.414-1.414L16 6.586V6a1 1 0 00-2 0v3a1 1 0 001 1z"})):l.createElement("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"26 26 48 48"},l.createElement("path",{d:"M54.347 57.882A8.96 8.96 0 0150 59a8.96 8.96 0 01-4.347-1.118L40.736 62.8c-.38.38-.257.701.29.701h.98A2.503 2.503 0 0144.5 66c0 1.39-1.122 2.5-2.507 2.5h-7.986a2.505 2.505 0 01-2.507-2.507v-7.986A2.502 2.502 0 0134 55.5a2.49 2.49 0 012.5 2.493v.98c0 .547.314.678.7.29l4.918-4.916A8.96 8.96 0 0141 50a8.96 8.96 0 011.118-4.347L37.2 40.736c-.38-.38-.701-.257-.701.29v.98A2.503 2.503 0 0134 44.5c-1.39 0-2.5-1.122-2.5-2.507v-7.986a2.505 2.505 0 012.507-2.507h7.986A2.502 2.502 0 0144.5 34a2.49 2.49 0 01-2.493 2.5h-.98c-.547 0-.678.314-.29.7l4.916 4.918A8.96 8.96 0 0150 41a8.96 8.96 0 014.347 1.118l4.917-4.917c.38-.38.257-.701-.29-.701h-.98A2.503 2.503 0 0155.5 34c0-1.39 1.122-2.5 2.507-2.5h7.986a2.505 2.505 0 012.507 2.507v7.986A2.502 2.502 0 0166 44.5a2.49 2.49 0 01-2.5-2.493v-.98c0-.547-.314-.678-.7-.29l-4.918 4.916A8.96 8.96 0 0159 50a8.96 8.96 0 01-1.118 4.347l4.917 4.917c.38.38.701.257.701-.29v-.98A2.503 2.503 0 0166 55.5c1.39 0 2.5 1.122 2.5 2.507v7.986a2.505 2.505 0 01-2.507 2.507h-7.986A2.502 2.502 0 0155.5 66a2.49 2.49 0 012.493-2.5h.98c.547 0 .678-.314.29-.7l-4.916-4.918zM50 54a4 4 0 100-8 4 4 0 000 8z"}))),e&&l.createElement("div",{className:"is-bad-example style-red"},l.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"2 2 12 12"},l.createElement("path",{d:"M3.3 12.7c.2.2.4.3.7.3s.5-.1.7-.3L8 9.4l3.3 3.3c.2.2.5.3.7.3s.5-.1.7-.3c.4-.4.4-1 0-1.4L9.4 8l3.3-3.3c.4-.4.4-1 0-1.4s-1-.4-1.4 0L8 6.6 4.7 3.3c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4L6.6 8l-3.3 3.3c-.4.4-.4 1 0 1.4z"}))),i&&l.createElement("div",{className:"is-good-example style-green"},l.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"0 0 18 18"},l.createElement("path",{d:"M5.056 15.04a1.5 1.5 0 002.217-.119l10.17-12.476A1.5 1.5 0 0015.118.55L6.007 11.758l-3.453-3.41a1.5 1.5 0 10-2.109 2.133l4.611 4.56"}))),l.createElement("iframe",(0,s.Z)({width:"100%",className:"docus-preview-box"+(d?" is-fullscreen":""),srcDoc:c},m)))}},6844:function(t,e,i){i.r(e),i.d(e,{frontMatter:function(){return o},contentTitle:function(){return r},metadata:function(){return m},toc:function(){return p},default:function(){return u}});var s=i(7462),a=i(3366),l=(i(7294),i(3905)),n=i(2695),c=["components"],o={title:"Items group"},r=void 0,m={unversionedId:"mockups/items-group",id:"mockups/items-group",isDocsHomePage:!1,title:"Items group",description:"With items group mockup you can show a list of items that can be selected by adding the .active class, items can have title, subtitle, and icon.",source:"@site/docs/mockups/items-group.mdx",sourceDirName:"mockups",slug:"/mockups/items-group",permalink:"/docs/mockups/items-group",editUrl:"https://github.com/amir2mi/flatifycss/tree/master/website/docs/mockups/items-group.mdx",tags:[],version:"current",frontMatter:{title:"Items group"},sidebar:"tutorialSidebar",previous:{title:"Mockups",permalink:"/docs/mockups/intro"},next:{title:"Toast",permalink:"/docs/mockups/toast"}},p=[{value:"Sizes",id:"sizes",children:[],level:2},{value:"Colors",id:"colors",children:[],level:2},{value:"Customization",id:"customization",children:[],level:2}],d={toc:p};function u(t){var e=t.components,i=(0,a.Z)(t,c);return(0,l.kt)("wrapper",(0,s.Z)({},d,i,{components:e,mdxType:"MDXLayout"}),(0,l.kt)("p",null,"With items group mockup you can show a list of items that can be selected by adding the ",(0,l.kt)("inlineCode",{parentName:"p"},".active")," class, items can have title, subtitle, and icon."),(0,l.kt)(n.Z,{height:"300px",children:'<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Items group</title>  </head> <body class="flex-center"> <div class="items-group" style="width: 320px"> <button class="item-button"> <div class="item-icon"> <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 100"> <path d="M0 22.815H10.937V34.223H0z"></path> <path d="M0 66.719H10.937V78.12599999999999H0z"></path> <path d="M21.612 100c5.547-10.815 9.123-18.699 10.727-23.653 2.442-7.5 3.664-16.291 3.664-26.373s-1.413-19.309-4.24-27.682C30.019 17.129 26.583 9.699 21.455 0h6.331c5.374 8.583 8.626 13.876 9.76 15.882 1.134 2.006 2.363 4.771 3.689 8.293 1.674 4.361 2.87 8.669 3.585 12.925s1.072 8.355 1.072 12.297c0 10.327-1.639 19.536-4.919 27.629-2.059 5.198-6.332 12.855-12.82 22.973h-6.541z" ></path> </svg> </div> <div class="item-text"> <p class="item-title">First item</p> <p class="item-subtitle">Lorem ipsum dolor sit amet.</p> </div> </button> <button class="item-button"> <div class="item-icon"> <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <path d="M39.1 77l48.7-48.7c1.5-1.4 1.6-3.8.2-5.3-1.4-1.5-3.8-1.6-5.3-.2l-.2.2-46.1 46.1-19.8-19.9c-1.5-1.4-3.9-1.3-5.3.2-1.3 1.4-1.3 3.7 0 5.1L33.8 77c1.4 1.5 3.8 1.5 5.3 0z" ></path> </svg> </div> <div class="item-text"> <p class="item-title">Second item</p> <p class="item-subtitle">Lorem ipsum dolor sit amet.</p> </div> </button> <button class="item-button active"> <div class="item-icon"> <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"> <path d="M864.5 512.5c0 17.6-1.2 35.2-3.5 52.7.5-3.5 1-7.1 1.4-10.6-4.7 34.3-13.8 67.9-27.3 99.8 1.3-3.2 2.7-6.4 4-9.6-13.2 31.2-30.4 60.5-51.1 87.3l6.3-8.1c-20.4 26.2-44 49.8-70.2 70.2l8.1-6.3c-26.8 20.7-56.1 37.9-87.3 51.1 3.2-1.3 6.4-2.7 9.6-4a397.09 397.09 0 01-99.8 27.3c3.5-.5 7.1-1 10.6-1.4-35 4.6-70.5 4.6-105.5 0 3.5.5 7.1 1 10.6 1.4-34.3-4.7-67.9-13.8-99.8-27.3 3.2 1.3 6.4 2.7 9.6 4-31.2-13.2-60.5-30.4-87.3-51.1l8.1 6.3c-26.2-20.4-49.8-44-70.2-70.2l6.3 8.1c-20.7-26.8-37.9-56.1-51.1-87.3 1.3 3.2 2.7 6.4 4 9.6a397.09 397.09 0 01-27.3-99.8c.5 3.5 1 7.1 1.4 10.6-4.6-35-4.6-70.5 0-105.5-.5 3.5-1 7.1-1.4 10.6 4.7-34.3 13.8-67.9 27.3-99.8-1.3 3.2-2.7 6.4-4 9.6 13.2-31.2 30.4-60.5 51.1-87.3l-6.3 8.1c20.4-26.2 44-49.8 70.2-70.2l-8.1 6.3c26.8-20.7 56.1-37.9 87.3-51.1-3.2 1.3-6.4 2.7-9.6 4 31.9-13.4 65.5-22.6 99.8-27.3-3.5.5-7.1 1-10.6 1.4 35-4.6 70.5-4.6 105.5 0-3.5-.5-7.1-1-10.6-1.4 34.3 4.7 67.9 13.8 99.8 27.3-3.2-1.3-6.4-2.7-9.6-4 31.2 13.2 60.5 30.4 87.3 51.1l-8.1-6.3c26.2 20.4 49.8 44 70.2 70.2l-6.3-8.1c20.7 26.8 37.9 56.1 51.1 87.3-1.3-3.2-2.7-6.4-4-9.6 13.4 31.9 22.6 65.5 27.3 99.8-.5-3.5-1-7.1-1.4-10.6 2.3 17.6 3.5 35.2 3.5 52.8 0 20.9 18.4 41 40 40s40-17.6 40-40c-.2-87.7-27-175.9-78-247.4-13.4-18.8-27.9-36.8-43.9-53.4-15.8-16.3-33-30.8-51-44.6-34.3-26.3-72.6-46.3-113.2-61.2-83.6-30.7-178.2-33.4-263.8-9.1-82.4 23.4-158.6 72.1-213.1 138.3-14.7 17.8-28.4 36.5-40.3 56.3-11.8 19.7-21.4 40.3-30.1 61.5-16.8 41-26.1 84.6-29.5 128.8-6.8 88 15.1 178.6 60.9 254.1 44.2 72.9 110.7 133.5 188.6 168.7 21.2 9.6 42.9 18 65.4 24.3 22.9 6.4 46.4 10.3 70 13.1 44.9 5.2 90.6 2.4 134.9-6.6 84.3-17.1 163.6-61.7 222.9-123.8C884 749 925.6 668.2 938.6 582.7c3.5-23.3 5.9-46.6 5.9-70.2 0-20.9-18.4-41-40-40-21.7 1-40 17.6-40 40z" ></path> <path d="M551.5 704v-76.7-122.2V477c0-20.9-18.4-41-40-40-21.7 1-40 17.6-40 40v227c0 20.9 18.4 41 40 40 21.7-1 40-17.6 40-40zM551.5 346v-27c0-20.9-18.4-41-40-40-21.7 1-40 17.6-40 40v27c0 20.9 18.4 41 40 40 21.7-1 40-17.6 40-40z" ></path> </svg> </div> <div class="item-text"> <p class="item-title">Third item</p> <p class="item-subtitle">Lorem ipsum dolor sit amet.</p> </div> </button> <button class="item-button"> <div class="item-icon"> <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M21.72,18,13.82,4a2.09,2.09,0,0,0-3.64,0L2.28,18a2.08,2.08,0,0,0,1.81,3.11H19.91A2.08,2.08,0,0,0,21.72,18Zm-1.81,1.11H4.09L4,18.94l8-14a.1.1,0,0,1,.08,0h0L20,19h0ZM11,14V11a1,1,0,0,1,2,0v3a1,1,0,0,1-2,0Zm2,3a1,1,0,1,1-1-1A1,1,0,0,1,13,17Z" /> </svg> </div> <div class="item-text"> <p class="item-title">Fourth item</p> <p class="item-subtitle">Lorem ipsum dolor sit amet.</p> </div> </button> </div> </body>\n</html>',mdxType:"PreviewBox"}),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<div class="items-group">\n  <button class="item-button">\n    <div class="item-icon"></div>\n    <div class="item-text">\n      <p class="item-title">First item</p>\n      <p class="item-subtitle">Lorem ipsum dolor sit amet.</p>\n    </div>\n  </button>\n  <button class="item-button">\n    <div class="item-icon"></div>\n    <div class="item-text">\n      <p class="item-title">Second item</p>\n      <p class="item-subtitle">Lorem ipsum dolor sit amet.</p>\n    </div>\n  </button>\n  <button class="item-button active">\n    <div class="item-icon"></div>\n    <div class="item-text">\n      <p class="item-title">Third item</p>\n      <p class="item-subtitle">Lorem ipsum dolor sit amet.</p>\n    </div>\n  </button>\n  <button class="item-button">\n    <div class="item-icon"></div>\n    <div class="item-text">\n      <p class="item-title">Fourth item</p>\n      <p class="item-subtitle">Lorem ipsum dolor sit amet.</p>\n    </div>\n  </button>\n</div>\n')),(0,l.kt)("div",{className:"admonition admonition-info alert alert--info"},(0,l.kt)("div",{parentName:"div",className:"admonition-heading"},(0,l.kt)("h5",{parentName:"div"},(0,l.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,l.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"},(0,l.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"}))),"Usage with dropdown")),(0,l.kt)("div",{parentName:"div",className:"admonition-content"},(0,l.kt)("p",{parentName:"div"},"Check out the example of dropdown with items group mockup, ",(0,l.kt)("a",{parentName:"p",href:"/docs/components/dropdown#items-group-mockup"},"here"),"."))),(0,l.kt)("h2",{id:"sizes"},"Sizes"),(0,l.kt)("p",null,"To change the button size use ",(0,l.kt)("a",{parentName:"p",href:"/docs/helpers/size-setters"},"size setter classes"),".\nThese classes just set a ",(0,l.kt)("inlineCode",{parentName:"p"},"font-size")," property so it is possible to change it yourself by writing custom CSS."),(0,l.kt)(n.Z,{height:"240px",children:'<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Items group</title>  </head> <body class="flex-center"> <div class="items-group size-xs"> <button class="item-button"> <div class="item-icon"> <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 100"> <path d="M0 22.815H10.937V34.223H0z"></path> <path d="M0 66.719H10.937V78.12599999999999H0z"></path> <path d="M21.612 100c5.547-10.815 9.123-18.699 10.727-23.653 2.442-7.5 3.664-16.291 3.664-26.373s-1.413-19.309-4.24-27.682C30.019 17.129 26.583 9.699 21.455 0h6.331c5.374 8.583 8.626 13.876 9.76 15.882 1.134 2.006 2.363 4.771 3.689 8.293 1.674 4.361 2.87 8.669 3.585 12.925s1.072 8.355 1.072 12.297c0 10.327-1.639 19.536-4.919 27.629-2.059 5.198-6.332 12.855-12.82 22.973h-6.541z" ></path> </svg> </div> <div class="item-text"> <p class="item-title">First item</p> <p class="item-subtitle">Lorem ipsum dolor sit amet.</p> </div> </button> <button class="item-button"> <div class="item-icon"> <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <path d="M39.1 77l48.7-48.7c1.5-1.4 1.6-3.8.2-5.3-1.4-1.5-3.8-1.6-5.3-.2l-.2.2-46.1 46.1-19.8-19.9c-1.5-1.4-3.9-1.3-5.3.2-1.3 1.4-1.3 3.7 0 5.1L33.8 77c1.4 1.5 3.8 1.5 5.3 0z" ></path> </svg> </div> <div class="item-text"> <p class="item-title">Second item</p> <p class="item-subtitle">Lorem ipsum dolor sit amet.</p> </div> </button> <button class="item-button active"> <div class="item-icon"> <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"> <path d="M864.5 512.5c0 17.6-1.2 35.2-3.5 52.7.5-3.5 1-7.1 1.4-10.6-4.7 34.3-13.8 67.9-27.3 99.8 1.3-3.2 2.7-6.4 4-9.6-13.2 31.2-30.4 60.5-51.1 87.3l6.3-8.1c-20.4 26.2-44 49.8-70.2 70.2l8.1-6.3c-26.8 20.7-56.1 37.9-87.3 51.1 3.2-1.3 6.4-2.7 9.6-4a397.09 397.09 0 01-99.8 27.3c3.5-.5 7.1-1 10.6-1.4-35 4.6-70.5 4.6-105.5 0 3.5.5 7.1 1 10.6 1.4-34.3-4.7-67.9-13.8-99.8-27.3 3.2 1.3 6.4 2.7 9.6 4-31.2-13.2-60.5-30.4-87.3-51.1l8.1 6.3c-26.2-20.4-49.8-44-70.2-70.2l6.3 8.1c-20.7-26.8-37.9-56.1-51.1-87.3 1.3 3.2 2.7 6.4 4 9.6a397.09 397.09 0 01-27.3-99.8c.5 3.5 1 7.1 1.4 10.6-4.6-35-4.6-70.5 0-105.5-.5 3.5-1 7.1-1.4 10.6 4.7-34.3 13.8-67.9 27.3-99.8-1.3 3.2-2.7 6.4-4 9.6 13.2-31.2 30.4-60.5 51.1-87.3l-6.3 8.1c20.4-26.2 44-49.8 70.2-70.2l-8.1 6.3c26.8-20.7 56.1-37.9 87.3-51.1-3.2 1.3-6.4 2.7-9.6 4 31.9-13.4 65.5-22.6 99.8-27.3-3.5.5-7.1 1-10.6 1.4 35-4.6 70.5-4.6 105.5 0-3.5-.5-7.1-1-10.6-1.4 34.3 4.7 67.9 13.8 99.8 27.3-3.2-1.3-6.4-2.7-9.6-4 31.2 13.2 60.5 30.4 87.3 51.1l-8.1-6.3c26.2 20.4 49.8 44 70.2 70.2l-6.3-8.1c20.7 26.8 37.9 56.1 51.1 87.3-1.3-3.2-2.7-6.4-4-9.6 13.4 31.9 22.6 65.5 27.3 99.8-.5-3.5-1-7.1-1.4-10.6 2.3 17.6 3.5 35.2 3.5 52.8 0 20.9 18.4 41 40 40s40-17.6 40-40c-.2-87.7-27-175.9-78-247.4-13.4-18.8-27.9-36.8-43.9-53.4-15.8-16.3-33-30.8-51-44.6-34.3-26.3-72.6-46.3-113.2-61.2-83.6-30.7-178.2-33.4-263.8-9.1-82.4 23.4-158.6 72.1-213.1 138.3-14.7 17.8-28.4 36.5-40.3 56.3-11.8 19.7-21.4 40.3-30.1 61.5-16.8 41-26.1 84.6-29.5 128.8-6.8 88 15.1 178.6 60.9 254.1 44.2 72.9 110.7 133.5 188.6 168.7 21.2 9.6 42.9 18 65.4 24.3 22.9 6.4 46.4 10.3 70 13.1 44.9 5.2 90.6 2.4 134.9-6.6 84.3-17.1 163.6-61.7 222.9-123.8C884 749 925.6 668.2 938.6 582.7c3.5-23.3 5.9-46.6 5.9-70.2 0-20.9-18.4-41-40-40-21.7 1-40 17.6-40 40z" ></path> <path d="M551.5 704v-76.7-122.2V477c0-20.9-18.4-41-40-40-21.7 1-40 17.6-40 40v227c0 20.9 18.4 41 40 40 21.7-1 40-17.6 40-40zM551.5 346v-27c0-20.9-18.4-41-40-40-21.7 1-40 17.6-40 40v27c0 20.9 18.4 41 40 40 21.7-1 40-17.6 40-40z" ></path> </svg> </div> <div class="item-text"> <p class="item-title">Third item</p> <p class="item-subtitle">Lorem ipsum dolor sit amet.</p> </div> </button> <button class="item-button"> <div class="item-icon"> <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M21.72,18,13.82,4a2.09,2.09,0,0,0-3.64,0L2.28,18a2.08,2.08,0,0,0,1.81,3.11H19.91A2.08,2.08,0,0,0,21.72,18Zm-1.81,1.11H4.09L4,18.94l8-14a.1.1,0,0,1,.08,0h0L20,19h0ZM11,14V11a1,1,0,0,1,2,0v3a1,1,0,0,1-2,0Zm2,3a1,1,0,1,1-1-1A1,1,0,0,1,13,17Z" /> </svg> </div> <div class="item-text"> <p class="item-title">Fourth item</p> <p class="item-subtitle">Lorem ipsum dolor sit amet.</p> </div> </button> </div> </body>\n</html>',mdxType:"PreviewBox"}),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<div class="items-group size-xs">...</div>\n')),(0,l.kt)("h2",{id:"colors"},"Colors"),(0,l.kt)("p",null,"There are helper classes for styling elements, first read about ",(0,l.kt)("a",{parentName:"p",href:"/docs/helpers/color-setters"},"color setter classes"),", you can add classes to the wrapper element or each item separately."),(0,l.kt)(n.Z,{height:"640px",children:'<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Items group</title>  </head> <body> <div class="items-group style-dark"> <button class="item-button"> <div class="item-icon"> <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 100"> <path d="M0 22.815H10.937V34.223H0z"></path> <path d="M0 66.719H10.937V78.12599999999999H0z"></path> <path d="M21.612 100c5.547-10.815 9.123-18.699 10.727-23.653 2.442-7.5 3.664-16.291 3.664-26.373s-1.413-19.309-4.24-27.682C30.019 17.129 26.583 9.699 21.455 0h6.331c5.374 8.583 8.626 13.876 9.76 15.882 1.134 2.006 2.363 4.771 3.689 8.293 1.674 4.361 2.87 8.669 3.585 12.925s1.072 8.355 1.072 12.297c0 10.327-1.639 19.536-4.919 27.629-2.059 5.198-6.332 12.855-12.82 22.973h-6.541z" ></path> </svg> </div> <div class="item-text"> <p class="item-title">First item</p> <p class="item-subtitle">Lorem ipsum dolor sit amet.</p> </div> </button> <button class="item-button"> <div class="item-icon"> <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <path d="M39.1 77l48.7-48.7c1.5-1.4 1.6-3.8.2-5.3-1.4-1.5-3.8-1.6-5.3-.2l-.2.2-46.1 46.1-19.8-19.9c-1.5-1.4-3.9-1.3-5.3.2-1.3 1.4-1.3 3.7 0 5.1L33.8 77c1.4 1.5 3.8 1.5 5.3 0z" ></path> </svg> </div> <div class="item-text"> <p class="item-title">Second item</p> <p class="item-subtitle">Lorem ipsum dolor sit amet.</p> </div> </button> <button class="item-button active"> <div class="item-icon"> <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"> <path d="M864.5 512.5c0 17.6-1.2 35.2-3.5 52.7.5-3.5 1-7.1 1.4-10.6-4.7 34.3-13.8 67.9-27.3 99.8 1.3-3.2 2.7-6.4 4-9.6-13.2 31.2-30.4 60.5-51.1 87.3l6.3-8.1c-20.4 26.2-44 49.8-70.2 70.2l8.1-6.3c-26.8 20.7-56.1 37.9-87.3 51.1 3.2-1.3 6.4-2.7 9.6-4a397.09 397.09 0 01-99.8 27.3c3.5-.5 7.1-1 10.6-1.4-35 4.6-70.5 4.6-105.5 0 3.5.5 7.1 1 10.6 1.4-34.3-4.7-67.9-13.8-99.8-27.3 3.2 1.3 6.4 2.7 9.6 4-31.2-13.2-60.5-30.4-87.3-51.1l8.1 6.3c-26.2-20.4-49.8-44-70.2-70.2l6.3 8.1c-20.7-26.8-37.9-56.1-51.1-87.3 1.3 3.2 2.7 6.4 4 9.6a397.09 397.09 0 01-27.3-99.8c.5 3.5 1 7.1 1.4 10.6-4.6-35-4.6-70.5 0-105.5-.5 3.5-1 7.1-1.4 10.6 4.7-34.3 13.8-67.9 27.3-99.8-1.3 3.2-2.7 6.4-4 9.6 13.2-31.2 30.4-60.5 51.1-87.3l-6.3 8.1c20.4-26.2 44-49.8 70.2-70.2l-8.1 6.3c26.8-20.7 56.1-37.9 87.3-51.1-3.2 1.3-6.4 2.7-9.6 4 31.9-13.4 65.5-22.6 99.8-27.3-3.5.5-7.1 1-10.6 1.4 35-4.6 70.5-4.6 105.5 0-3.5-.5-7.1-1-10.6-1.4 34.3 4.7 67.9 13.8 99.8 27.3-3.2-1.3-6.4-2.7-9.6-4 31.2 13.2 60.5 30.4 87.3 51.1l-8.1-6.3c26.2 20.4 49.8 44 70.2 70.2l-6.3-8.1c20.7 26.8 37.9 56.1 51.1 87.3-1.3-3.2-2.7-6.4-4-9.6 13.4 31.9 22.6 65.5 27.3 99.8-.5-3.5-1-7.1-1.4-10.6 2.3 17.6 3.5 35.2 3.5 52.8 0 20.9 18.4 41 40 40s40-17.6 40-40c-.2-87.7-27-175.9-78-247.4-13.4-18.8-27.9-36.8-43.9-53.4-15.8-16.3-33-30.8-51-44.6-34.3-26.3-72.6-46.3-113.2-61.2-83.6-30.7-178.2-33.4-263.8-9.1-82.4 23.4-158.6 72.1-213.1 138.3-14.7 17.8-28.4 36.5-40.3 56.3-11.8 19.7-21.4 40.3-30.1 61.5-16.8 41-26.1 84.6-29.5 128.8-6.8 88 15.1 178.6 60.9 254.1 44.2 72.9 110.7 133.5 188.6 168.7 21.2 9.6 42.9 18 65.4 24.3 22.9 6.4 46.4 10.3 70 13.1 44.9 5.2 90.6 2.4 134.9-6.6 84.3-17.1 163.6-61.7 222.9-123.8C884 749 925.6 668.2 938.6 582.7c3.5-23.3 5.9-46.6 5.9-70.2 0-20.9-18.4-41-40-40-21.7 1-40 17.6-40 40z" ></path> <path d="M551.5 704v-76.7-122.2V477c0-20.9-18.4-41-40-40-21.7 1-40 17.6-40 40v227c0 20.9 18.4 41 40 40 21.7-1 40-17.6 40-40zM551.5 346v-27c0-20.9-18.4-41-40-40-21.7 1-40 17.6-40 40v27c0 20.9 18.4 41 40 40 21.7-1 40-17.6 40-40z" ></path> </svg> </div> <div class="item-text"> <p class="item-title">Third item</p> <p class="item-subtitle">Lorem ipsum dolor sit amet.</p> </div> </button> <button class="item-button"> <div class="item-icon"> <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M21.72,18,13.82,4a2.09,2.09,0,0,0-3.64,0L2.28,18a2.08,2.08,0,0,0,1.81,3.11H19.91A2.08,2.08,0,0,0,21.72,18Zm-1.81,1.11H4.09L4,18.94l8-14a.1.1,0,0,1,.08,0h0L20,19h0ZM11,14V11a1,1,0,0,1,2,0v3a1,1,0,0,1-2,0Zm2,3a1,1,0,1,1-1-1A1,1,0,0,1,13,17Z" /> </svg> </div> <div class="item-text"> <p class="item-title">Fourth item</p> <p class="item-subtitle">Lorem ipsum dolor sit amet.</p> </div> </button> </div> <br> <br> <div class="items-group"> <button class="item-button style-pink"> <div class="item-icon"> <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 100"> <path d="M0 22.815H10.937V34.223H0z"></path> <path d="M0 66.719H10.937V78.12599999999999H0z"></path> <path d="M21.612 100c5.547-10.815 9.123-18.699 10.727-23.653 2.442-7.5 3.664-16.291 3.664-26.373s-1.413-19.309-4.24-27.682C30.019 17.129 26.583 9.699 21.455 0h6.331c5.374 8.583 8.626 13.876 9.76 15.882 1.134 2.006 2.363 4.771 3.689 8.293 1.674 4.361 2.87 8.669 3.585 12.925s1.072 8.355 1.072 12.297c0 10.327-1.639 19.536-4.919 27.629-2.059 5.198-6.332 12.855-12.82 22.973h-6.541z" ></path> </svg> </div> <div class="item-text"> <p class="item-title">First item</p> <p class="item-subtitle">Lorem ipsum dolor sit amet.</p> </div> </button> <button class="item-button style-purple"> <div class="item-icon"> <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <path d="M39.1 77l48.7-48.7c1.5-1.4 1.6-3.8.2-5.3-1.4-1.5-3.8-1.6-5.3-.2l-.2.2-46.1 46.1-19.8-19.9c-1.5-1.4-3.9-1.3-5.3.2-1.3 1.4-1.3 3.7 0 5.1L33.8 77c1.4 1.5 3.8 1.5 5.3 0z" ></path> </svg> </div> <div class="item-text"> <p class="item-title">Second item</p> <p class="item-subtitle">Lorem ipsum dolor sit amet.</p> </div> </button> <button class="item-button style-green"> <div class="item-icon"> <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"> <path d="M864.5 512.5c0 17.6-1.2 35.2-3.5 52.7.5-3.5 1-7.1 1.4-10.6-4.7 34.3-13.8 67.9-27.3 99.8 1.3-3.2 2.7-6.4 4-9.6-13.2 31.2-30.4 60.5-51.1 87.3l6.3-8.1c-20.4 26.2-44 49.8-70.2 70.2l8.1-6.3c-26.8 20.7-56.1 37.9-87.3 51.1 3.2-1.3 6.4-2.7 9.6-4a397.09 397.09 0 01-99.8 27.3c3.5-.5 7.1-1 10.6-1.4-35 4.6-70.5 4.6-105.5 0 3.5.5 7.1 1 10.6 1.4-34.3-4.7-67.9-13.8-99.8-27.3 3.2 1.3 6.4 2.7 9.6 4-31.2-13.2-60.5-30.4-87.3-51.1l8.1 6.3c-26.2-20.4-49.8-44-70.2-70.2l6.3 8.1c-20.7-26.8-37.9-56.1-51.1-87.3 1.3 3.2 2.7 6.4 4 9.6a397.09 397.09 0 01-27.3-99.8c.5 3.5 1 7.1 1.4 10.6-4.6-35-4.6-70.5 0-105.5-.5 3.5-1 7.1-1.4 10.6 4.7-34.3 13.8-67.9 27.3-99.8-1.3 3.2-2.7 6.4-4 9.6 13.2-31.2 30.4-60.5 51.1-87.3l-6.3 8.1c20.4-26.2 44-49.8 70.2-70.2l-8.1 6.3c26.8-20.7 56.1-37.9 87.3-51.1-3.2 1.3-6.4 2.7-9.6 4 31.9-13.4 65.5-22.6 99.8-27.3-3.5.5-7.1 1-10.6 1.4 35-4.6 70.5-4.6 105.5 0-3.5-.5-7.1-1-10.6-1.4 34.3 4.7 67.9 13.8 99.8 27.3-3.2-1.3-6.4-2.7-9.6-4 31.2 13.2 60.5 30.4 87.3 51.1l-8.1-6.3c26.2 20.4 49.8 44 70.2 70.2l-6.3-8.1c20.7 26.8 37.9 56.1 51.1 87.3-1.3-3.2-2.7-6.4-4-9.6 13.4 31.9 22.6 65.5 27.3 99.8-.5-3.5-1-7.1-1.4-10.6 2.3 17.6 3.5 35.2 3.5 52.8 0 20.9 18.4 41 40 40s40-17.6 40-40c-.2-87.7-27-175.9-78-247.4-13.4-18.8-27.9-36.8-43.9-53.4-15.8-16.3-33-30.8-51-44.6-34.3-26.3-72.6-46.3-113.2-61.2-83.6-30.7-178.2-33.4-263.8-9.1-82.4 23.4-158.6 72.1-213.1 138.3-14.7 17.8-28.4 36.5-40.3 56.3-11.8 19.7-21.4 40.3-30.1 61.5-16.8 41-26.1 84.6-29.5 128.8-6.8 88 15.1 178.6 60.9 254.1 44.2 72.9 110.7 133.5 188.6 168.7 21.2 9.6 42.9 18 65.4 24.3 22.9 6.4 46.4 10.3 70 13.1 44.9 5.2 90.6 2.4 134.9-6.6 84.3-17.1 163.6-61.7 222.9-123.8C884 749 925.6 668.2 938.6 582.7c3.5-23.3 5.9-46.6 5.9-70.2 0-20.9-18.4-41-40-40-21.7 1-40 17.6-40 40z" ></path> <path d="M551.5 704v-76.7-122.2V477c0-20.9-18.4-41-40-40-21.7 1-40 17.6-40 40v227c0 20.9 18.4 41 40 40 21.7-1 40-17.6 40-40zM551.5 346v-27c0-20.9-18.4-41-40-40-21.7 1-40 17.6-40 40v27c0 20.9 18.4 41 40 40 21.7-1 40-17.6 40-40z" ></path> </svg> </div> <div class="item-text"> <p class="item-title">Third item</p> <p class="item-subtitle">Lorem ipsum dolor sit amet.</p> </div> </button> <button class="item-button style-orange"> <div class="item-icon"> <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M21.72,18,13.82,4a2.09,2.09,0,0,0-3.64,0L2.28,18a2.08,2.08,0,0,0,1.81,3.11H19.91A2.08,2.08,0,0,0,21.72,18Zm-1.81,1.11H4.09L4,18.94l8-14a.1.1,0,0,1,.08,0h0L20,19h0ZM11,14V11a1,1,0,0,1,2,0v3a1,1,0,0,1-2,0Zm2,3a1,1,0,1,1-1-1A1,1,0,0,1,13,17Z" /> </svg> </div> <div class="item-text"> <p class="item-title">Fourth item</p> <p class="item-subtitle">Lorem ipsum dolor sit amet.</p> </div> </button> </div> </body>\n</html>',mdxType:"PreviewBox"}),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'\x3c!-- First example: Styling the wrapper --\x3e\n<div class="items-group style-dark">...</div>\n\n\x3c!-- Second example: Styling each item --\x3e\n<div class="items-group">\n  <button class="item-button style-pink">...</button>\n  <button class="item-button style-purple">...</button>\n  <button class="item-button style-green">...</button>\n  <button class="item-button style-orange">...</button>\n</div>\n')),(0,l.kt)("h2",{id:"customization"},"Customization"),(0,l.kt)("p",null,"Use CSS variables for customization, they can be set as ",(0,l.kt)("inlineCode",{parentName:"p"},":root")," for all buttons default style or just for a specific selector."),(0,l.kt)("p",null,(0,l.kt)("inlineCode",{parentName:"p"},"--flatify__item-group-bg-color"),(0,l.kt)("br",{parentName:"p"}),"\n",(0,l.kt)("inlineCode",{parentName:"p"},"--flatify__item-group-txt-color")))}u.isMDXComponent=!0}}]);