Patrones Índice de páginas
- Cómo pedimos información
- Cómo mostramos información
- Ayudar a resolver
- Páginas y flujos
- Cómo pedimos información
- Cómo mostramos información
- Ayudar a resolver
- Páginas y flujos
Volver atrás
Ayudar a navegar y encontrar
Regresar a la página anterior.
Mostrar código del ejemplo: includes/_pattern.acciones-de-pagina-boton-volver.njk
Contenido
Nunjucks macro del ejemplo: includes/_pattern.acciones-de-pagina-boton-volver.njk
{% from "components/button/_macro.button.njk" import componentButton %}
<div class="my-base">
{{ componentButton({
"html": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"self-center mr-2\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path d=\"M37.93 27.93l-35 35a10 10 0 000 14.14l35 35a10 10 0 1014.14-14.14L38.41 84.27A2.5 2.5 0 0140.18 80H130a10 10 0 000-20H40.18a2.5 2.5 0 01-1.77-4.27l13.66-13.66a10 10 0 00-14.14-14.14z\" fill=\"currentColor\"></path></svg>Volver",
"classes": "c-button--transparent",
"href": "#"
}) }}
</div>
HTML del ejemplo: includes/_pattern.acciones-de-pagina-boton-volver.njk
<div class="my-base">
<!-- button -->
<a href="#" draggable="false" class="c-button c-button--transparent">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em">
<path d="M37.93 27.93l-35 35a10 10 0 000 14.14l35 35a10 10 0 1014.14-14.14L38.41 84.27A2.5 2.5 0 0140.18 80H130a10 10 0 000-20H40.18a2.5 2.5 0 01-1.77-4.27l13.66-13.66a10 10 0 00-14.14-14.14z" fill="currentColor"></path>
</svg>Volver
</a>
<!-- /button -->
</div>
Ubicación #
- En la esquina superior izquierda, bajo la cabecera, con márgenes verticales de 16px.
- En móviles puede sustituir el menú lateral o las migas de pan.