https://gonatura11y.com/v4/component---src-templates-docs-jsx-cont…ent-docs-shadow-mdx-8baac114438a9f7a1fe8.js

1"use strict";(self.webpackChunknatura11y_docs=self.webpackChunknatura11y_docs||[]).push([[3988],{3163:function(e,t,a){a.r(t),a.d(t,{Head:function(){return M},default:function(){return F}});a(8350),a(237);var n=a(8453),l=a(6540);var r=()=>l.createElement("div",{className:"grid gap-5 text-align-center font-size-md"},l.createElement("div",{className:"padding-x-2 padding-y-3 box-shadow-1"},l.createElement("p",null,l.createElement("code",null,".box-shadow-1"))),l.createElement("div",{className:"padding-x-2 padding-y-3 box-shadow-2"},l.createElement("p",null,l.createElement("code",null,".box-shadow-2"))),l.createElement("div",{className:"padding-x-2 padding-y-3 box-shadow-3"},l.createElement("p",null,l.createElement("code",null,".box-shadow-3"))));function o(e){const t=Object.assign({p:"p",hr:"hr",h2:"h2",h3:"h3",span:"span"},(0,n.RP)(),e.components),{Section:a,TextBlock:o,LinkOpenNew:c,FigureExample:s,Link:m}=t;return s||i("FigureExample",!0),m||i("Link",!0),c||i("LinkOpenNew",!0),a||i("Section",!0),o||i("TextBlock",!0),l.createElement(l.Fragment,null,l.createElement(a,{id:"introduction"},l.createElement("h2",{className:"screen-reader-only"},l.createElement(t.p,null,"Introduction")),l.createElement(o,null,l.createElement(t.p,null,"Apply a beautiful ",l.createElement(c,{LinkUrl:"https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow",LinkText:"box shadow"})," to any block-level element."))),"\n",l.createElement(t.hr),"\n",l.createElement(a,{id:"box-shadow-utilities"},l.createElement(o,null,l.createElement(t.h2,null,"Box Shadow Utilities"),l.createElement(t.p,null,"Natura11y's box shadow utilities come in three sizes. Each size is represented by a number: ",l.createElement("em",null,"1")," for ",l.createElement("strong",null,l.createElement("em",null,"small")),", ",l.createElement("em",null,"2")," for ",l.createElement("strong",null,l.createElement("em",null,"medium")),", and ",l.createElement("em",null,"3")," for ",l.createElement("strong",null,l.createElement("em",null,"large")),".")),l.createElement(s,{figureNumber:"1",visualExample:l.createElement(r),codeExample:'\n        <div class="box-shadow-1">...</div>\n        <div class="box-shadow-2">...</div>\n        <div class="box-shadow-3">...</div>\n    '}),l.createElement(o,null,l.createElement(t.h3,null,"Breakpoint Modifiers"),l.createElement(t.p,null,"Box shadow utilities accept ",l.createElement(m,{to:"/docs/breakpoint#breakpoint-modifiers"},"breakpoint modifiers"),".")),l.createElement(s,{figureNumber:"2",codeExample:'\n        \x3c!-- With breakpoint modifier --\x3e\n        \n        <div class="box-shadow-1--lg 👈">...</div>\n    '})),"\n",l.createElement(t.hr),"\n",l.createElement(a,{id:"text-shadow-utility"},l.createElement(o,null,l.createElement(t.h2,null,"Text Shadow Utility"),l.createElement(t.p,null,"Add a soft and elegant ",l.createElement(c,{LinkUrl:"https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow",LinkText:"text shadow"})," to your typography with Natura11y's text shadow utility.")),l.createElement(s,{figureNumber:"3",visualExample:l.createElement(t.span,{className:"text-shadow"},"Sample Text with Shadow"),codeExample:'\n        <span class="text-shadow">Your text here</span>\n    '}),l.createElement(o,null,l.createElement(t.h3,null,"Breakpoint Modifiers"),l.createElement(t.p,null,"Text shadow utility also accepts ",l.createElement(m,{to:"/docs/breakpoint#breakpoint-modifiers"},"breakpoint modifiers"),".")),l.createElement(s,{figureNumber:"4",codeExample:'\n        \x3c!-- With breakpoint modifier --\x3e\n        <span class="text-shadow--lg 👈">Your text here with large shadow at large breakpoint</span>\n    '})))}var c=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.RP)(),e.components);return t?l.createElement(t,e,l.createElement(o,e)):o(e)};function i(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}var s=a(4810),m=a(5588),d=a(7147),u=a(4878),p=a(8456),E=a(4732),h=a(4479),b=a(3074),x=a(8894),g=a(9713),f=a(3098),w=a(9691),k=a(3138),v=a(2494),N=a(2218),y=a(6260),_=a(5192),A=a(2827),S=a(2890),B=a(7598),L=a(7635);const T={GatsbyImage:m.G,Link:s.N_,TextBlock:p.A,Section:E.A,AccessibilitySpotlight:b.A,FigureExample:x.A,FigureImage:g.A,TableLineDescBlock:f.A,TableLineDescRow:w.A,BrowserBlock:k.A,LinkOpenNew:N.A,FeatureCard:y.A,RelatedPages:_.A,Button:A.A},C=e=>{let{data:t,children:a}=e;const{isOpen:r,openModal:o,closeModal:c,modalRef:i}=(0,L.A)(),s=t.allMdx.nodes.flatMap(e=>(0,B.bE)(e.body).map(t=>({text:t,title:e.frontmatter.title,slug:e.frontmatter.slug}))),p=t.allDocs.nodes,{title:E,bannerImage:b,bannerCreditName:x,bannerCreditHandle:g,bannerAlt:f}=t.singleDoc.frontmatter,w=t.relatedCSSVariables.nodes,k=t.singleDoc.frontmatter.relatedPages?t.singleDoc.frontmatter.relatedPages.map(e=>t.allMdx.nodes.find(t=>

1t.frontmatter.title===e)).filter(Boolean):[];return l.createElement(d.W,null,l.createElement("article",{className:"article article--column-2"},l.createElement("aside",{className:"article__sidebar"},l.createElement(u.A,{pages:p,openModal:o})),l.createElement("div",{className:"article__body border-left--lg",id:"primary-content"},l.createElement("div",{className:"article__body__content"},l.createElement("div",{className:"doc-container"},l.createElement("div",{className:"doc-container__header backdrop backdrop--fixed theme-dark aspect-ratio-banner"},l.createElement("div",{className:"backdrop__media"},l.createElement(m.G,{className:"opacity-40",image:(0,m.c)(b),alt:f}),l.createElement("div",{className:"backdrop__media__credit margin-1"},l.createElement("p",null,l.createElement("em",null,"Photo by ",l.createElement("a",{className:"text-decoration-underline",href:"https://unsplash.com/@"+g,target:"_blank",rel:"noreferrer"},x))))),l.createElement("div",{className:"backdrop__cover"},l.createElement("div",null,l.createElement("div",{className:"container narrow"},l.createElement("h1",{className:"banner-headline text-shadow"},E))))),l.createElement(h.A),l.createElement("div",{className:"doc-container__body"},l.createElement(n.xA,{components:T},a),w.length>0&&l.createElement(v.A,{cssVars:w}),k.length>0&&l.createElement(_.A,{pages:k}))))),l.createElement(S.A,{data:t,allSections:s,isOpen:r,closeModal:c,modalRef:i})))},M=e=>{let{pageContext:t}=e;return l.createElement(l.Fragment,null,l.createElement("title",null,t.title," • Natura11y"),t.description?l.createElement("meta",{name:"description",content:t.description}):null)};function F(e){return l.createElement(C,e,l.createElement(c,e))}}}]);
2//# sourceMappingURL=component---src-templates-docs-jsx-content-file-path-src-content-docs-shadow-mdx-8baac114438a9f7a1fe8.js.map