Card examples
Params
params:
- name: containerClasses
type: string
required: false
description: Classes that can be added to the inner container.
- name: classes
type: string
required: false
description: Classes to add to the card component.
- name: attributes
type: object
required: false
description: HTML attributes (for example data attributes) to add to the card component.
- name: caller
type: nunjucks-block
required: false
description: Content in the flexible content area. Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire media-object component in a `call` block.
- name: super
type: object
required: false
description: This is an area over the card content
- name: backgroundFullColor
type: string
required: true
description: The css color used in the background image that fills all the super area.
- name: backgroundFullUrl
type: string
required: false
description: Url used in the background image that fills all the super area.
- name: html
type: string
required: false
description: HTML to use inside the super area.
- name: classes
type: string
required: false
description: Classes to add to the super area.
- name: attributes
type: object
required: false
description: HTML attributes (for example data attributes) to add to the super area.
- name: sub
type: object
required: false
description: This is an area under the card content
- name: backgroundFullColor
type: string
required: true
description: The css color used in the background image that fills all the sub area.
- name: backgroundFullUrl
type: string
required: false
description: Url used in the background image that fills all the sub area.
- name: html
type: string
required: false
description: HTML to use inside the sub area.
- name: classes
type: string
required: false
description: Classes to add to the sub area.
- name: attributes
type: object
required: false
description: HTML attributes (for example data attributes) to add to the sub area.
- name: left
type: object
required: false
description: This is an area over the card content
- name: backgroundFullColor
type: string
required: true
description: The css color used in the background image that fills all the left area.
- name: backgroundFullUrl
type: string
required: false
description: Url used in the background image that fills all the left area.
- name: html
type: string
required: false
description: HTML to use inside the left area.
- name: classes
type: string
required: false
description: Classes to add to the left area.
- name: attributes
type: object
required: false
description: HTML attributes (for example data attributes) to add to the super area.
- name: right
type: object
required: false
description: This is an area under the card content
- name: backgroundFullColor
type: string
required: true
description: The css color used in the background image that fills all the right area.
- name: backgroundFullUrl
type: string
required: false
description: Url used in the background image that fills all the right area.
- name: html
type: string
required: false
description: HTML to use inside the right area.
- name: classes
type: string
required: false
description: Classes to add to the right area.
- name: attributes
type: object
required: false
description: HTML attributes (for example data attributes) to add to the right area.default
Título card
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.
Macro
{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #}
{% from "components/card/_macro.card.njk" import componentCard %}
{% call componentCard({
"classes": "lg:w-1/3",
"containerClasses": "p-base border border-neutral-base rounded",
"caller": " <h3 class=\"c-h3\"><a href=\"#\" class=\"c-link\">Título card</a></h3>\n <div class=\"prose max-w-none\">\n <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>\n </div>\n"
}) %}
<h3 class="c-h3"><a href="#" class="c-link">Título card</a></h3>
<div class="prose max-w-none">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
</div>
{% endcall %}Markup
<!-- card -->
<div class="lg:w-1/3">
<div class="p-base border border-neutral-base rounded">
<div class="flex">
<div>
<h3 class="c-h3"><a href="#" class="c-link">Título card</a></h3>
<div class="prose max-w-none">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
</div>
</div>
</div>
</div>
</div>
<!-- /card -->with icon
Título card
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.
Macro
{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #}
{% from "components/card/_macro.card.njk" import componentCard %}
{% call componentCard({
"classes": "lg:w-1/3",
"containerClasses": "p-base border border-neutral-base rounded",
"caller": " <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" width=\"1em\" height=\"1em\" class=\"w-6 h-6 lg:w-9 lg:h-9 mt-base mb-lg\" aria-hidden=\"true\" focusable=\"false\"><g transform=\"scale(2)\"><path d=\"M21.71 5.71 16.29.29a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7ZM20 21.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h10.25a.25.25 0 0 1 .25.25V5a2 2 0 0 0 2 2h2.75a.25.25 0 0 1 .25.25Z\" fill=\"currentColor\"></path><rect x=\"6.5\" y=\"10.5\" width=\"3\" height=\"2\" rx=\".5\" fill=\"currentColor\"></rect><rect x=\"6.5\" y=\"14\" width=\"3\" height=\"2\" rx=\".5\" fill=\"currentColor\"></rect><rect x=\"6.5\" y=\"17.5\" width=\"3\" height=\"2\" rx=\".5\" fill=\"currentColor\"></rect><rect x=\"11\" y=\"10.5\" width=\"6.5\" height=\"2\" rx=\".5\" fill=\"currentColor\"></rect><rect x=\"11\" y=\"14\" width=\"6.5\" height=\"2\" rx=\".5\" fill=\"currentColor\"></rect><rect x=\"11\" y=\"17.5\" width=\"6.5\" height=\"2\" rx=\".5\" fill=\"currentColor\"></rect></g></svg>\n <h3 id=\"titulo-card-1\" class=\"c-h3\">Título card</h3>\n <div class=\"prose max-w-none mb-base\">\n <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>\n </div>\n \n\n<!-- button --><a href=\"#\" role=\"button\" draggable=\"false\" class=\"c-button c-button--transparent\" id=\"boton-card-1\" aria-labelledby=\"boton-card-1 titulo-card-1\">\n Más <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"self-center ml-2\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path d=\"M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z\" fill=\"currentColor\"></path></svg>\n</a><!-- /button -->\n\n"
}) %}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-6 h-6 lg:w-9 lg:h-9 mt-base mb-lg" aria-hidden="true" focusable="false"><g transform="scale(2)"><path d="M21.71 5.71 16.29.29a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7ZM20 21.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h10.25a.25.25 0 0 1 .25.25V5a2 2 0 0 0 2 2h2.75a.25.25 0 0 1 .25.25Z" fill="currentColor"></path><rect x="6.5" y="10.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="14" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="17.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="10.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="14" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="17.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect></g></svg>
<h3 id="titulo-card-1" class="c-h3">Título card</h3>
<div class="prose max-w-none mb-base">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
</div>
<!-- button --><a href="#" role="button" draggable="false" class="c-button c-button--transparent" id="boton-card-1" aria-labelledby="boton-card-1 titulo-card-1">
Más <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"></path></svg>
</a><!-- /button -->
{% endcall %}Markup
<!-- card -->
<div class="lg:w-1/3">
<div class="p-base border border-neutral-base rounded">
<div class="flex">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-6 h-6 lg:w-9 lg:h-9 mt-base mb-lg" aria-hidden="true" focusable="false"><g transform="scale(2)"><path d="M21.71 5.71 16.29.29a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7ZM20 21.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h10.25a.25.25 0 0 1 .25.25V5a2 2 0 0 0 2 2h2.75a.25.25 0 0 1 .25.25Z" fill="currentColor"></path><rect x="6.5" y="10.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="14" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="17.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="10.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="14" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="17.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect></g></svg>
<h3 id="titulo-card-1" class="c-h3">Título card</h3>
<div class="prose max-w-none mb-base">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
</div>
<!-- button --><a href="#" role="button" draggable="false" class="c-button c-button--transparent" id="boton-card-1" aria-labelledby="boton-card-1 titulo-card-1">
Más <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"></path></svg>
</a><!-- /button -->
</div>
</div>
</div>
</div>
<!-- /card -->simple sidebar
Título card
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.
Macro
{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #}
{% from "components/card/_macro.card.njk" import componentCard %}
{% call componentCard({
"classes": "lg:w-1/3",
"containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
"caller": " <h3 id=\"titulo-card-1\" class=\"c-h3\">Título card</h3>\n <div class=\"prose max-w-none mb-base\">\n <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>\n </div>\n \n\n<!-- button --><a href=\"#\" role=\"button\" draggable=\"false\" class=\"c-button c-button--transparent\" id=\"boton-card-1\" aria-labelledby=\"boton-card-1 titulo-card-1\">\n Más <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"self-center ml-2\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path d=\"M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z\" fill=\"currentColor\"></path></svg>\n</a><!-- /button -->\n\n"
}) %}
<h3 id="titulo-card-1" class="c-h3">Título card</h3>
<div class="prose max-w-none mb-base">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
</div>
<!-- button --><a href="#" role="button" draggable="false" class="c-button c-button--transparent" id="boton-card-1" aria-labelledby="boton-card-1 titulo-card-1">
Más <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"></path></svg>
</a><!-- /button -->
{% endcall %}Markup
<!-- card -->
<div class="lg:w-1/3">
<div class="p-base bg-neutral-lighter border-t-8 border-neutral-dark">
<div class="flex">
<div>
<h3 id="titulo-card-1" class="c-h3">Título card</h3>
<div class="prose max-w-none mb-base">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
</div>
<!-- button --><a href="#" role="button" draggable="false" class="c-button c-button--transparent" id="boton-card-1" aria-labelledby="boton-card-1 titulo-card-1">
Más <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"></path></svg>
</a><!-- /button -->
</div>
</div>
</div>
</div>
<!-- /card -->with super
Título card
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.
Macro
{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #}
{% from "components/card/_macro.card.njk" import componentCard %}
{% call componentCard({
"classes": "lg:w-1/3",
"containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
"caller": " <h3 id=\"titulo-card-1\" class=\"c-h3\">Título card</h3>\n <div class=\"prose max-w-none mb-base\">\n <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>\n </div>\n \n\n<!-- button --><a href=\"#\" role=\"button\" draggable=\"false\" class=\"c-button c-button--transparent\" id=\"boton-card-1\" aria-labelledby=\"boton-card-1 titulo-card-1\">\n Más <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"self-center ml-2\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path d=\"M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z\" fill=\"currentColor\"></path></svg>\n</a><!-- /button -->\n\n",
"super": {
"backgroundFullColor": "transparent",
"backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
"classes": "h-60 -m-base mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
"attributes": {
"role": "img",
"aria-label": "Alt de la imagen"
}
}
}) %}
<h3 id="titulo-card-1" class="c-h3">Título card</h3>
<div class="prose max-w-none mb-base">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
</div>
<!-- button --><a href="#" role="button" draggable="false" class="c-button c-button--transparent" id="boton-card-1" aria-labelledby="boton-card-1 titulo-card-1">
Más <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"></path></svg>
</a><!-- /button -->
{% endcall %}Markup
<!-- card -->
<div class="lg:w-1/3">
<div class="p-base bg-neutral-lighter border-t-8 border-neutral-dark">
<div class="h-60 -m-base mb-base bg-cover bg-center bg-no-repeat overflow-hidden" style="background-color: transparent; background-image: url('https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen')" role="img" aria-label="Alt de la imagen">
</div>
<div class="flex">
<div>
<h3 id="titulo-card-1" class="c-h3">Título card</h3>
<div class="prose max-w-none mb-base">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
</div>
<!-- button --><a href="#" role="button" draggable="false" class="c-button c-button--transparent" id="boton-card-1" aria-labelledby="boton-card-1 titulo-card-1">
Más <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"></path></svg>
</a><!-- /button -->
</div>
</div>
</div>
</div>
<!-- /card -->with sub
Título card
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.
Macro
{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #}
{% from "components/card/_macro.card.njk" import componentCard %}
{% call componentCard({
"classes": "lg:w-1/3",
"containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
"caller": " <h3 id=\"titulo-card-1\" class=\"c-h3\">Título card</h3>\n <div class=\"prose max-w-none mb-base\">\n <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>\n </div>\n \n\n<!-- button --><a href=\"#\" role=\"button\" draggable=\"false\" class=\"c-button c-button--transparent\" id=\"boton-card-1\" aria-labelledby=\"boton-card-1 titulo-card-1\">\n Más <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"self-center ml-2\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path d=\"M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z\" fill=\"currentColor\"></path></svg>\n</a><!-- /button -->\n\n",
"sub": {
"backgroundFullColor": "transparent",
"backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
"classes": "h-60 -m-base mt-base bg-cover bg-center bg-no-repeat overflow-hidden",
"attributes": {
"role": "img",
"aria-label": "Alt de la imagen"
}
}
}) %}
<h3 id="titulo-card-1" class="c-h3">Título card</h3>
<div class="prose max-w-none mb-base">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
</div>
<!-- button --><a href="#" role="button" draggable="false" class="c-button c-button--transparent" id="boton-card-1" aria-labelledby="boton-card-1 titulo-card-1">
Más <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"></path></svg>
</a><!-- /button -->
{% endcall %}Markup
<!-- card -->
<div class="lg:w-1/3">
<div class="p-base bg-neutral-lighter border-t-8 border-neutral-dark">
<div class="flex">
<div>
<h3 id="titulo-card-1" class="c-h3">Título card</h3>
<div class="prose max-w-none mb-base">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
</div>
<!-- button --><a href="#" role="button" draggable="false" class="c-button c-button--transparent" id="boton-card-1" aria-labelledby="boton-card-1 titulo-card-1">
Más <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"></path></svg>
</a><!-- /button -->
</div>
</div>
<div class="h-60 -m-base mt-base bg-cover bg-center bg-no-repeat overflow-hidden" style="background-color: transparent; background-image: url('https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen')" role="img" aria-label="Alt de la imagen">
</div>
</div>
</div>
<!-- /card -->with img left in desktop
In mobile the img is in super area.
Título card
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.
Macro
{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #}
{% from "components/card/_macro.card.njk" import componentCard %}
{% call componentCard({
"classes": "lg:w-2/3",
"containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
"caller": " <h3 id=\"titulo-card-1\" class=\"c-h3\">Título card</h3>\n <div class=\"prose max-w-none mb-base\">\n <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>\n </div>\n \n\n<!-- button --><a href=\"#\" role=\"button\" draggable=\"false\" class=\"c-button c-button--transparent\" id=\"boton-card-1\" aria-labelledby=\"boton-card-1 titulo-card-1\">\n Más <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"self-center ml-2\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path d=\"M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z\" fill=\"currentColor\"></path></svg>\n</a><!-- /button -->\n\n",
"super": {
"backgroundFullColor": "transparent",
"backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
"classes": "lg:hidden h-60 -m-base mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
"attributes": {
"role": "img",
"aria-label": "Alt de la imagen"
}
},
"left": {
"backgroundFullColor": "transparent",
"backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
"classes": "hidden lg:block w-1/2 -m-base mr-base bg-cover bg-center bg-no-repeat overflow-hidden",
"attributes": {
"role": "img",
"aria-label": "Alt de la imagen"
}
}
}) %}
<h3 id="titulo-card-1" class="c-h3">Título card</h3>
<div class="prose max-w-none mb-base">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
</div>
<!-- button --><a href="#" role="button" draggable="false" class="c-button c-button--transparent" id="boton-card-1" aria-labelledby="boton-card-1 titulo-card-1">
Más <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"></path></svg>
</a><!-- /button -->
{% endcall %}Markup
<!-- card -->
<div class="lg:w-2/3">
<div class="p-base bg-neutral-lighter border-t-8 border-neutral-dark">
<div class="lg:hidden h-60 -m-base mb-base bg-cover bg-center bg-no-repeat overflow-hidden" style="background-color: transparent; background-image: url('https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen')" role="img" aria-label="Alt de la imagen">
</div>
<div class="flex">
<div class="hidden lg:block w-1/2 -m-base mr-base bg-cover bg-center bg-no-repeat overflow-hidden" style="background-color: transparent; background-image: url('https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen')" role="img" aria-label="Alt de la imagen">
</div>
<div class="flex-1">
<h3 id="titulo-card-1" class="c-h3">Título card</h3>
<div class="prose max-w-none mb-base">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
</div>
<!-- button --><a href="#" role="button" draggable="false" class="c-button c-button--transparent" id="boton-card-1" aria-labelledby="boton-card-1 titulo-card-1">
Más <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"></path></svg>
</a><!-- /button -->
</div>
</div>
</div>
</div>
<!-- /card -->with img right in desktop
In mobile the img is in super area.
Título card
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.
Macro
{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #}
{% from "components/card/_macro.card.njk" import componentCard %}
{% call componentCard({
"classes": "lg:w-2/3",
"containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
"caller": " <h3 id=\"titulo-card-1\" class=\"c-h3\">Título card</h3>\n <div class=\"prose max-w-none mb-base\">\n <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>\n </div>\n \n\n<!-- button --><a href=\"#\" role=\"button\" draggable=\"false\" class=\"c-button c-button--transparent\" id=\"boton-card-1\" aria-labelledby=\"boton-card-1 titulo-card-1\">\n Más <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"self-center ml-2\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path d=\"M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z\" fill=\"currentColor\"></path></svg>\n</a><!-- /button -->\n\n",
"super": {
"backgroundFullColor": "transparent",
"backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
"classes": "lg:hidden h-60 -m-base mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
"attributes": {
"role": "img",
"aria-label": "Alt de la imagen"
}
},
"right": {
"backgroundFullColor": "transparent",
"backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
"classes": "hidden lg:block w-1/2 -m-base ml-base bg-cover bg-center bg-no-repeat overflow-hidden",
"attributes": {
"role": "img",
"aria-label": "Alt de la imagen"
}
}
}) %}
<h3 id="titulo-card-1" class="c-h3">Título card</h3>
<div class="prose max-w-none mb-base">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
</div>
<!-- button --><a href="#" role="button" draggable="false" class="c-button c-button--transparent" id="boton-card-1" aria-labelledby="boton-card-1 titulo-card-1">
Más <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"></path></svg>
</a><!-- /button -->
{% endcall %}Markup
<!-- card -->
<div class="lg:w-2/3">
<div class="p-base bg-neutral-lighter border-t-8 border-neutral-dark">
<div class="lg:hidden h-60 -m-base mb-base bg-cover bg-center bg-no-repeat overflow-hidden" style="background-color: transparent; background-image: url('https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen')" role="img" aria-label="Alt de la imagen">
</div>
<div class="flex">
<div class="flex-1">
<h3 id="titulo-card-1" class="c-h3">Título card</h3>
<div class="prose max-w-none mb-base">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
</div>
<!-- button --><a href="#" role="button" draggable="false" class="c-button c-button--transparent" id="boton-card-1" aria-labelledby="boton-card-1 titulo-card-1">
Más <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"></path></svg>
</a><!-- /button -->
</div>
<div class="hidden lg:block w-1/2 -m-base ml-base bg-cover bg-center bg-no-repeat overflow-hidden" style="background-color: transparent; background-image: url('https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen')" role="img" aria-label="Alt de la imagen">
</div>
</div>
</div>
</div>
<!-- /card -->home block without padding
Tus datos médicos e información personal
Macro
{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #}
{% from "components/card/_macro.card.njk" import componentCard %}
{% call componentCard({
"classes": "lg:w-1/2",
"containerClasses": "py-lg border-t-8 border-neutral-dark",
"caller": " <h2 class=\"c-h1\">Tus datos médicos e información personal</h2>\n <ul class=\"text-lg\">\n <li class=\"mb-base\"><a href=\"#\" class=\"c-link\">Cambiar tus datos de contacto</a></li>\n <li class=\"mb-base\"><a href=\"#\" class=\"c-link\">Dónde y cómo solicitar tu PIN Salud</a></li>\n <li class=\"mb-base\"><a href=\"#\" class=\"c-link\">Cómo solicitar un cambio de centro de salud</a></li>\n <li class=\"mb-base\"><a href=\"#\" class=\"c-link\">Historia Clínica e informes médicos</a></li>\n <li class=\"mb-base\"><a href=\"#\" class=\"c-link\">Derechos de protección de datos</a></li>\n </ul>\n"
}) %}
<h2 class="c-h1">Tus datos médicos e información personal</h2>
<ul class="text-lg">
<li class="mb-base"><a href="#" class="c-link">Cambiar tus datos de contacto</a></li>
<li class="mb-base"><a href="#" class="c-link">Dónde y cómo solicitar tu PIN Salud</a></li>
<li class="mb-base"><a href="#" class="c-link">Cómo solicitar un cambio de centro de salud</a></li>
<li class="mb-base"><a href="#" class="c-link">Historia Clínica e informes médicos</a></li>
<li class="mb-base"><a href="#" class="c-link">Derechos de protección de datos</a></li>
</ul>
{% endcall %}Markup
<!-- card -->
<div class="lg:w-1/2">
<div class="py-lg border-t-8 border-neutral-dark">
<div class="flex">
<div>
<h2 class="c-h1">Tus datos médicos e información personal</h2>
<ul class="text-lg">
<li class="mb-base"><a href="#" class="c-link">Cambiar tus datos de contacto</a></li>
<li class="mb-base"><a href="#" class="c-link">Dónde y cómo solicitar tu PIN Salud</a></li>
<li class="mb-base"><a href="#" class="c-link">Cómo solicitar un cambio de centro de salud</a></li>
<li class="mb-base"><a href="#" class="c-link">Historia Clínica e informes médicos</a></li>
<li class="mb-base"><a href="#" class="c-link">Derechos de protección de datos</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- /card -->home block with buttons
Tu área personal
En tu área personal puedes pedir cita con tu médico/a, consultar tu historia clínica y encontrar una selección de contenidos y servicios de salud para ti. Accede de forma segura desde cualquier lugar y en cualquier momento, desde tu móvil u ordenador.
Macro
{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #}
{% from "components/card/_macro.card.njk" import componentCard %}
{% call componentCard({
"containerClasses": "p-lg bg-neutral-lighter border-t-8 border-neutral-dark",
"caller": " <h2 class=\"c-h1\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" width=\"1em\" height=\"1em\" class=\"inline-block align-middle lg:w-9 lg:h-9 mr-base\" aria-hidden=\"true\" focusable=\"false\"><g transform=\"scale(2)\"><path d=\"M21.71 5.71 16.29.29a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7ZM20 21.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h10.25a.25.25 0 0 1 .25.25V5a2 2 0 0 0 2 2h2.75a.25.25 0 0 1 .25.25Z\" fill=\"currentColor\"></path><rect x=\"6.5\" y=\"10.5\" width=\"3\" height=\"2\" rx=\".5\" fill=\"currentColor\"></rect><rect x=\"6.5\" y=\"14\" width=\"3\" height=\"2\" rx=\".5\" fill=\"currentColor\"></rect><rect x=\"6.5\" y=\"17.5\" width=\"3\" height=\"2\" rx=\".5\" fill=\"currentColor\"></rect><rect x=\"11\" y=\"10.5\" width=\"6.5\" height=\"2\" rx=\".5\" fill=\"currentColor\"></rect><rect x=\"11\" y=\"14\" width=\"6.5\" height=\"2\" rx=\".5\" fill=\"currentColor\"></rect><rect x=\"11\" y=\"17.5\" width=\"6.5\" height=\"2\" rx=\".5\" fill=\"currentColor\"></rect></g></svg>Tu área personal</h2>\n <p class=\"c-paragraph-base mb-lg\">En tu área personal puedes pedir cita con tu médico/a, consultar tu historia clínica y encontrar una selección de contenidos y servicios de salud para ti. Accede de forma segura desde cualquier lugar y en cualquier momento, desde tu móvil u ordenador.</p>\n <ul class=\"flex flex-wrap gap-base\">\n <li>\n \n\n<!-- button --><button class=\"c-button c-button--primary\" >\n Acceder a Tu área personal\n</button><!-- /button -->\n </li>\n <li>\n \n\n<!-- button --><button class=\"c-button\" >\n Descargar la app\n</button><!-- /button -->\n </li>\n </ul>\n",
"super": {
"backgroundFullColor": "transparent",
"backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.png&text=Imagen",
"classes": "lg:hidden h-72 -m-lg mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
"attributes": {
"role": "img",
"aria-label": "Alt de la imagen"
}
},
"right": {
"backgroundFullColor": "transparent",
"backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
"classes": "hidden lg:block w-1/2 h-96 -m-lg ml-xl bg-cover bg-center bg-no-repeat overflow-hidden",
"attributes": {
"role": "img",
"aria-label": "Alt de la imagen"
}
}
}) %}
<h2 class="c-h1"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="inline-block align-middle lg:w-9 lg:h-9 mr-base" aria-hidden="true" focusable="false"><g transform="scale(2)"><path d="M21.71 5.71 16.29.29a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7ZM20 21.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h10.25a.25.25 0 0 1 .25.25V5a2 2 0 0 0 2 2h2.75a.25.25 0 0 1 .25.25Z" fill="currentColor"></path><rect x="6.5" y="10.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="14" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="17.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="10.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="14" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="17.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect></g></svg>Tu área personal</h2>
<p class="c-paragraph-base mb-lg">En tu área personal puedes pedir cita con tu médico/a, consultar tu historia clínica y encontrar una selección de contenidos y servicios de salud para ti. Accede de forma segura desde cualquier lugar y en cualquier momento, desde tu móvil u ordenador.</p>
<ul class="flex flex-wrap gap-base">
<li>
<!-- button --><button class="c-button c-button--primary" >
Acceder a Tu área personal
</button><!-- /button -->
</li>
<li>
<!-- button --><button class="c-button" >
Descargar la app
</button><!-- /button -->
</li>
</ul>
{% endcall %}Markup
<!-- card -->
<div>
<div class="p-lg bg-neutral-lighter border-t-8 border-neutral-dark">
<div class="lg:hidden h-72 -m-lg mb-base bg-cover bg-center bg-no-repeat overflow-hidden" style="background-color: transparent; background-image: url('https://dummyimage.com/320x240/92949b/fff.png&text=Imagen')" role="img" aria-label="Alt de la imagen">
</div>
<div class="flex">
<div class="flex-1">
<h2 class="c-h1"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="inline-block align-middle lg:w-9 lg:h-9 mr-base" aria-hidden="true" focusable="false"><g transform="scale(2)"><path d="M21.71 5.71 16.29.29a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7ZM20 21.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h10.25a.25.25 0 0 1 .25.25V5a2 2 0 0 0 2 2h2.75a.25.25 0 0 1 .25.25Z" fill="currentColor"></path><rect x="6.5" y="10.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="14" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="17.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="10.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="14" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="17.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect></g></svg>Tu área personal</h2>
<p class="c-paragraph-base mb-lg">En tu área personal puedes pedir cita con tu médico/a, consultar tu historia clínica y encontrar una selección de contenidos y servicios de salud para ti. Accede de forma segura desde cualquier lugar y en cualquier momento, desde tu móvil u ordenador.</p>
<ul class="flex flex-wrap gap-base">
<li>
<!-- button --><button class="c-button c-button--primary" >
Acceder a Tu área personal
</button><!-- /button -->
</li>
<li>
<!-- button --><button class="c-button" >
Descargar la app
</button><!-- /button -->
</li>
</ul>
</div>
<div class="hidden lg:block w-1/2 h-96 -m-lg ml-xl bg-cover bg-center bg-no-repeat overflow-hidden" style="background-color: transparent; background-image: url('https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen')" role="img" aria-label="Alt de la imagen">
</div>
</div>
</div>
</div>
<!-- /card -->items in list
Image with fixed dimensions in desktop, text flexible.
18 octubre 2022
Título de noticia
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.
Macro
{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #}
{% from "components/card/_macro.card.njk" import componentCard %}
{% call componentCard({
"classes": "lg:w-3/4",
"containerClasses": "p-lg bg-neutral-lighter",
"caller": " <p class=\"c-paragraph-sm mb-base\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" height=\"1em\" width=\"1em\" class=\"inline-block align-middle w-6 h-6 mr-xs\"><g><path d=\"M7.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z\" fill=\"currentColor\"></path><path d=\"M12.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z\" fill=\"currentColor\"></path><path d=\"M17.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z\" fill=\"currentColor\"></path><path d=\"M7.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z\" fill=\"currentColor\"></path><path d=\"M12.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z\" fill=\"currentColor\"></path><path d=\"M17.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z\" fill=\"currentColor\"></path><path d=\"M7.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z\" fill=\"currentColor\"></path><path d=\"M12.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z\" fill=\"currentColor\"></path><path d=\"M17.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z\" fill=\"currentColor\"></path><path d=\"M21.5,3H18.75a.25.25,0,0,1-.25-.25V1a1,1,0,0,0-2,0V5.75a.75.75,0,0,1-1.5,0V3.5a.5.5,0,0,0-.5-.5H8.25A.25.25,0,0,1,8,2.75V1A1,1,0,0,0,6,1V5.75a.75.75,0,0,1-1.5,0V3.5A.5.5,0,0,0,4,3H2.5a2,2,0,0,0-2,2V22a2,2,0,0,0,2,2h19a2,2,0,0,0,2-2V5A2,2,0,0,0,21.5,3Zm0,18.5a.5.5,0,0,1-.5.5H3a.5.5,0,0,1-.5-.5V9.5A.5.5,0,0,1,3,9H21a.5.5,0,0,1,.5.5Z\" fill=\"currentColor\"></path></g></svg>\n <strong>18 octubre 2022</strong>\n </p>\n <h3 id=\"titulo-card-1\" class=\"c-h3\">Título de noticia</h3>\n <div class=\"prose max-w-none mb-base\">\n <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>\n </div>\n \n\n<!-- button --><a href=\"#\" role=\"button\" draggable=\"false\" class=\"c-button c-button--transparent\" id=\"boton-card-1\" aria-labelledby=\"boton-card-1 titulo-card-1\">\n Ver detalle <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"self-center ml-2\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path d=\"M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z\" fill=\"currentColor\"></path></svg>\n</a><!-- /button -->\n\n",
"super": {
"backgroundFullColor": "transparent",
"backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
"classes": "lg:hidden h-56 -m-lg mb-base bg-cover bg-center bg-no-repeat overflow-hidden",
"attributes": {
"role": "img",
"aria-label": "Alt de la imagen"
}
},
"left": {
"backgroundFullColor": "transparent",
"backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
"classes": "hidden lg:block w-72 -m-lg mr-lg bg-cover bg-center bg-no-repeat overflow-hidden",
"attributes": {
"role": "img",
"aria-label": "Alt de la imagen"
}
}
}) %}
<p class="c-paragraph-sm mb-base">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1em" width="1em" class="inline-block align-middle w-6 h-6 mr-xs"><g><path d="M7.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M12.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M17.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M7.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M12.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M17.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M7.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M12.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M17.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M21.5,3H18.75a.25.25,0,0,1-.25-.25V1a1,1,0,0,0-2,0V5.75a.75.75,0,0,1-1.5,0V3.5a.5.5,0,0,0-.5-.5H8.25A.25.25,0,0,1,8,2.75V1A1,1,0,0,0,6,1V5.75a.75.75,0,0,1-1.5,0V3.5A.5.5,0,0,0,4,3H2.5a2,2,0,0,0-2,2V22a2,2,0,0,0,2,2h19a2,2,0,0,0,2-2V5A2,2,0,0,0,21.5,3Zm0,18.5a.5.5,0,0,1-.5.5H3a.5.5,0,0,1-.5-.5V9.5A.5.5,0,0,1,3,9H21a.5.5,0,0,1,.5.5Z" fill="currentColor"></path></g></svg>
<strong>18 octubre 2022</strong>
</p>
<h3 id="titulo-card-1" class="c-h3">Título de noticia</h3>
<div class="prose max-w-none mb-base">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
</div>
<!-- button --><a href="#" role="button" draggable="false" class="c-button c-button--transparent" id="boton-card-1" aria-labelledby="boton-card-1 titulo-card-1">
Ver detalle <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"></path></svg>
</a><!-- /button -->
{% endcall %}Markup
<!-- card -->
<div class="lg:w-3/4">
<div class="p-lg bg-neutral-lighter">
<div class="lg:hidden h-56 -m-lg mb-base bg-cover bg-center bg-no-repeat overflow-hidden" style="background-color: transparent; background-image: url('https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen')" role="img" aria-label="Alt de la imagen">
</div>
<div class="flex">
<div class="hidden lg:block w-72 -m-lg mr-lg bg-cover bg-center bg-no-repeat overflow-hidden" style="background-color: transparent; background-image: url('https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen')" role="img" aria-label="Alt de la imagen">
</div>
<div class="flex-1">
<p class="c-paragraph-sm mb-base">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1em" width="1em" class="inline-block align-middle w-6 h-6 mr-xs"><g><path d="M7.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M12.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M17.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M7.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M12.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M17.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M7.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M12.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M17.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M21.5,3H18.75a.25.25,0,0,1-.25-.25V1a1,1,0,0,0-2,0V5.75a.75.75,0,0,1-1.5,0V3.5a.5.5,0,0,0-.5-.5H8.25A.25.25,0,0,1,8,2.75V1A1,1,0,0,0,6,1V5.75a.75.75,0,0,1-1.5,0V3.5A.5.5,0,0,0,4,3H2.5a2,2,0,0,0-2,2V22a2,2,0,0,0,2,2h19a2,2,0,0,0,2-2V5A2,2,0,0,0,21.5,3Zm0,18.5a.5.5,0,0,1-.5.5H3a.5.5,0,0,1-.5-.5V9.5A.5.5,0,0,1,3,9H21a.5.5,0,0,1,.5.5Z" fill="currentColor"></path></g></svg>
<strong>18 octubre 2022</strong>
</p>
<h3 id="titulo-card-1" class="c-h3">Título de noticia</h3>
<div class="prose max-w-none mb-base">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
</div>
<!-- button --><a href="#" role="button" draggable="false" class="c-button c-button--transparent" id="boton-card-1" aria-labelledby="boton-card-1 titulo-card-1">
Ver detalle <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"></path></svg>
</a><!-- /button -->
</div>
</div>
</div>
</div>
<!-- /card -->home mini block with icon
Título card
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.
Macro
{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #}
{% from "components/card/_macro.card.njk" import componentCard %}
{% call componentCard({
"classes": "lg:w-1/4",
"containerClasses": "p-base bg-neutral-lighter",
"caller": " <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" width=\"1em\" height=\"1em\" class=\"w-6 h-6 lg:w-9 lg:h-9 mt-base mb-lg\" aria-hidden=\"true\" focusable=\"false\"><g transform=\"scale(2)\"><path d=\"M21.71 5.71 16.29.29a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7ZM20 21.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h10.25a.25.25 0 0 1 .25.25V5a2 2 0 0 0 2 2h2.75a.25.25 0 0 1 .25.25Z\" fill=\"currentColor\"></path><rect x=\"6.5\" y=\"10.5\" width=\"3\" height=\"2\" rx=\".5\" fill=\"currentColor\"></rect><rect x=\"6.5\" y=\"14\" width=\"3\" height=\"2\" rx=\".5\" fill=\"currentColor\"></rect><rect x=\"6.5\" y=\"17.5\" width=\"3\" height=\"2\" rx=\".5\" fill=\"currentColor\"></rect><rect x=\"11\" y=\"10.5\" width=\"6.5\" height=\"2\" rx=\".5\" fill=\"currentColor\"></rect><rect x=\"11\" y=\"14\" width=\"6.5\" height=\"2\" rx=\".5\" fill=\"currentColor\"></rect><rect x=\"11\" y=\"17.5\" width=\"6.5\" height=\"2\" rx=\".5\" fill=\"currentColor\"></rect></g></svg>\n <h3 id=\"titulo-card-1\" class=\"c-h3\">Título card</h3>\n <div class=\"prose max-w-none mb-base\">\n <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>\n </div>\n \n\n<!-- button --><a href=\"#\" role=\"button\" draggable=\"false\" class=\"c-button c-button--transparent\" id=\"boton-card-1\" aria-labelledby=\"boton-card-1 titulo-card-1\">\n Más <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"self-center ml-2\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path d=\"M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z\" fill=\"currentColor\"></path></svg>\n</a><!-- /button -->\n\n"
}) %}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-6 h-6 lg:w-9 lg:h-9 mt-base mb-lg" aria-hidden="true" focusable="false"><g transform="scale(2)"><path d="M21.71 5.71 16.29.29a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7ZM20 21.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h10.25a.25.25 0 0 1 .25.25V5a2 2 0 0 0 2 2h2.75a.25.25 0 0 1 .25.25Z" fill="currentColor"></path><rect x="6.5" y="10.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="14" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="17.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="10.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="14" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="17.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect></g></svg>
<h3 id="titulo-card-1" class="c-h3">Título card</h3>
<div class="prose max-w-none mb-base">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
</div>
<!-- button --><a href="#" role="button" draggable="false" class="c-button c-button--transparent" id="boton-card-1" aria-labelledby="boton-card-1 titulo-card-1">
Más <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"></path></svg>
</a><!-- /button -->
{% endcall %}Markup
<!-- card -->
<div class="lg:w-1/4">
<div class="p-base bg-neutral-lighter">
<div class="flex">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-6 h-6 lg:w-9 lg:h-9 mt-base mb-lg" aria-hidden="true" focusable="false"><g transform="scale(2)"><path d="M21.71 5.71 16.29.29a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7ZM20 21.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h10.25a.25.25 0 0 1 .25.25V5a2 2 0 0 0 2 2h2.75a.25.25 0 0 1 .25.25Z" fill="currentColor"></path><rect x="6.5" y="10.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="14" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="17.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="10.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="14" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="17.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect></g></svg>
<h3 id="titulo-card-1" class="c-h3">Título card</h3>
<div class="prose max-w-none mb-base">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
</div>
<!-- button --><a href="#" role="button" draggable="false" class="c-button c-button--transparent" id="boton-card-1" aria-labelledby="boton-card-1 titulo-card-1">
Más <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"></path></svg>
</a><!-- /button -->
</div>
</div>
</div>
</div>
<!-- /card -->