https://www.merchbar.com/_next/static/chunks/pages/component-examples/utilities-7173ce5e9cea5ac7.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5132],{86326:function(i,e,s){(window.__NEXT_P=window.__NEXT_P||[]).push(["/component-examples/utilities",function(){return s(59386)}])},97815:function(i,e,s){"use strict";var n=s(85893);s(67294);var t=s(62255),a=s(53457),r=s(47738),d=s(59417),l=s(67814);let o=i=>{let{children:e,...s}=i,t=e.toLowerCase().replace(/\s/g,"-").replace(/[^-a-z0-9]/g,"");return(0,n.jsxs)(a.Z,{as:"h4",id:t,...s,children:[e,(0,n.jsx)(r.Z,{className:"ms-1",value:"#".concat(t),children:(0,n.jsx)("a",{title:"Click to Copy Link",children:(0,n.jsx)(l.G,{icon:d.Alc})})})]})},c=i=>{let{children:e,...s}=i;return(0,n.jsx)(t.Z,{className:"mb-3",...s,children:e})};e.Z=Object.assign(c,{Header:o,Body:t.Z.Body})},71275:function(i,e,s){"use strict";var n=s(85893),t=s(10682),a=s(66338),r=s(26739);let{actions:{setBreadcrumbs:d}}=r.Z,l=i=>{let{title:e,breadcrumbs:s=[],children:r}=i,l=[{name:"Component Examples",route:"/component-examples"},...s],o=(0,a.I0)();return o(d(l)),(0,n.jsxs)(t.Z,{className:"my-4 container",children:[(0,n.jsx)("h1",{className:"mb-3",children:e}),r]})};e.Z=l},47738:function(i,e,s){"use strict";var n=s(85893),t=s(67294),a=s(78875),r=s(22336),d=s.n(r),l=s(94184),o=s.n(l);let c=i=>{let{children:e,value:s,className:r=""}=i,[l,c]=(0,t.useState)(!1),m=(0,t.useRef)(null),f=s;(0,t.useEffect)(()=>{if(s.startsWith("#")){let i=window.location;f=i.protocol+"//"+i.host+i.pathname+s}},[]);let g=()=>{c(!0),setTimeout(()=>{c(!1)},1500)},h=()=>{},p=i=>{i.preventDefault(),navigator.clipboard.writeText(f).then(g,h)},v=t.cloneElement(e,{className:o()(d().target,r),onClick:p,ref:m});return(0,n.jsxs)(n.Fragment,{children:[v,(0,n.jsx)(a.Z,{target:m.current,show:l,placement:"top",children:(0,n.jsx)("div",{className:o()(d().overlay,"bs-v4-legacy-overlay-font"),children:"Copied!"})})]})};e.Z=c},59386:function(i,e,s){"use strict";s.r(e);var n=s(85893);s(67294);var t=s(71275),a=s(97815),r=s(17266),d=s.n(r);let l=()=>(0,n.jsxs)(t.Z,{title:"Utilities",breadcrumbs:[{name:"Utilities",route:"/component-examples/utilities"}],children:[(0,n.jsxs)(a.Z,{children:[(0,n.jsx)(a.Z.Header,{children:"Font Sizes with Bootstrap Utilities"}),(0,n.jsxs)(a.Z.Body,{children:[(0,n.jsxs)("h6",{children:[(0,n.jsx)("a",{href:"https://getbootstrap.com/docs/5.1/utilities/text/#font-size",target:"_blank",rel:"noreferrer",children:"Bootstrap font-size styles"}),"."]}),(0,n.jsx)("pre",{children:(0,n.jsx)("code",{children:'\n<div className="fs-1">Font Size 1 (2.5rem)</div>\n<div className="fs-2">Font Size 2 (2.0rem)</div>\n<div className="fs-3">Font Size 3 (1.75rem)</div>\n<div className="fs-4">Font Size 4 (1.5rem)</div>\n<div className="fs-5">Font Size 5 (1.25rem)</div>\n<div className="fs-6">Font Size 6 (1rem)</div>\n<div className="fs-7">Font Size 7 (0.875rem - does not exist in Bootstrap)</div>\n<div className="fs-8">Font Size 8 (0.75 rem - does not exist in Bootstrap)</div>\n              '})}),(0,n.jsxs)("div",{children:[(0,n.jsx)("div",{className:"fs-1",children:"Font Size 1 (2.5rem)"}),(0,n.jsx)("div",{className:"fs-2",children:"Font Size 2 (2.0rem)"}),(0,n.jsx)("div",{className:"fs-3",children:"Font Size 3 (1.75rem)"}),(0,n.jsx)("div",{className:"fs-4",children:"Font Size 4 (1.5rem)"}),(0,n.jsx)("div",{className:"fs-5",children:"Font Size 5 (1.25rem)"}),(0,n.jsx)("div",{className:"fs-6",children:"Font Size 6 (1rem)"}),(0,n.jsx)("div",{className:"fs-7",children:"Font Size 7 (0.875rem - does not exist in Bootstrap)"}),(0,n.jsx)("div",{className:"fs-8",children:"Font Size 8 (0.75 rem - does not exist in Bootstrap)"})]})]})]}),(0,n.jsxs)(a.Z,{children:[(0,n.jsx)(a.Z.Header,{children:"Font Sizes with sass:list"}),(0,n.jsxs)(a.Z.Body,{children:[(0,n.jsxs)("h6",{children:[(0,n.jsx)("a",{href:"https://getbootstrap.com/docs/5.1/utilities/text/#font-size",target:"_blank",rel:"noreferrer",children:"Bootstrap font-size styles"})," which can be applied within *.module files."]}),(0,n.jsx)("pre",{children:(0,n.jsx)("code",{children:"\n@use \"sass:list\";\n@import '../../styles/variables';\n\n.fontSize1 { font-size: list.nth($font-size, 1); }\n.fontSize2 { font-size: list.nth($font-size, 2); }\n.fontSize3 { font-size: list.nth($font-size, 3); }\n.fontSize4 { font-size: list.nth($font-size, 4); }\n.fontSize5 { font-size: list.nth($font-size, 5); }\n.fontSize6 { font-size: list.nth($font-size, 6); }\n\n<div className={css.fontSize1}>Font Size 1 (2.5rem)</div>\n<div className={css.fontSize2}>Font Size 2 (2.0rem)</div>\n<div className={css.fontSize3}>Font Size 3 (1.75rem)</div>\n<div className={css.fontSize4}>Font Size 4 (1.5rem)</div>\n<div className={css.fontSize5}>Font Size 5 (1.25rem)</div>\n<div className={css.fontSize6}>Font Size 6 (1rem)</div>\n<div className={css.fontSize7}>Font Size 7 (0.875rem - does not exist in Bootstrap)</div>\n<div className={css.fontSize8}>Font Size 8 (0.75rem - does not exist in Bootstrap)</div>\n              "})}),(0,n.jsxs)("div",{children:[(0,n.jsx)("div",{className:d().fontSize1,children:"Font Size 1 (2.5rem)"}),(0,n.jsx)("div",{className:d().fontSize2,children:"Font Size 2 (2.0rem)"}),(0,n.jsx)("div",{className:d().fontSize3,children:"Font Size 3 (1.75rem)"}),(0,n.jsx)("div",{className:d().fontSize4,children:"Font Size 4 (1.5rem)"}),(0,n.jsx)("div",{className:d().fontSize5,children:"Font Size 5 (1.25rem)"}),(0,n.jsx)("div",{className:d().fontSize6,children:"Font Size 6 (1rem)"}),(0,n.jsx)("div",{className:d().fontSize7,children:"Font Size 7 (0.875rem - does not exist in Bootstrap)"}),(0,n.jsx)("div",{className:d().fontSize8,children:"Font Size 8 (0.75rem - does not exist in Bootstrap)"})]})]})]}),(0,n.jsxs)(a.Z,{children:[(0,n.jsx)(a.Z.Header,{children:"Font Family"}),(0,n.jsxs)(a.Z.Body,{children:[(0,n.jsx)("h6",{children:"Font Families"}),(0,n.jsx)("pre",{children:(0,n.jsx)("code",{children:"\n@use \"sass:list\";\n@import '../../styles/variables';\n\n.fontFamilySans { font-family: $sans-font; }\n.fontFamilySansBig { font-family: $sans-big-font; }\n.fontFamilySerif { font-family: $serif-font; }\n.fontFamilySerifBig { font-family: $serif-big-font; }\n              "})}),(0,n.jsx)("div",{className:d().fontFamilySans,children:"Font Family Sans"}),(0,n.jsx)("div",{className:d().fontFamilySansBig,children:"Font Family Sans Big"}),(0,n.jsx)("div",{className:d().fontFamilySerif,children:"Font Family Serif"}),(0,n.jsx)("div",{className:d().fontFamilySerifBig,children:"Font Family Serif Big"})]})]}),(0,n.jsxs)(a.Z,{children:[(0,n.jsx)(a.Z.Header,{children:"Margins"}),(0,n.jsxs)(a.Z.Body,{children:[(0,n.jsxs)("h6",{children:[(0,n.jsx)("a",{href:"https://getbootstrap.com/docs/5.1/utilities/spacing/#margin-and-padding",target:"_blank",rel:"noreferrer",children:"Bootstrap margin styles"})," which can be applied within *.module files."]}),(0,n.jsx)("pre",{children:(0,n.jsx)("code",{children:"\n@use \"sass:list\";\n@import '../../styles/variables';\n\n.margin1 { margin: list.nth($margin, 1); }\n.margin2 { margin: list.nth($margin, 2); }\n.margin3 { margin: list.nth($margin, 3); }\n.margin4 { margin: list.nth($margin, 4); }\n.margin5 { margin: list.nth($margin, 5); }\n\n<div className={css.margin1}>Margin 1 (0.25rem)</div>\n<div className={css.margin2}>Margin 2 (0.5rem)</div>\n<div className={css.margin3}>Margin 3 (1.0rem)</div>\n<div className={css.margin4}>Margin 4 (1.5rem)</div>\n<div className={css.margin5}>Margin 5 (3.0rem)</div>\n              "})}),(0,n.jsxs)("div",{children:[(0,n.jsx)("div",{className:d().margin1,children:"Margin 1 (0.25rem)"}),(0,n.jsx)("div",{className:d().margin2,children:"Margin 2 (0.5rem)"}),(0,n.jsx)("div",{className:d().margin3,children:"Margin 3 (1.0rem)"}),(0,n.jsx)("div",{className:d().margin4,children:"Margin 4 (1.5rem)"}),(0,n.jsx)("div",{className:d().margin5,children:"Margin 5 (3.0rem)"})]})]})]}),(0,n.jsxs)(a.Z,{children:[(0,n.jsx)(a.Z.Header,{children:"Padding"}),(0,n.jsxs)(a.Z.Body,{children:[(0,n.jsxs)("h6",{children:[(0,n.jsx)("a",{href:"https://getbootstrap.com/docs/5.1/utilities/spacing/#margin-and-padding",target:"_blank",rel:"noreferrer",children:"Bootstrap padding styles"})," which can be applied within *.module files."]}),(0,n.jsx)("pre",{children:(0,n.jsx)("code",{children:"\n@use \"sass:list\";\n@import '../../styles/variables';\n\n.padding1 { padding: list.nth($padding, 1); }\n.padding2 { padding: list.nth($padding, 2); }\n.padding3 { padding: list.nth($padding, 3); }\n.padding4 { padding: list.nth($padding, 4); }\n.padding5 { padding: list.nth($padding, 5); }\n\n<div className={css.padding1}>Padding 1</div>\n<div className={css.padding2}>Padding 2</div>\n<div className={css.padding3}>

