@salesforce-ux/design-system/__internal/chunked/docs/ui/components/cards/docs.mdx.js

Salesforce Lightning Design System

var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/ui/components/cards/docs.mdx.js"]=function(e){function t(t){for(var l,c,i=t[0],r=t[1],d=t[2],m=0,u=[];m<i.length;m++)c=i[m],Object.prototype.hasOwnProperty.call(n,c)&&n[c]&&u.push(n[c][0]),n[c]=0;for(l in r)Object.prototype.hasOwnProperty.call(r,l)&&(e[l]=r[l]);for(o&&o(t);u.length;)u.shift()();return s.push.apply(s,d||[]),a()}function a(){for(var e,t=0;t<s.length;t++){for(var a=s[t],l=!0,i=1;i<a.length;i++){var r=a[i];0!==n[r]&&(l=!1)}l&&(s.splice(t--,1),e=c(c.s=a[0]))}return e}var l={},n={14:0},s=[];function c(t){if(l[t])return l[t].exports;var a=l[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,c),a.l=!0,a.exports}c.m=e,c.c=l,c.d=function(e,t,a){c.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},c.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.t=function(e,t){if(1&t&&(e=c(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(c.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var l in e)c.d(a,l,function(t){return e[t]}.bind(null,l));return a},c.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(t,"a",t),t},c.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},c.p="/assets/scripts/bundle/";var i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],r=i.push.bind(i);i.push=t,i=i.slice();for(var d=0;d<i.length;d++)t(i[d]);var o=r;return s.push([212,0]),a()}({0:function(e,t){e.exports=React},18:function(e,t){e.exports=JSBeautify},19:function(e,t){e.exports=ReactDOM},212:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return Q})),a.d(t,"getContents",(function(){return U}));var l=a(0),n=a.n(l),s=a(4),c=a(1),i=(a(23),a(11)),r=a(14),d=a(15),o=a(91),m=a(63),u=a(32),h=a(6),b=a(48),E=a(55),p=a(28),y=n.a.createElement("button",{className:"slds-button slds-button_neutral"},"New"),f=n.a.createElement(h.r,{isFixedLayout:!0,isBordered:!0,hasNoRowHover:!0,hasCellBuffer:!0,type:"advanced"},n.a.createElement(h.p,null,n.a.createElement(h.q,null,n.a.createElement(h.c,null,n.a.createElement(h.b,{columnName:"Name"})),n.a.createElement(h.c,null,n.a.createElement(h.b,{columnName:"Company"})),n.a.createElement(h.c,null,n.a.createElement(h.b,{columnName:"Title"})),n.a.createElement(h.c,null,n.a.createElement(h.b,{columnName:"Email"})))),n.a.createElement(h.n,null,n.a.createElement(h.o,null,n.a.createElement(h.l,null,n.a.createElement(h.i,{cellLink:"javascript:void(0);",cellText:"Amy Choi"})),n.a.createElement(h.s,{type:"advanced"},n.a.createElement(h.i,{cellText:"Company One"})),n.a.createElement(h.s,{type:"advanced"},n.a.createElement(h.i,{cellText:"Director of Operations"})),n.a.createElement(h.s,{type:"advanced"},n.a.createElement(h.i,{cellText:"adam@company.com"}))))),v=n.a.createElement("ul",{className:"slds-grid slds-wrap slds-grid_pull-padded"},n.a.createElement("li",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-3"},n.a.createElement(m.a,{actions:!0,className:"slds-card__tile",media:n.a.createElement(u.a,{className:"slds-icon_small",symbol:"contact",assistiveText:"Contact"}),title:"Related Record Title 1"})),n.a.createElement("li",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-3"},n.a.createElement(m.a,{actions:!0,className:"slds-card__tile",media:n.a.createElement(u.a,{className:"slds-icon_small",symbol:"contact",assistiveText:"Contact"}),title:"Related Record Title 1"})),n.a.createElement("li",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-3"},n.a.createElement(m.a,{actions:!0,className:"slds-card__tile",media:n.a.createElement(u.a,{className:"slds-icon_small",symbol:"contact",assistiveText:"Contact"}),title:"Related Record Title 1"}))),g=function(e){return n.a.createElement(d.d,null,n.a.createElement(d.c,{title:"Contacts (1)",href:"javascript:void(0);",symbol:"contact",action:y}),n.a.createElement(d.a,null,f),n.a.createElement(d.b,null,"View All ",n.a.createElement("span",{className:"slds-assistive-text"},"Contacts")))},j=function(e){return n.a.createElement(d.d,null,n.a.createElement(d.c,{title:"Contacts (3)",href:"javascript:void(0);",symbol:"contact",action:y}),n.a.createElement(d.a,{hasPadding:!0},v),n.a.createElement(d.b,null,"View All ",n.a.createElement("span",{className:"slds-assistive-text"},"Contacts")))},w=function(e){return n.a.createElement(d.d,null,n.a.createElement(d.c,{title:"Outer Card Header",href:"javascript:void(0);",symbol:"contact",action:y}),n.a.createElement(d.a,{hasPadding:!0},n.a.createElement(d.d,null,n.a.createElement(d.c,{title:"Contacts",href:"javascript:void(0);",symbol:"contact",action:y}),n.a.createElement(d.a,{hasPadding:!0},"This is a card inside an `slds-card` to show how styling is removed when cards are nested inside each other."),n.a.createElement(d.b,null,"View All ",n.a.createElement("span",{className:"slds-assistive-text"},"Contacts"))),n.a.createElement(d.d,null,n.a.createElement(d.c,{title:"Contacts",href:"javascript:void(0);",symbol:"contact",action:y}),n.a.createElement(d.a,{hasPadding:!0},"This is a card inside an `slds-card` to show how styling is removed when cards are nested inside each other."),n.a.createElement(d.b,null,"View All ",n.a.createElement("span",{className:"slds-assistive-text"},"Contacts"))),n.a.createElement(d.d,{hasCardBoundary:!0},n.a.createElement(d.c,{title:"Contacts",href:"javascript:void(0);",symbol:"contact",action:y}),n.a.createElement(d.a,{hasPadding:!0},"This is a card inside an `slds-card` to illustrate how `slds-card_boundary` adds a rounded border when desired."),n.a.createElement(d.b,null,"View All ",n.a.createElement("span",{className:"slds-assistive-text"},"Contacts"))),n.a.createElement(d.d,{hasCardBoundary:!0},n.a.createElement(d.c,{title:"Contacts",href:"javascript:void(0);",symbol:"contact",action:y}),n.a.createElement(d.a,{hasPadding:!0},"This is a card inside an `slds-card` to illustrate how `slds-card_boundary` adds a rounded border when desired."),n.a.createElement(d.b,null,"View All ",n.a.createElement("span",{className:"slds-assistive-text"},"Contacts")))))},_=n.a.createElement(d.d,null,n.a.createElement(d.c,{title:"Accounts",href:"javascript:void(0);",symbol:"account",action:n.a.createElement("button",{className:"slds-button slds-button_neutral"},"New")}),n.a.createElement(d.a,{hasPadding:!0},"Anything can go into the card body"),n.a.createElement(d.b,null,"View All ",n.a.createElement("span",{className:"slds-assistive-text"},"Accounts"))),O=[{id:"empty",label:"Empty",element:n.a.createElement(d.d,null,n.a.createElement(d.c,{title:"Card Header",href:"javascript:void(0);",symbol:"contact",action:n.a.createElement("button",{className:"slds-button slds-button_neutral"},"New")}),n.a.createElement(d.a,null),n.a.createElement(d.b,null))},{id:"empty-illustration",label:"Empty with illustration",element:n.a.createElement(d.d,null,n.a.createElement(d.c,{title:"Tasks",href:"javascript:void(0);",symbol:"task"}),n.a.createElement(d.a,{hasPadding:!0},n.a.createElement(p.a,null,n.a.createElement(E.d,null),n.a.createElement(p.c,{heading:"No new tasks",message:"Nothing needs your attention right now. Check back later."}))))},{id:"loading",label:"Loading",element:n.a.createElement(d.d,null,n.a.createElement(d.c,{title:"Tasks",href:"javascript:void(0);",symbol:"task"}),n.a.createElement(d.a,{hasPadding:!0},n.a.createElement(b.a,{className:"slds-spinner_small"})))}],N=[{id:"related-list-table",label:"With data-table",element:n.a.createElement(g,null)},{id:"related-list-tiles",label:"With tiles",element:n.a.createElement(j,null)},{id:"nested-cards",label:"Nested cards",element:n.a.createElement(w,null)},{id:"with-no-header",label:"With no header",element:n.a.createElement(d.d,null,n.a.createElement(d.a,{hasPadding:!0},"Anything can go into the card body"),n.a.createElement(d.b,null,"View All ",n.a.createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"visibly-hidden-card-header",label:"Visibly hidden card header",element:n.a.createElement(d.d,null,n.a.createElement(d.c,{title:"Card Header",href:"javascript:void(0);",className:"slds-assistive-text"}),n.a.createElement(d.a,{hasPadding:!0},"Anything can go into the card body"),n.a.createElement(d.b,null,"View All ",n.a.createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"body-has-no-padding",label:"Body with no padding",element:n.a.createElement(d.d,null,n.a.createElement(d.c,{title:"Accounts",href:"javascript:void(0);",symbol:"account"}),n.a.createElement(d.a,null,"Card Body"))},{id:"body-has-padding",label:"Body with padding",element:n.a.createElement(d.d,null,n.a.createElement(d.c,{title:"Accounts",href:"javascript:void(0);",symbol:"account"}),n.a.createElement(d.a,{hasPadding:!0},"Card Body with Padding"))},{id:"has-no-footer",label:"No footer",element:n.a.createElement(d.d,null,n.a.createElement(d.c,{title:"Accounts",href:"javascript:void(0);",showIcon:!0,symbol:"account"}),n.a.createElement(d.a,{hasPadding:!0},"Card Body"),n.a.createElement(d.b,null))},{id:"has-footer",label:"Has footer",element:n.a.createElement(d.d,null,n.a.createElement(d.c,{title:"Accounts",href:"javascript:void(0);",showIcon:!0,symbol:"account"}),n.a.createElement(d.a,{hasPadding:!0},"Card Body"),n.a.createElement(d.b,null,"View All ",n.a.createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"nested-no-boundary",label:"Nested with no boundary",element:n.a.createElement(d.d,null,n.a.createElement(d.c,{title:"Outer Card Header",href:"javascript:void(0);",symbol:"account"}),n.a.createElement(d.a,{hasPadding:!0},n.a.createElement(d.d,null,n.a.createElement(d.c,{title:"Card Header",href:"javascript:void(0);",symbol:"account"}),n.a.createElement(d.a,{hasPadding:!0},"This is a nested card with no styling (default)"),n.a.createElement(d.b,null,"View All ",n.a.createElement("span",{className:"slds-assistive-text"},"Accounts")))),n.a.createElement(d.b,null,"View All ",n.a.createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"nested-with-boundary",label:"Nested with boundary",element:n.a.createElement(d.d,null,n.a.createElement(d.c,{title:"Outer Card Header",href:"javascript:void(0);",symbol:"account"}),n.a.createElement(d.a,{hasPadding:!0},n.a.createElement(d.d,{hasCardBoundary:!0},n.a.createElement(d.c,{title:"Card Header",href:"javascript:void(0);",symbol:"account"}),n.a.createElement(d.a,{hasPadding:!0},"This is a card inside an `slds-card` to illustrate how `slds-card_boundary` adds a rounded border when desired."),n.a.createElement(d.b,null,"View All ",n.a.createElement("span",{className:"slds-assistive-text"},"Accounts")))),n.a.createElement(d.b,null,"View All ",n.a.createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"with-long-truncated-title",label:"With long truncated title",demoStyles:"max-width: 360px;",element:n.a.createElement(d.d,null,n.a.createElement(d.c,{title:"Card Header Title With Exceptionally Long Title",href:"javascript:void(0);",symbol:"account",action:n.a.createElement("button",{className:"slds-button slds-button_neutral"},"New")}),n.a.createElement(d.a,{hasPadding:!0},"Anything can go into the card body"),n.a.createElement(d.b,null,"View All ",n.a.createElement("span",{className:"slds-assistive-text"},"Accounts")))}],x=a(10),C=a(7),A=a(51),T=a(5),W=a.n(T),P=function(e){return n.a.createElement("div",{className:"slds-einstein-header__actions"},n.a.createElement(A.a,null,n.a.createElement(C.b,{className:"slds-button_icon-border-filled",symbol:"email",assistiveText:"Email",title:"Email","aria-pressed":"false"}),n.a.createElement(C.b,{className:"slds-button_icon-border-filled",symbol:"edit",assistiveText:"Edit",title:"Edit","aria-pressed":"false"})))},S=function(e){return n.a.createElement("div",{className:W()("slds-grid slds-einstein-header",e.className)},e.closeButton?n.a.createElement(C.b,{className:W()("slds-button_icon-small slds-float_right slds-popover__close",e.inverse?"slds-button_icon-inverse":"slds-button_icon"),symbol:"close",assistiveText:"Close dialog",title:"Close dialog"}):null,n.a.createElement("header",{className:W()("slds-media slds-media_center slds-has-flexi-truncate")},n.a.createElement("div",{className:"slds-grid slds-grid_vertical-align-center slds-size_3-of-4 slds-medium-size_2-of-3"},e.symbol?n.a.createElement("div",{className:"slds-media__figure"},n.a.createElement("span",{className:"slds-icon_container slds-icon-utility-"+e.symbol},n.a.createElement(x.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:e.symbol}))):null,n.a.createElement("div",{className:"slds-media__body"},n.a.createElement("h2",{className:"slds-truncate",id:e.headingId,title:e.headerTitle||"Einstein"},e.hasLink?n.a.createElement("a",{href:"javascript:void(0);",className:"slds-card__header-link",title:e.headerTitle||"Einstein"},n.a.createElement("span",{className:"slds-text-heading_small"},e.headerTitle||"Einstein")):n.a.createElement("span",{className:"slds-text-heading_small"},e.headerTitle||"Einstein")))),n.a.createElement("div",{className:"slds-einstein-header__figure slds-size_1-of-4 slds-medium-size_1-of-3"})),e.actions&&n.a.createElement(P,null))},k=function(e){return n.a.createElement(d.d,null,n.a.createElement(S,{className:"slds-card__header",headerTitle:"Einstein (10+)",hasLink:!0,actions:e.hasActions,symbol:e.hasIcon&&"salesforce1"}),n.a.createElement(d.a,{hasPadding:!0},"Card Body"),n.a.createElement(d.b,null,"View All"," ",n.a.createElement("span",{className:"slds-assistive-text"},"Einstein Recommendations")))},B=n.a.createElement(k,null),V=[{id:"einstein-with-icon",label:"Einstein card - with icon",element:n.a.createElement(k,{hasIcon:!0})},{id:"einstein-with-icon-and-actions",label:"Einstein card - with icon and actions",element:n.a.createElement(k,{hasIcon:!0,hasActions:!0})}],L=a(31),I=n.a.createElement("div",{className:"slds-card-wrapper"},n.a.createElement(d.d,null,n.a.createElement(d.c,{title:"Contacts",href:"javascript:void(0);",symbol:"contact",action:n.a.createElement("button",{className:"slds-button slds-button_neutral"},"New")}),n.a.createElement(d.a,null,"This is a card inside an `slds-card-wrapper` to show how styling is removed when cards are nested inside."),n.a.createElement(d.b,null,"View All ",n.a.createElement("span",{className:"slds-assistive-text"},"Contacts"))),n.a.createElement(d.d,{hasCardBoundary:!0},n.a.createElement(d.c,{title:"Contacts",href:"javascript:void(0);",symbol:"contact",action:n.a.createElement("button",{className:"slds-button slds-button_neutral"},"New")}),n.a.createElement(d.a,{hasPadding:!0},"This is a card inside an `slds-card-wrapper` to illustrate how `slds-card_boundary` adds a rounded border when desired."),n.a.createElement(d.b,null,"View All ",n.a.createElement("span",{className:"slds-assistive-text"},"Contacts")))),z=(L.a,L.a.Item,d.d,d.c,d.a,d.b,d.d,d.c,d.a,d.b,L.a.Item,L.a.Item,a(2)),M=a(33),D=s.c.a,H=s.c.code,R=s.c.em,F=s.c.h2,J=s.c.h3,q=s.c.h4,Y=s.c.h5,G=s.c.p,K=s.c.strong,Q=function(){return Object(l.createElement)(s.b,{},Object(l.createElement)("div",{className:"lead doc"},"Cards are used to apply a container around a related grouping of information."),Object(l.createElement)(c.a,{exampleOnly:!0},_),F({id:"About-Cards"},"About Cards"),G({},"To initialize a card, apply the ",H({},"slds-card")," class to an ",H({},"<article>")," element."),J({id:"Accessibility"},"Accessibility"),G({},"Cards should use an underlying ",H({},"<article>")," element to maintain usability for some screen reader users."),J({id:"Mobile"},"Mobile"),Object(l.createElement)(M.a,{patternSpecificText:"cards will have bolded header title text, no top border, and no rounded corners"}),Object(l.createElement)(c.a,{frameOnly:!0},_),F({id:"Base-Card-Structure"},"Base Card Structure"),G({},"A card is made up of 3 sections, a header, a body, and a footer. The header and footer have limitations, but the body section can accommodate any layout of related information."),Object(l.createElement)(c.a,null,_),J({id:"Header"},"Header"),G({},"The card header can have an icon, a title and actions. The icon and title are located on the left, while the actions row is located on the right side of the card header."),Object(l.createElement)(i.a,{title:"Cards Header"},Object(l.createElement)(c.a,null,Object(l.createElement)(d.d,null,Object(l.createElement)(d.c,{title:"Accounts",href:"javascript:void(0);",symbol:"account"})))),q({id:"With-no-header"},"With no header"),G({},"The card header can be removed from the HTML to prevent the card header from displaying."),Object(l.createElement)(c.a,null,Object(z.e)(N,"with-no-header")),G({},"Alternatively, the card header can be visually hidden but still accessible to screen readers by applying ",H({},"slds-assistive-text")," to the ",H({},"slds-card__header")," element."),Object(l.createElement)(c.a,null,Object(z.e)(N,"visibly-hidden-card-header")),q({id:"Actions-row"},"Actions row"),G({},"The actions row of a card header typically accommodates a single action for the object a user is working with, such as creating, editing, or deleting. If there are more than one action, an action overflow menu would be used instead."),Y({id:"Single-action"},"Single action"),Object(l.createElement)(i.a,{title:"Cards Single Action"},Object(l.createElement)(c.a,null,Object(l.createElement)(d.d,null,Object(l.createElement)(d.c,{title:"Accounts",href:"javascript:void(0);",symbol:"account",action:Object(l.createElement)("button",{className:"slds-button slds-button_neutral"},"New")})))),Y({id:"Multiple-actions"},"Multiple actions"),Object(l.createElement)(i.a,{title:"Cards Multiple Actions"},Object(l.createElement)(c.a,{demoStyles:"height: 10rem;"},Object(l.createElement)(d.d,null,Object(l.createElement)(d.c,{title:"Accounts",href:"javascript:void(0);",symbol:"account",action:Object(l.createElement)(o.a,{position:"right"})})))),J({id:"Body"},"Body"),G({},"The card body accommodates any layout or design, as long as its a grouping of related information."),Object(l.createElement)(r.a,{type:"note",header:"Styling Note"},Object(l.createElement)("p",null,"By default, the body of a card does not have padding. Components inside the card will be flush to the left and right edges of the card. If you need to add padding, use the ",Object(l.createElement)("code",null,"slds-card__body_inner")," class on the ",Object(l.createElement)("code",null,"slds-card__body")," element.")),q({id:"Default-without-padding"},"Default without padding"),G({},"For an example of when to use the default behavior, see the ",D({href:"/components/cards/#With-a-Data-Table"},"Data Table example"),"."),Object(l.createElement)(c.a,null,Object(z.e)(N,"body-has-no-padding")),q({id:"With-padding"},"With padding"),G({},"For an example of when to use the ",H({},"slds-card__body_inner")," class, see the ",D({href:"/components/cards/#With-Tiles"},"Tiles example"),"."),Object(l.createElement)(c.a,null,Object(z.e)(N,"body-has-padding")),J({id:"Footer"},"Footer"),G({},"The card footer is optional and should ",R({},K({},"only")),' have a "View All" link that takes a user to the object list view.'),Object(l.createElement)(r.a,{type:"a11y",header:"Accessibility Note"},Object(l.createElement)("p",null,"When present, the footer includes hidden assistive text to give screen reader users context about which entity they will be viewing.")),Object(l.createElement)(r.a,{type:"note",header:"Implementation Note"},Object(l.createElement)("p",null,"The examples in this documentation use the ",Object(l.createElement)("code",null,"slds-card__footer-action")," class on the footer link ",Object(l.createElement)("code",null,"<a>")," to force the footer's click target to span the entire width of the card. Simply remove this class if not needed.")),q({id:"With-no-footer"},"With no footer"),Object(l.createElement)(c.a,null,Object(z.e)(N,"has-no-footer")),q({id:"With-a-footer"},"With a footer"),Object(l.createElement)(c.a,null,Object(z.e)(N,"has-footer")),F({id:"Examples"},"Examples"),J({id:"Empty"},"Empty"),G({},"When a card doesn't have any data, it is represented with the body and footer collapsed by default."),q({id:"Collapsed"},"Collapsed"),Object(l.createElement)(c.a,null,Object(z.e)(O,"empty")),q({id:"With-Illustration"},"With Illustration"),G({},"Alternatively, a card can be represented with no data by using an ",D({href:"/components/illustration"},"illustration")," in the card body."),Object(l.createElement)(c.a,null,Object(z.e)(O,"empty-illustration")),J({id:"Loading"},"Loading"),G({},"When a card instantiates and is loading, we want to provide feedback to the user by display a spinner. Once the data has loaded, the spinner can be removed from the card component."),Object(l.createElement)(c.a,null,Object(z.e)(O,"loading")),J({id:"With-a-Data-Table"},"With a Data Table"),G({},"Placing a data table inside of an ",H({},"slds-card__body")," is an example of when to utilize the default behavior of a card body, since no padding is applied."),Object(l.createElement)(c.a,null,Object(z.e)(N,"related-list-table")),J({id:"With-Tiles"},"With Tiles"),G({},"Placing contact tiles inside of an ",H({},"slds-card__body")," is an example of using ",H({},"slds-card__body_inner")," to apply additional padding to the card body content."),Object(l.createElement)(c.a,null,Object(z.e)(N,"related-list-tiles")),Object(l.createElement)(M.b,{docsLink:"#Mobile",header:"Mobile context changes",elementName:"cards with tiles"}),Object(l.createElement)(c.a,{frameOnly:!0},Object(z.e)(N,"related-list-tiles")),F({id:"Layout"},"Layout"),J({id:"Nested-Cards"},"Nested Cards"),G({},"When a card is located inside of another card body, we remove the drop shadow and border of the nested cards. You can opt into adding the border back by applying ",H({},"slds-card_boundary")," to the ",H({},"slds-card")," element."),q({id:"No-styling"},"No styling"),Object(l.createElement)(c.a,null,Object(z.e)(N,"nested-no-boundary")),q({id:"With-card-styling"},"With card styling"),G({},"Adding ",H({},"slds-card_boundary")," to the ",H({},"slds-card")," element will give you back the card styling."),Object(l.createElement)(c.a,null,Object(z.e)(N,"nested-with-boundary")),J({id:"Wrapped-Cards"},"Wrapped Cards"),G({},"To combine several cards into a single card look, wrap the cards using ",H({},"slds-card-wrapper"),". Similar to the nested cards, adding ",H({},"slds-card_boundary")," to the ",H({},"slds-card")," element will give you back the card styling."),Object(l.createElement)(c.a,null,I),F({id:"Einstein-Theming"},"Einstein Theming"),G({},"For cards that contain Einstein related information, you can include an Einstein themed card header."),Object(l.createElement)(c.a,null,B),J({id:"With-an-Icon"},"With an Icon"),Object(l.createElement)(c.a,null,Object(z.e)(V,"einstein-with-icon")),J({id:"With-Actions"},"With Actions"),Object(l.createElement)(c.a,null,Object(z.e)(V,"einstein-with-icon-and-actions")),Object(l.createElement)(M.b,{docsLink:"#Mobile",header:"Mobile context changes",elementName:"cards with Einstein theming and actions"}),Object(l.createElement)(c.a,{frameOnly:!0},Object(z.e)(V,"einstein-with-icon-and-actions")))},U=function(){return Object(s.a)(Q())}}});