https://www.doveranimalhospital.com/_next/static/chunks/pages/styleGuide-68a3b87e08a7ee8f.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8114],{86276:function(e,l,i){"use strict";i.r(l),i.d(l,{default:function(){return E}});var n=i(67294),t=i(19521),s=i(9306),r=i(42138),u=i(42466),a=i(34076),o=n.createElement,c=t.ZP.div.withConfig({componentId:"sc-lis2zr-0"})(["padding:0.5rem;text-align:center;"]),d=t.ZP.div.withConfig({componentId:"sc-lis2zr-1"})(["background:",";border-radius:50%;box-shadow:inset 0 0 3px rgba(0,0,0,0.25);height:100px;width:100px;margin:0 auto 0.5rem;"],(function(e){return e.color?e.color:""})),p=t.ZP.p.withConfig({componentId:"sc-lis2zr-2"})(["margin-bottom:0;"]),h=function(e){var l=e.label,i=e.value,n=e.keyValue;return l&&i&&n?o(c,{className:"nva-color-swatch"},o(d,{className:"nva-color-swatch__sample",color:i}),o(p,{className:"nva-color-swatch__description"},l+" ("+i+")"," ",o("br",null),"Key Name: ".concat(n))):null},m=i(72587),g=n.createElement,v=t.ZP.div.withConfig({componentId:"sc-1ioj93e-0"})(["display:grid;grid-template-columns:repeat(3,1fr);grid-gap:1rem;@media (min-width:","){grid-template-columns:repeat(5,1fr);}@media (min-width:","){grid-template-columns:repeat(6,1fr);}"],m.ZP.tabletP,m.ZP.desktop),f=function(e){var l=e.colors;return!l||l.length<=0?null:g("section",{className:"nva-color-swatches"},g(a.Z,{HeadingType:"h2",className:"nva-color-swatches__heading"},"Color Palette"),g(v,{className:"nva-color-swatches__list"},l.map((function(e,l){return g(h,{className:"nva-color-swatches__list-item",label:e.label,value:e.value,keyValue:e.key,key:l})}))))},P=n.createElement,b=t.ZP.div.withConfig({componentId:"sc-tf41fr-0"})(["padding:0.5rem;text-align:center;&:hover{overflow:hidden;.sample{position:absolute;transform:scale(2);}}"]),w=t.ZP.p.withConfig({componentId:"sc-tf41fr-1"})(["margin-bottom:0;"]),x=function(e){var l=e.label,i=e.style,n=e.keyValue;if(!l||!i)return null;var s=t.ZP.div.withConfig({componentId:"sc-tf41fr-2"})(["border-radius:50%;box-shadow:inset 0 0 3px rgba(0,0,0,0.25);height:100px;margin:0 auto 0.5rem;width:100px;transition:all 0.5s ease-in-out;",""],i||"border-color:red;");return P(b,{className:"nva-texture-swatch"},P(s,{className:"nva-texture-swatch__sample sample"}),P(w,{className:"nva-texture-swatch__description"},l," ",P("br",null),"Key Name: ".concat(n)))},y=n.createElement,k=t.ZP.div.withConfig({componentId:"sc-19lshng-0"})(["display:grid;grid-template-columns:repeat(3,1fr);grid-gap:1rem;@media (min-width:","){grid-template-columns:repeat(5,1fr);}@media (min-width:","){grid-template-columns:repeat(6,1fr);}"],m.ZP.tabletP,m.ZP.desktop),q=function(e){var l=e.textures;return!l||l.length<=0?y("section",null,y(a.Z,{HeadingType:"h2"},"Textures"),y("p",null,"This theme has no background textures.")):y("section",null,y(a.Z,{HeadingType:"h2"},"Textures"),y("p",null,"The following textures are available for use in this them as backgrounds on various components."),y(k,null,l.map((function(e,l){return y(x,{label:e.label,style:e.style,keyValue:e.key,key:l})}))))},_=n.createElement,Z=t.ZP.div.withConfig({componentId:"sc-45arex-0"})(["display:grid;grid-template-columns:repeat(1,1fr);grid-gap:1rem;@media (min-width:","){grid-template-columns:repeat(2,1fr);}@media (min-width:","){grid-template-columns:repeat(2,1fr);}"],m.ZP.tabletP,m.ZP.desktop),N=function(e){e.example;return _("section",null,_(a.Z,{HeadingType:"h2"},"Typograhy"),_("h3",null,"Headlines"),_("p",null,"Headlines are used not just for visual purposes but also for SEO. Therefore it is ipmortant that a headline is not picked just to achieve a visual intention. They should be structured like an outline."),_(Z,null,_("div",null,_("h1",null,"Headline 1 <h1>"),_("p",null,"Used exclusively for page titles."),_("hr",null)),_("div",null,_("h2",null,"Headline 2 <h2>"),_("p",null,"Used exclusively for page-level secondary headings."),_("hr",null))),_(Z,null,_("div",null,_("h3",null,"Headline 3 <h3>

