{% extends "demo_app/pattern_base.html" %}

{% block component_content %}
<h1 class="font-heading-2xl">{{ component_name }}</h1>
<p class="usa-intro">A site alert communicates urgent sitewide information.</p>

<h2 class="font-heading-xl margin-top-4">Informational</h2>
<c-site_alert type="info" heading="Planned system maintenance">
    The benefits portal will be undergoing scheduled maintenance on Saturday, March 14 from 2:00 a.m. to 6:00 a.m. ET. During this time, you may be unable to access your account or submit applications. We apologize for the inconvenience.
</c-site_alert>

<h2 class="font-heading-xl margin-top-4">Emergency</h2>
<c-site_alert type="emergency" heading="Severe weather emergency">
    All federal offices in the Washington, D.C. metropolitan area are closed today due to severe weather conditions. Employees should follow their agency's telework and emergency procedures. Essential services remain operational. Visit <a href="#" class="usa-link">OPM.gov</a> for the latest operating status.
</c-site_alert>

<h2 class="font-heading-xl margin-top-4">Slim informational</h2>
<c-site_alert type="info" slim="true">
    New application deadlines have been posted for the 2026 fiscal year grant programs.
</c-site_alert>

<h2 class="font-heading-xl margin-top-4">Slim emergency</h2>
<c-site_alert type="emergency" slim="true">
    The filing deadline has been extended to May 17 for residents of disaster-affected areas.
</c-site_alert>

<h2 class="font-heading-xl margin-top-4">No heading</h2>
<c-site_alert type="info">
    This website is in beta. Help us improve it by sharing your <a href="#" class="usa-link">feedback</a>.
</c-site_alert>

<h2 class="font-heading-xl margin-top-4">No icon</h2>
<c-site_alert type="info" heading="Holiday schedule" no_icon="true">
    Federal offices will be closed on Monday, February 16 in observance of Presidents' Day. Normal business hours resume Tuesday, February 17.
</c-site_alert>
{% endblock %}