1Padding 3</div>\n<div className={css.padding4}>Padding 4</div>\n<div className={css.padding5}>Padding 5</div>\n              "})}),(0,n.jsxs)("div",{children:[(0,n.jsx)("div",{className:d().padding1,children:"Padding 1 (0.25rem)"}),(0,n.jsx)("div",{className:d().padding2,children:"Padding 2 (0.5rem)"}),(0,n.jsx)("div",{className:d().padding3,children:"Padding 3 (1.0rem)"}),(0,n.jsx)("div",{className:d().padding4,children:"Padding 4 (1.5rem)"}),(0,n.jsx)("div",{className:d().padding5,children:"Padding 5 (3.0rem)"})]})]})]})]});e.default=l},22336:function(i){i.exports={target:"CopyToClipboard_target__gKwn4",overlay:"CopyToClipboard_overlay__ZA3lq"}},17266:function(i){i.exports={fontSize1:"utilities_fontSize1__n_RZL",fontSize2:"utilities_fontSize2__rkOfW",fontSize3:"utilities_fontSize3__fkpZA",fontSize4:"utilities_fontSize4__9cbmU",fontSize5:"utilities_fontSize5__fstNf",fontSize6:"utilities_fontSize6__hCtbd",fontSize7:"utilities_fontSize7__kmboB",fontSize8:"utilities_fontSize8__BrFll",margin1:"utilities_margin1__9JSMB",margin2:"utilities_margin2__Wqg0u",margin3:"utilities_margin3__5a5G1",margin4:"utilities_margin4__Mi2tH",margin5:"utilities_margin5__s1Qwb",margin6:"utilities_margin6__NooxR",padding1:"utilities_padding1__S1BpQ",padding2:"utilities_padding2__RLR9Q",padding3:"utilities_padding3__xagpC",padding4:"utilities_padding4__BXzzp",padding5:"utilities_padding5__rg5_D",padding6:"utilities_padding6__XKloU",fontFamilySans:"utilities_fontFamilySans__KLR7V",fontFamilySansBig:"utilities_fontFamilySansBig__1bAK0",fontFamilySerif:"utilities_fontFamilySerif__pqzUH",fontFamilySerifBig:"utilities_fontFamilySerifBig__QEcR0"}},62255:function(i,e,s){"use strict";s.d(e,{Z:function(){return j}});var n=s(94184),t=s.n(n),a=s(67294),r=s(76792),d=s(75528),l=s(39602),o=s(85893);let c=a.forwardRef(({bsPrefix:i,className:e,variant:s,as:n="img",...a},d)=>{let l=(0,r.vE)(i,"card-img");return(0,o.jsx)(n,{ref:d,className:t()(s?`${l}-${s}`:l,e),...a})});c.displayName="CardImg";var m=s(53457);let f=(0,l.Z)("h5"),g=(0,l.Z)("h6"),h=(0,d.Z)("card-body"),p=(0,d.Z)("card-title",{Component:f}),v=(0,d.Z)("card-subtitle",{Component:g}),x=(0,d.Z)("card-link",{Component:"a"}),S=(0,d.Z)("card-text",{Component:"p"}),_=(0,d.Z)("card-footer"),z=(0,d.Z)("card-img-overlay"),u=a.forwardRef(({bsPrefix:i,className:e,bg:s,text:n,border:a,body:d,children:l,as:c="div",...m},f)=>{let g=(0,r.vE)(i,"card");return(0,o.jsx)(c,{ref:f,...m,className:t()(e,g,s&&`bg-${s}`,n&&`text-${n}`,a&&`border-${a}`),children:d?(0,o.jsx)(h,{children:l}):l})});u.displayName="Card",u.defaultProps={body:!1};var j=Object.assign(u,{Img:c,Title:p,Subtitle:v,Body:h,Link:x,Text:S,Header:m.Z,Footer:_,ImgOverlay:z})},53457:function(i,e,s){"use strict";var n=s(94184),t=s.n(n),a=s(67294),r=s(76792),d=s(49059),l=s(85893);let o=a.forwardRef(({bsPrefix:i,className:e,as:s="div",...n},o)=>{let c=(0,r.vE)(i,"card-header"),m=(0,a.useMemo)(()=>({cardHeaderBsPrefix:c}),[c]);return(0,l.jsx)(d.Z.Provider,{value:m,children:(0,l.jsx)(s,{ref:o,...n,className:t()(e,c)})})});o.displayName="CardHeader",e.Z=o}},function(i){i.O(0,[9774,2888,179],function(){return i(i.s=86326)}),_N_E=i.O()}]);