1"),_("p",null,"Used for component-level headings."),_("hr",null)),_("div",null,_("h4",null,"Headline 4 <h4>"),_("p",null,"Used for component-level secondary headings."),_("hr",null))),_(Z,null,_("div",null,_("h5",null,"Headline 5 <h5>"),_("p",null,"Used for item-level headings within components."),_("hr",null)),_("div",null,_("h6",null,"Headline 6 <h6>"),_("p",null,"Used for item-level secondary headings within components"),_("hr",null))),_("h3",null,"Paragraphs"),_("p",null,_("strong",null,"Paragraph text <p>:")," Phasellus porta, risus nunc ac cras turpis duis rhoncus mus lundium rhoncus sed risus, velit lorem, habitasse placerat tempor a scelerisque, odio in nisi, eros sed tristique? Cum non? Tincidunt? Et ridiculus pid pulvinar parturient proin sed adipiscing non eros vel enim, nisi, adipiscing, phasellus arcu dolor sit mattis, rhoncus in nunc, vel adipiscing, augue! Dolor! Cursus cras urna mauris! Mattis. Ultrices dignissim amet? Ac duis? Et enim placerat urna lacus phasellus, est nisi? Lorem phasellus porta placerat. Mattis nec odio pulvinar in mauris! Diam turpis vut dolor duis, ac. Nisi hac! In, enim lectus phasellus! Platea odio risus dolor elementum rhoncus lorem odio ac, duis, duis augue porta pellentesque porttitor magnis auctor parturient adipiscing odio cras lacus enim nunc."),_("p",null,"Lundium magna nascetur tortor odio? Lorem tristique. Odio a? Nec sed?"," ",_("a",{href:"#",title:"link text"},"link text"),_("em",null,"Tristique, et tristique odio, lundium velit porttitor tristique enim et augue enim tortor sit elementum al

