1(self.webpackChunkpatternfly_org=self.webpackChunkpatternfly_org||[]).push([[11675],{33274:(e,t,i)=>{"use strict";i.r(t),i.d(t,{default:()=>w});var a=i(2784),s=i(66159),n=i(85088),c=i.n(n),l=i(19772),o=i.n(l),r=i(72538),m=i.n(r),h=i(80583),p=i.n(h),g=i(11574),d=i.n(g);const f={id:"Tile",section:"components",subsection:"",deprecated:!0,template:!1,beta:!1,demo:!1,newImplementationLink:!1,source:"design-guidelines",tabName:null,slug:"/components/tile/design-guidelines",sourceLink:"https://github.com/patternfly/patternfly-org/blob/main/packages/documentation-site/patternfly-docs/content/design-guidelines/components/tile/tile.md",relPath:"packages/documentation-site/patternfly-docs/content/design-guidelines/components/tile/tile.md",examples:{}},u=()=>a.createElement(a.Fragment,null,a.createElement(s.sg,{id:"usage",headingLevel:"h2",className:"ws-title ws-h2"},"Usage"),a.createElement(s.sg,{id:"when-to-use",headingLevel:"h3",className:"ws-title ws-h3"},"When to use"),a.createElement("ul",{className:"pf-v6-c-content--ul pf-m-editorial ws-ul "},a.createElement("li",{className:"pf-v6-c-content--li pf-m-editorial ws-li "},"The selection process would benefit from having the additional visual prominence that tiles provide."),a.createElement("li",{className:"pf-v6-c-content--li pf-m-editorial ws-li "},"The selection includes additional information, like a brief description or an icon."),a.createElement("li",{className:"pf-v6-c-content--li pf-m-editorial ws-li "},"The selection consists of brief, static content."),a.createElement("li",{className:"pf-v6-c-content--li pf-m-editorial ws-li "},"There are few (typically 2-6) selections for the user to choose from.")),a.createElement(s.sg,{id:"when-not-to-use",headingLevel:"h3",className:"ws-title ws-h3"},"When not to use"),a.createElement("ul",{className:"pf-v6-c-content--ul pf-m-editorial ws-ul "},a.createElement("li",{className:"pf-v6-c-content--li pf-m-editorial ws-li "},"The option presented to the user includes an action link, button, or overflow menu. Instead, use a ",a.createElement(s.rU,{to:"https://v4-archive.patternfly.org/v4/components/card/design-guidelines",className:""},"card"),"."),a.createElement("li",{className:"pf-v6-c-content--li pf-m-editorial ws-li "},"The option presented to the user requires more than 3 lines of content description. Instead, use a ",a.createElement(s.rU,{to:"https://v4-archive.patternfly.org/v4/components/card/design-guidelines",className:""},"card"),"."),a.createElement("li",{className:"pf-v6-c-content--li pf-m-editorial ws-li "},"The option opens an additional resource or triggers an action. Instead, use a ",a.createElement(s.rU,{to:"https://v4-archive.patternfly.org/v4/components/card/design-guidelines",className:""},"card"),".")),a.createElement("p",{className:"pf-v6-c-content--p pf-m-editorial ws-p "},a.createElement("strong",{className:""},"Example")),a.createElement("img",{src:c(),height:783*c().height/c().width,alt:"behavior example",width:"783",className:"ws-img "}),a.createElement(s.sg,{id:"behavior",headingLevel:"h2",className:"ws-title ws-h2"},"Behavior"),a.createElement("p",{className:"pf-v6-c-content--p pf-m-editorial ws-p "},"As the user hovers over the tile component, the color will change insinuating its clickability. Once the user chooses the title, it will appear with a blue border showing it has been selected."),a.createElement("img",{src:o(),height:230*o().height/o().width,alt:"behavior example",width:"230",className:"ws-img "}),a.createElement(s.sg,{id:"variations",headingLevel:"h2",className:"ws-title ws-h2"},"Variations"),a.createElement(s.sg,{id:"basic",headingLevel:"h3",className:"ws-title ws-h3"},"Basic"),a.createElement("img",{src:m(),height:222*m().height/m().width,alt:"default example",width:"222",className:"ws-img "}),a.createElement(s.sg,{id:"subtext",headingLevel:"h3",className:"ws-title ws-h3"},"Subtext"),a.createElement("img",{src:p(),height:222*p().height/p().width,alt:"subtext example",width:"222",className:"ws-img "}),a.createElement(s.sg,{id:"icon",headingLevel:"h3",className:"ws-title ws-h3"},"Icon"),a.createElement("img",{src:d(),height:230*d().height/d().width,alt:"icon example",width:"230",className:"ws-img "}));u.displayName="ComponentsTileDesignGuidelinesDocs",u.pageData=f;const w=u},19772:(e,t,i)=>{e.exports={srcSet:i.p+"images/behavior.af49d4f43b30611c.png 460w",images:[{path:i.p+"images/behavior.af49d4f43b30611c.png",width:460,height:314}],src:i.p+"images/behavior.af49d4f43b30611c.png",toString:function(){return i.p+"images/behavior.af49d4f43b30611c.png"},width:460,height:314}},72538:(e,t,i)=>{e.exports={srcSet:i.p+"images/default.717201125fb97673.png 444w",images:[{path:i.p+"images/default.717201125fb97673.png",width:444,he
1ight:314}],src:i.p+"images/default.717201125fb97673.png",toString:function(){return i.p+"images/default.717201125fb97673.png"},width:444,height:314}},11574:(e,t,i)=>{e.exports={srcSet:i.p+"images/icon.ac62c98f00895fcc.png 460w",images:[{path:i.p+"images/icon.ac62c98f00895fcc.png",width:460,height:308}],src:i.p+"images/icon.ac62c98f00895fcc.png",toString:function(){return i.p+"images/icon.ac62c98f00895fcc.png"},width:460,height:308}},80583:(e,t,i)=>{e.exports={srcSet:i.p+"images/subtext.32e7d8cd2c36a8d1.png 444w",images:[{path:i.p+"images/subtext.32e7d8cd2c36a8d1.png",width:444,height:314}],src:i.p+"images/subtext.32e7d8cd2c36a8d1.png",toString:function(){return i.p+"images/subtext.32e7d8cd2c36a8d1.png"},width:444,height:314}},85088:(e,t,i)=>{e.exports={srcSet:i.p+"images/tileexample.9c54dcf805618207.png 1566w",images:[{path:i.p+"images/tileexample.9c54dcf805618207.png",width:1566,height:974}],src:i.p+"images/tileexample.9c54dcf805618207.png",toString:function(){return i.p+"images/tileexample.9c54dcf805618207.png"},width:1566,height:974}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.