{
    "componentChunkName": "component---src-templates-post-js",
    "path": "/publicaciones/clickable-cards",
    "result": {"data":{"markdownRemark":{"html":"<p><a href=\"https://codepen.io/bchiang7/pen/xxRBvgd?editors=1100\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Demo en Codepen</a></p>\n<p>Disposición de tarjeta donde la tarjeta en sí no es un enlace, pero toda la tarjeta es clicable (mediante un pseudo-elemento <code class=\"language-text\">:before</code> sobre el <code class=\"language-text\">&lt;a></code> principal). Los enlaces dentro de la tarjeta siguen siendo clicables.</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":"Tarjetas clicables y accesibles","description":"Tarjetas clicables con varios enlaces internos","date":"2021-04-21T00:00:00.000Z","slug":"/publicaciones/clickable-cards","tags":["Accesibilidad","CSS"]}}},"pageContext":{}},
    "staticQueryHashes": ["1866466693","1994492073","2009693873","2031412112","3825832676"]}