1iquam.")," ","Diam phasellus, adipiscing lectus integer placerat, turpis ultricies natoque ridiculus magna natoque, duis pulvinar! Nec natoque dictumst arcu, urna dapibus, hac ultricies adipiscing ac integer nascetur lorem et duis sociis aliquet, integer! Porta odio lorem et est purus, adipiscing porta enim in sociis pellentesque. Habitasse lacus magna adipiscing duis montes odio ultrices cras, lacus aliquet! Dignissim? Porttitor mattis tincidunt in porttitor, elementum placerat placerat vel tristique. Porttitor dictumst nisi, augue adipiscing porttitor. Adipiscing integer nec tristique! Scelerisque. Vel enim et sed elementum et odio? Velit rhoncus! Enim odio sit, ac proin urna."),_("h4",null,"<small> Text"),_("p",null,_("small",null,_("strong",null,"Small text:")," Applied using the <small> tag. Phasellus porta, risus nunc ac cras turpis duis rhoncus mus lundium rhoncus sed risus, velit lorem, habitasse placerat tempor a scelerisque, odio in nisi, eros sed tristique?")),_("p",null,_("strong",null,"Bold text: Phasellus porta, risus nunc ac cras")),_("p",null,_("em",null,"Italicised text: Phasellus porta, risus nunc ac cras")),_("p",null,_("a",{href:"http://example.com",title:"Hyperlinked text",target:"_blank",rel:"noopener noreferrer"},"Hyperlinked text")),_("hr",null),_("h3",null,"Lists"),_(Z,null,_("div",null,_("h4",null,"Unordered (bulleted) list <ul>"),_("ul",null,_("li",null,"Phasellus porta, risus nunc ac <li>"),_("li",null,"Porttitor rhoncus a? Pulvinar, rhoncus nisi turpis est scelerisque dignissim dolor eros, nisi rhoncus, a, vel, enim integer!"),_("li",null,"Phasellus porta, risus nunc ac",_("ul",null,_("li",null,"Phasellus porta, risus nunc ac"),_("li",null,"Phasellus porta, risus nunc ac"),_("li",null,"Porttitor rhoncus a? Pulvinar, rhoncus nisi turpis est scelerisque dignissim dolor eros, nisi rhoncus, a, vel, enim integer!"),_("li",null,"Phasellus porta, risus nunc ac"))),_("li",null,"Phasellus porta, risus nunc ac")),_("hr",null)),_("div",null,_("h4",null,"Ordered (numbered) list <ol>"),_("ol",null,_("li",null,"Phasellus porta, risus nunc ac <li>"),_("li",null,"Porttitor rhoncus a? Pulvinar, rhoncus nisi turpis est scelerisque dignissim dolor eros, nisi rhoncus, a, vel, enim integer!"),_("li",null,"Phasellus porta, risus nunc ac",_("ol",null,_("li",null,"Phasellus porta, risus nunc ac"),_("li",null,"Phasellus porta, risus nunc ac"),_("li",null,"Porttitor rhoncus a? Pulvinar, rhoncus nisi turpis est scelerisque dignissim dolor eros, nisi rhoncus, a, vel, enim integer!"," "),_("li",null,"Phasellus porta, risus nunc ac"))),_("li",null,"Phasellus porta, risus nunc ac")),_("hr",null))),_(Z,null,_("div",null,_("h4",null,"Horizontal Rules"),_("p",null,"Lines designed for breaks between paragraphs of text."),_("h5",null,"Default:"),_("hr",null)),_("div",null,_("h4",null,"Blockquotes"),_("blockquote",null,"Longer form text quote with a source citation. Phasellus porta, risus nunc ac cras turpis duis rhoncus mus lundium rhoncus sed risus, velit lorem, habitasse placerat tempor a scelerisque, odio in nisi, eros sed tristique? Cum non? Tincidunt? Et ridiculus pid pulvinar parturient proin sed adipiscing non eros vel enim, nisi, adipiscing, phasellus arcu dolor sit mattis."," ",_("cite",null,"Person cited with a <cite> tag at the end of the blockquote")),_("hr",null))))},T=n.createElement,C=t.ZP.main.withConfig({componentId:"sc-1i7el38-0"})(["box-sizing:border-box;padding:1rem;"]),E=function(){var e={},l=r.Z.ModernV1,i=e.theme||"&lt; Unknown theme &gt;";return T(t.f6,{theme:l},T(s.Z,{siteData:e,pagePath:"style-guide.html"},T(n.Fragment,null,T(C,null,T("h1",null,"Style Guide"),T("p",null,"This is the living style guide for the theme"," ",T("strong",null,i),"."),T("hr",null),T(f,{colors:l.palette}),T("hr",null),T(q,{textures:u.default}),T("hr",null),T(N,null),T("hr",null)))))}},5261:function(e,l,i){(window.__NEXT_P=window.__NEXT_P||[]).push(["/styleGuide",function(){return i(86276)}])}},function(e){e.O(0,[734,3131,4153,3743,5273,2938,5211,3258,1875,8784,9306,2888,9774,179],(function(){return l=5261,e(e.s=l);var l}));var l=e.O();_N_E=l}]);