"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[984],{5593:function(n,t,e){e.r(t),e.d(t,{_frontmatter:function(){return o},default:function(){return l}});var a=e(31461),i=(e(2784),e(94099)),s=["components"],o={name:"Header A5",component:"header"},r={_frontmatter:o};function l(n){var t=n.components,e=(0,a.Z)(n,s);return(0,i.kt)("wrapper",Object.assign({},r,e,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("h1",{id:"header-a5"},"Header A5"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-jsx",metastring:"live",live:!0},"<header\n  sx={{\n    py: 4,\n    variant: 'styles.header',\n  }}>\n  <div\n    sx={{\n      display: 'flex',\n      justifyContent: 'center',\n      mb: 3,\n    }}>\n    <Link to=\"/\" title=\"Home\">\n      <img\n        alt=\"UI Logo\"\n        src=\"https://contrast.now.sh/cff/40f?size=48&fontSize=2&baseline=2&fontWeight=900&radius=32&text=UI\"\n      />\n      <span\n        sx={{\n          position: 'absolute',\n          width: 1,\n          height: 1,\n          overflow: 'hidden',\n          top: -9999,\n        }}>\n        Home\n      </span>\n    </Link>\n  </div>\n  <div\n    sx={{\n      display: 'flex',\n      justifyContent: 'center',\n    }}>\n    <Link\n      to=\"/work\"\n      sx={{\n        variant: 'styles.navlink',\n        p: 2,\n      }}>\n      Work\n    </Link>\n    <Link\n      to=\"/blog\"\n      sx={{\n        variant: 'styles.navlink',\n        p: 2,\n      }}>\n      Blog\n    </Link>\n    <Link\n      to=\"/about\"\n      sx={{\n        variant: 'styles.navlink',\n        p: 2,\n      }}>\n      About\n    </Link>\n    <Link\n      to=\"/contact\"\n      sx={{\n        variant: 'styles.navlink',\n        p: 2,\n      }}>\n      Contact\n    </Link>\n  </div>\n</header>\n")))}l.isMDXComponent=!0}}]);
//# sourceMappingURL=component---src-pages-recipes-header-a-5-mdx-9752ccf511169e4ef008.js.map