<!doctype html>
<html lang="es">
<!-- generated by metro-digital-design-system-demo@0.1.0 -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
USWDS documento de ejemplo Fractal
</title>
<link rel="stylesheet" href="../../../dist/css/styles.css">
<script src="../../../dist/js/uswds-init.min.js"></script>
</head>
<body>
<a class="usa-skipnav" href="#main-content">
Saltar al contenido principal
</a>
<section class="usa-banner" aria-label="Un sitio oficial del Gobierno de Estados Unidos">
<div class="usa-accordion">
<header class="usa-banner__header">
<div class="usa-banner__inner">
<div class="grid-col-auto">
<img class="usa-banner__header-flag" src="../../../dist/img/us_flag_small.png" alt="U.S. flag">
</div>
<div class="grid-col-fill tablet:grid-col-auto">
<p class="usa-banner__header-text">Un sitio oficial del Gobierno de Estados Unidos</p>
<p class="usa-banner__header-action" aria-hidden="true">Así es como usted puede verificarlo</p>
</div>
<button class="usa-accordion__button usa-banner__button" aria-expanded="false" aria-controls="gov-banner">
<span class="usa-banner__button-text">Así es como usted puede verificarlo</span>
</button>
</div>
</header>
<div class="usa-banner__content usa-accordion__content" id="gov-banner">
<div class="grid-row grid-gap-lg">
<div class="usa-banner__guidance tablet:grid-col-6">
<img class="usa-banner__icon usa-media-block__img" src="../../../dist/img/icon-dot-gov.svg" role="img" alt="" aria-hidden="true">
<div class="usa-media-block__body">
<p>
<strong>
Los sitios web oficiales usan .gov
</strong>
<br />
Un sitio web <strong>.gov</strong> pertenece a una organización oficial del Gobierno de Estados Unidos.
</p>
</div>
</div>
<div class="usa-banner__guidance tablet:grid-col-6">
<img class="usa-banner__icon usa-media-block__img" src="../../../dist/img/icon-https.svg" role="img" alt="" aria-hidden="true">
<div class="usa-media-block__body">
<p>
<strong>
Los sitios web seguros .gov usan HTTPS
</strong>
<br />
Un <strong>candado</strong> (
<span class="icon-lock"><svg xmlns="http://www.w3.org/2000/svg" width="52" height="64" viewBox="0 0 52 64" class="usa-banner__lock-image" role="img" aria-labelledby="banner-lock-title banner-lock-description" focusable="false">
<title id="banner-lock-title">Lock</title>
<desc id="banner-lock-description">A locked padlock</desc>
<path fill="#000000" fill-rule="evenodd" d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z" />
</svg></span>
) o <strong>https://</strong> significa que usted se conectó de forma segura a un sitio web .gov. Comparta información sensible sólo en sitios web oficiales y seguros.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="usa-overlay"></div>
<header class="usa-header usa-header--basic usa-header--megamenu">
<div class="usa-nav-container">
<div class="usa-navbar">
<div class="usa-logo" id="basico-mega-logo">
<em class="usa-logo__text">
<a href="javascript:void(0)" title="<Project title>">
<Project title>
</a>
</em>
</div>
<button class="usa-menu-btn">Menú</button>
</div>
<nav aria-label="Primary navigation" class="usa-nav">
<button class="usa-nav__close">
<img src="../../../dist/img/usa-icons/close.svg" role="img" alt="Cerrar">
</button>
<ul class="usa-nav__primary usa-accordion">
<li class="usa-nav__primary-item">
<button class="usa-accordion__button usa-nav__link usa-current" aria-expanded="false" aria-controls="basico-mega-nav-section-one">
<span><Current section></span>
</button>
<div id="basico-mega-nav-section-one" class="usa-nav__submenu usa-megamenu">
<div class="grid-row grid-gap-4">
<div class="usa-col">
<ul class="usa-nav__submenu-list">
<li class="usa-nav__submenu-item">
<a href="#">
<Navigation link>
</a>
</li>
<li class="usa-nav__submenu-item">
<a href="#">
<Navigation link>
</a>
</li>
<li class="usa-nav__submenu-item">
<a href="#">
<Navigation link>
</a>
</li>
</ul>
</div>
<div class="usa-col">
<ul class="usa-nav__submenu-list">
<li class="usa-nav__submenu-item">
<a href="#">
<Navigation link>
</a>
</li>
<li class="usa-nav__submenu-item">
<a href="#">
<A very long navigation link that goes onto two lines>
</a>
</li>
<li class="usa-nav__submenu-item">
<a href="#">
<Navigation link>
</a>
</li>
</ul>
</div>
<div class="usa-col">
<ul class="usa-nav__submenu-list">
<li class="usa-nav__submenu-item">
<a href="#">
<Navigation link>
</a>
</li>
<li class="usa-nav__submenu-item">
<a href="#">
<Navigation link>
</a>
</li>
<li class="usa-nav__submenu-item">
<a href="#">
<Navigation link>
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="usa-nav__primary-item">
<button class="usa-accordion__button usa-nav__link" aria-expanded="false" aria-controls="basico-mega-nav-section-two">
<span><Section></span>
</button>
<div id="basico-mega-nav-section-two" class="usa-nav__submenu usa-megamenu">
<div class="grid-row grid-gap-4">
<div class="usa-col">
<ul class="usa-nav__submenu-list">
<li class="usa-nav__submenu-item">
<a href="#">
<Navigation link>
</a>
</li>
<li class="usa-nav__submenu-item">
<a href="#">
<Navigation link>
</a>
</li>
<li class="usa-nav__submenu-item">
<a href="#">
<Navigation link>
</a>
</li>
</ul>
</div>
<div class="usa-col">
<ul class="usa-nav__submenu-list">
<li class="usa-nav__submenu-item">
<a href="#">
<Navigation link>
</a>
</li>
<li class="usa-nav__submenu-item">
<a href="#">
<A very long navigation link that goes onto two lines>
</a>
</li>
<li class="usa-nav__submenu-item">
<a href="#">
<Navigation link>
</a>
</li>
</ul>
</div>
<div class="usa-col">
<ul class="usa-nav__submenu-list">
<li class="usa-nav__submenu-item">
<a href="#">
<Navigation link>
</a>
</li>
<li class="usa-nav__submenu-item">
<a href="#">
<Navigation link>
</a>
</li>
<li class="usa-nav__submenu-item">
<a href="#">
<Navigation link>
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="usa-nav__primary-item">
<a href="javascript:void(0)" class="usa-nav__link">
<span><Simple link></span>
</a>
</li>
</ul>
<form class="usa-search usa-search--small" role="search">
<label class="usa-sr-only" for="basico-mega-search-field-es-small">
Buscar
</label>
<input class="usa-input" id="basico-mega-search-field-es-small" type="search" name="search">
<button class="usa-button" type="submit">
<span class="usa-sr-only">Buscar</span>
</button>
</form>
</nav>
</div>
</header>
<div class="usa-section">
<div class="grid-container">
<div class="grid-row grid-gap">
<main class="" id="main-content">
<div class="usa-prose">
<!-- This template can be used for most types of error pages -->
<!-- Remove these comments when you build your error pages -->
<!-- Describe the error in the main heading -->
<h1>No se encontró esta página</h1>
<!-- Explain what caused the error in the lead text -->
<p class="usa-intro">Lo sentimos, pero no podemos encontrar la página que busca. Es posible que haya sido eliminada, cambiado de nombre o no esté disponible por ahora.
</p>
<!-- Provide instructions how the user can address or fix the error -->
<p>Si escribió el URL a mano, verifique su ortografía y el uso de mayúsculas. Nuestros URLs aparecen así: <strong><agency.gov/example-one></strong>.</p>
<p>Visite nuestra página principal para encontrar herramientas y recursos útiles o contáctenos y lo ayudaremos a encontrar lo que busca.</p>
<!-- Use buttons for main actions user can take, such as visiting the homepage or a contact page -->
<div class="margin-y-5">
<ul class="usa-button-group">
<li class="usa-button-group__item">
<a href="javascript:void();" class="usa-button">
Visite la página principal
</a>
</li>
<li class="usa-button-group__item">
<button class="usa-button usa-button--outline" type="button">
Contáctenos
</button>
</li>
</ul>
</div>
<!-- List additional support channels -->
<p>Para ayuda inmediata:</p>
<ul>
<li>
<a href="javascript:void();" class="usa-link">Chatee con nosotros</a>
</li>
<li>
Llámenos al <a href="javascript:void();" class="usa-link">(555) 555-GOVT</a>
</li>
</ul>
<!-- Error code if appropriate -->
<p class="text-base"><strong>Código de error:</strong> 404</p>
</div>
</main>
</div>
</div>
</div>
<footer class="usa-footer">
<div class="grid-container usa-footer__return-to-top">
<a href="#">Subir</a>
</div>
<div class="usa-footer__primary-section">
<nav class="usa-footer__nav" aria-label="Footer navigation">
<ul class="grid-row grid-gap">
<li class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content">
<a class="usa-footer__primary-link" href="javascript:void(0);">
<Primary link>
</a>
</li>
<li class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content">
<a class="usa-footer__primary-link" href="javascript:void(0);">
<Primary link>
</a>
</li>
<li class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content">
<a class="usa-footer__primary-link" href="javascript:void(0);">
<Primary link>
</a>
</li>
<li class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content">
<a class="usa-footer__primary-link" href="javascript:void(0);">
<Primary link>
</a>
</li>
<li class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content">
<a class="usa-footer__primary-link" href="javascript:void(0);">
<Primary link>
</a>
</li>
</ul>
</nav>
</div>
<div class="usa-footer__secondary-section">
<div class="grid-container">
<div class="grid-row grid-gap">
<div class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2">
<div class="mobile-lg:grid-col-auto">
<img class="usa-footer__logo-img" src="../../../dist/img/logo-img.png" alt="">
</div>
<div class="mobile-lg:grid-col-auto">
<p class="usa-footer__logo-heading">
<Name of Agency>
</p>
</div>
</div>
<div class="usa-footer__contact-links mobile-lg:grid-col-6">
<div class="usa-footer__social-links grid-row grid-gap-1">
<div class="grid-col-auto">
<a class="usa-social-link usa-social-link--facebook" href="javascript:void(0);">
<span>Facebook</span>
</a>
</div>
<div class="grid-col-auto">
<a class="usa-social-link usa-social-link--twitter" href="javascript:void(0);">
<span>Twitter</span>
</a>
</div>
<div class="grid-col-auto">
<a class="usa-social-link usa-social-link--youtube" href="javascript:void(0);">
<span>YouTube</span>
</a>
</div>
<div class="grid-col-auto">
<a class="usa-social-link usa-social-link--instagram" href="javascript:void(0);">
<span>Instagram</span>
</a>
</div>
<div class="grid-col-auto">
<a class="usa-social-link usa-social-link--rss" href="javascript:void(0);">
<span>RSS</span>
</a>
</div>
</div>
<h3 class="usa-footer__contact-heading">
<Agency Contact Center>
</h3>
<address class="usa-footer__address">
<div class="usa-footer__contact-info grid-row grid-gap">
<div class="grid-col-auto">
<a href="tel:1-800-555-5555">
<(800) 555-GOVT>
</a>
</div>
<div class="grid-col-auto">
<a href="mailto:<info@agency.gov>">
<info@agency.gov>
</a>
</div>
</div>
</address>
</div>
</div>
</div>
</div>
</footer>
<div class="usa-identifier">
<section class="usa-identifier__section usa-identifier__section--masthead" aria-label="Identificador de la agencia,">
<div class="usa-identifier__container">
<div class="usa-identifier__logos">
<a href="javascript:void(0);" class="usa-identifier__logo">
<img class="usa-identifier__logo-img" src="../../../dist/img/circle-gray-20.svg" alt="Logo de la <Parent agency>" role="img">
</a>
</div>
<div class="usa-identifier__identity" aria-label="Descripción de la agencia">
<p class="usa-identifier__identity-domain"><domain.gov></p>
<p class="usa-identifier__identity-disclaimer">Un sitio web oficial de <a href="javascript:void(0);"><Parent agency></a></p>
</div>
</div>
</section>
<nav class="usa-identifier__section usa-identifier__section--required-links" aria-label="Enlaces importantes,">
<div class="usa-identifier__container">
<ul class="usa-identifier__required-links-list">
<li class="usa-identifier__required-links-item">
<a href="javascript:void(0);" class="usa-identifier__required-link">Acerca de <Parent shortname></a>
</li>
<li class="usa-identifier__required-links-item">
<a href="javascript:void(0);" class="usa-identifier__required-link">Soporte de accesibilidad</a>
</li>
<li class="usa-identifier__required-links-item">
<a href="javascript:void(0);" class="usa-identifier__required-link usa-link">Solicitud a través de FOIA</a>
</li>
<li class="usa-identifier__required-links-item">
<a href="javascript:void(0);" class="usa-identifier__required-link usa-link">Datos de la ley No FEAR</a>
</li>
<li class="usa-identifier__required-links-item">
<a href="javascript:void(0);" class="usa-identifier__required-link usa-link">Oficina del Inspector General</a>
</li>
<li class="usa-identifier__required-links-item">
<a href="javascript:void(0);" class="usa-identifier__required-link usa-link">Informes de desempeño</a>
</li>
<li class="usa-identifier__required-links-item">
<a href="javascript:void(0);" class="usa-identifier__required-link usa-link">Política de privacidad</a>
</li>
</ul>
</div>
</nav>
<section class="usa-identifier__section usa-identifier__section--usagov" aria-label="Información y servicios del Gobierno de EE. UU.,">
<div class="usa-identifier__container">
<div class="usa-identifier__usagov-description">¿Necesita información y servicios del Gobierno?</div>
<a href="https://www.usa.gov/espanol/" class="usa-link">Visite USAGov en Español</a>
</div>
</section>
</div>
<script src="../../../dist/js/uswds.min.js"></script>
</body>
</html>
No notes defined.
package:
name: metro-digital-design-system-demo
version: 0.1.0
uswds:
path: ../../../dist
placeholderLink: javascript:void()
lang: es
title: No se encontró esta página
intro: >
Lo sentimos, pero no podemos encontrar la página que busca. Es posible que
haya sido eliminada, cambiado de nombre o no esté disponible por ahora.
instructions: >-
<p>Si escribió el URL a mano, verifique su ortografía y el uso de mayúsculas.
Nuestros URLs aparecen así:
<strong><agency.gov/example-one></strong>.</p><p>Visite nuestra página
principal para encontrar herramientas y recursos útiles o contáctenos y lo
ayudaremos a encontrar lo que busca.</p>
actions:
primary: Visite la página principal
secondary: Contáctenos
additional_support:
text: 'Para ayuda inmediata:'
actions:
- <a href="javascript:void();" class="usa-link">Chatee con nosotros</a>
- >-
Llámenos al <a href="javascript:void();" class="usa-link">(555)
555-GOVT</a>
error_code: <strong>Código de error:</strong> 404