uswds_base-8.x-2.0-alpha1/templates/layout/page.html.twig
templates/layout/page.html.twig
{#
/**
* @file
* Theme override to display a single page.
*
* The doctype, html, head and body tags are not in this template. Instead they
* can be found in the html.html.twig template in this directory.
*
* Available variables:
*
* General utility variables:
* - base_path: The base URL path of the Drupal installation. Will usually be
* "/" unless you have installed Drupal in a sub-directory.
* - is_front: A flag indicating if the current page is the front page.
* - logged_in: A flag indicating if the user is registered and signed in.
* - is_admin: A flag indicating if the user has permission to access
* administration pages.
*
* Site identity:
* - front_page: The URL of the front page. Use this instead of base_path when
* linking to the front page. This includes the language domain or prefix.
*
* Page content (in order of occurrence in the default page.html.twig):
* - messages: Status and error messages. Should be displayed prominently.
* - node: Fully loaded node, if there is an automatically-loaded node
* associated with the page and the node ID is the second argument in the
* page's path (e.g. node/12345 and node/12345/revisions, but not
* comment/reply/12345).
*
* Regions:
* - page.government_banner: USWDS Display Government site banner
* - page.header_top: Items for above the header region.
* - page.header: Items for the header region.
* - page.primary_menu: Items for the primary menu region.
* - page.secondary_menu: Items for the secondary menu region.
* - page.breadcrumb: Items for the breadcrumb region.
* - page.hero: USWDS Hero Banner
* - page.highlighted: Items for the highlighted content region.
* - page.help: Dynamic help text, mostly for admin pages.
* - page.content: The main content of the current page.
* - page.sidebar_first: Items for the first sidebar.
* - page.sidebar_second: Items for the second sidebar.
* - page.footer_menu: Items for the footer menu region.
* - page.footer: Items for the footer region.
* - page.footer_secondary: Items for below the footer secondary region.
*
* @see template_preprocess_page()
* @see html.html.twig
*/
#}
{% if government_banner %}
<section class="usa-banner">
{{ government_banner }}
</section>
{% endif %}
<div class="usa-overlay"></div>
<header class="{{ header_classes }}" id="header" role="banner">
{% if page.header_top %}
<div class="usa-banner-inner">
{{ page.header_top }}
</div>
{% endif %}
{% if header_basic %}
<div class="usa-nav-container">
{% endif %}
{{ page.header }}
<nav class="usa-nav" role="navigation">
{% if header_extended %}
<div class="usa-nav-inner">
{% endif %}
<button class="usa-nav-close">
<img src="{{ uswds_images }}close.svg" alt="close"/>
</button>
{% if page.mobile_menu %}
<div class="usa-nav-mobile">
{{ page.mobile_menu }}
</div>
{% endif %}
{% if page.mobile_menu %}
<div class="usa-nav-desktop">
{% endif %}
{% if page.primary_menu %}
{{ page.primary_menu }}
{% endif %}
{% if page.secondary_menu %}
{{ page.secondary_menu }}
{% endif %}
{% if page.mobile_menu %}
</div>
{% endif %}
{% if header_extended %}
</div>
{% endif %}
</nav>
{% if header_basic %}
</div>
{% endif %}
</header>
{% if page.hero %}
<section class="usa-hero">
<div class="grid-container">
{{ page.hero }}
</div>
</section>
{% endif %}
<main class="main-content usa-layout-docs usa-section {{ main_classes }}" role="main"
id="main-content">
<a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
<div class="grid-container">
{% if page.breadcrumb or page.highlighted or page.help %}
<div class="grid-row ">
{{ page.breadcrumb }}
</div>
<div class="grid-row ">
{{ page.highlighted }}
</div>
{# Help #}
{% if page.help %}
<div class="grid-row ">
{{ page.help }}
</div>
{% endif %}
{% endif %}
<div class="grid-row grid-gap">
{% if page.sidebar_first %}
<aside
class="usa-layout-docs-sidenav desktop:grid-col-3 layout-sidebar-first"
role="complementary">
{{ page.sidebar_first }}
</aside>
{% endif %}
<div class="usa-layout-docs-main_content desktop:grid-col-fill {{ content_class }}">
{{ page.content }}
</div>{# /.layout-content #}
{% if page.sidebar_second %}
<aside
class="usa-layout-docs-sidenav desktop:grid-col-3 layout-sidebar-second"
role="complementary">
{{ page.sidebar_second }}
</aside>
{% endif %}
</div>
</div>
</main>
<footer class="{{ footer_classes }}" role="contentinfo">
<div class="grid-container usa-footer-return-to-top">
<a href="#">Return to top</a>
</div>
{% if display_footer_primary %}
<div class="usa-footer-primary-section">
<div class="usa-footer-primary-content">
{% if footer_style != 'medium' %}
<div class="grid-container">
<div class="grid-row grid-gap">
{% endif %}
{% if page.footer_menu %}
{{ page.footer_menu }}
{% endif %}
{% if footer_slim and (footer_phone or footer_email) %}
<div class="mobile-lg:grid-col-4">
<address class="usa-footer-address">
<div class="grid-row grid-gap mobile-lg:grid-gap-0">
{% if footer_phone %}
<div
class="grid-col-auto mobile-lg:grid-col-12 desktop:grid-col-auto">
<div class="usa-footer-contact_info">
<a
href="tel:{{ footer_phone }}">{{ footer_phone }}</a>
</div>
</div>
{% endif %}
{% if footer_email %}
<div
class="grid-col-auto mobile-lg:grid-col-12 desktop:grid-col-auto">
<div class="usa-footer-contact_info">
<a
href="mailto:{{ footer_email }}">{{ footer_email }}</a>
</div>
</div>
{% endif %}
</div>
</address>
</div>
{% endif %}
{% if footer_style != 'medium' %}
</div>
</div>
{% endif %}
{% if page.footer %}
<div class="grid-container">
<div class="grid-row grid-gap">
<div class="grid-col-fill">
{{ page.footer }}
</div>
</div>
</div>
{% endif %}
</div>
</div>
{% endif %}
{% if display_footer_secondary %}
<div class="usa-footer-secondary-section">
<div class="grid-container">
<div class="grid-row grid-gap">
{% if display_footer_agency %}
<div
class="usa-footer-logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2">
{% if footer_agency_url %}
<a href="{{ footer_agency_url }}">
{% endif %}
{% if footer_agency_logo %}
<div class="mobile-lg:grid-col-auto">
<img class="{{ footer_agency_logo_class }}"
src="{{ footer_agency_logo }}"
alt="{{ 'Agency logo'|t }}">
</div>
{% endif %}
{% if footer_agency_name %}
<div class="mobile-lg:grid-col-auto">
<h3
class="{{ footer_agency_heading_class }}">{{ footer_agency_name }}</h3>
</div>
{% endif %}
{% if footer_agency_url %}
</a>
{% endif %}
</div>
{% if not footer_slim %}
<div class="usa-footer-contact-links desktop:grid-col-6">
{% if facebook %}
<a class="usa-link-facebook" href="{{ facebook }}">
<span>Facebook</span>
</a>
{% endif %}
{% if twitter %}
<a class="usa-link-twitter" href="{{ twitter }}">
<span>Twitter</span>
</a>
{% endif %}
{% if youtube %}
<a class="usa-link-youtube" href="{{ youtube }}">
<span>YouTube</span>
</a>
{% endif %}
{% if rss %}
<a class="usa-link-rss" href="{{ rss }}">
<span>RSS</span>
</a>
{% endif %}
{% if contact_center %}
<h3
class="usa-footer-contact-heading">{{ contact_center }}</h3>
{% endif %}
<address class="usa-footer-address">
<div class="usa-footer-contact_info grid-row grid-gap">
{% if phone %}
<div class="grid-col-auto">
<a href="tel:{{ phone }}">{{ phone }}</a>
</div>
{% endif %}
{% if email %}
<div class="grid-col-auto">
<a href="mailto:{{ email }}">{{ email }}</a>
</div>
{% endif %}
</div>
</address>
</div>
{% endif %}
</div>
{% endif %}
{% if page.footer_secondary %}
<div class="grid-container">
<div class="grid-row grid-gap">
<div class="grid-col-fill">
{{ page.footer_secondary }}
</div>
</div>
</div>
{% endif %}
</div>
</div>
</div>
{% endif %}
</footer>
