{
    "componentChunkName": "component---src-templates-post-js",
    "path": "/pensieve/clickable-cards",
    "result": {"data":{"markdownRemark":{"html":"<p><a href=\"https://codepen.io/bchiang7/pen/xxRBvgd?editors=1100\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Codepen Demo</a></p>\n<p>Card layout where the card itself isn't an anchor link, but the whole card is clickable (with a <code class=\"language-text\">:before</code> pseudo element on the main <code class=\"language-text\">&lt;a></code>). Links inside of the card are still clickable.</p>\n<h2>CSS</h2>\n<div class=\"gatsby-highlight\" data-language=\"css\"><pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">.grid__item</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token selector\">&amp;:hover,\n  &amp;:focus-within</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token property\">background-color</span><span class=\"token punctuation\">:</span> #eee<span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token selector\">a</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token property\">position</span><span class=\"token punctuation\">:</span> relative<span class=\"token punctuation\">;</span>\n    <span class=\"token property\">z-index</span><span class=\"token punctuation\">:</span> 1<span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token selector\">h2</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token selector\">a</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token property\">position</span><span class=\"token punctuation\">:</span> static<span class=\"token punctuation\">;</span>\n\n      <span class=\"token selector\">&amp;:hover,\n      &amp;:focus</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token property\">color</span><span class=\"token punctuation\">:</span> blue<span class=\"token punctuation\">;</span>\n      <span class=\"token punctuation\">}</span>\n\n      <span class=\"token selector\">&amp;:before</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token property\">content</span><span class=\"token punctuation\">:</span> <span class=\"token string\">''</span><span class=\"token punctuation\">;</span>\n        <span class=\"token property\">display</span><span class=\"token punctuation\">:</span> block<span class=\"token punctuation\">;</span>\n        <span class=\"token property\">position</span><span class=\"token punctuation\">:</span> absolute<span class=\"token punctuation\">;</span>\n        <span class=\"token property\">z-index</span><span class=\"token punctuation\">:</span> 0<span class=\"token punctuation\">;</span>\n        <span class=\"token property\">width</span><span class=\"token punctuation\">:</span> 100%<span class=\"token punctuation\">;</span>\n        <span class=\"token property\">height</span><span class=\"token punctuation\">:</span> 100%<span class=\"token punctuation\">;</span>\n        <span class=\"token property\">top</span><span class=\"token punctuation\">:</span> 0<span class=\"token punctuation\">;</span>\n        <span class=\"token property\">left</span><span class=\"token punctuation\">:</span> 0<span class=\"token punctuation\">;</span>\n        <span class=\"token property\">transition</span><span class=\"token punctuation\">:</span> background-color 0.1s ease-out<span class=\"token punctuation\">;</span>\n        <span class=\"token property\">background-color</span><span class=\"token punctuation\">:</span> transparent<span class=\"token punctuation\">;</span>\n      <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>","frontmatter":{"title":"Accessible Clickable Cards","description":"Clickable cards with multiple child links","date":"2021-04-21T00:00:00.000Z","slug":"/pensieve/clickable-cards","tags":["Accessibility","CSS"]}}},"pageContext":{}},
    "staticQueryHashes": ["1994492073","2009693873","2031412112","3825832676"]}