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

{% block component_content %}
<h1 class="font-heading-2xl">{{ component_name }}</h1>
<p class="usa-intro">A list organizes information into discrete sequential sections.</p>

<h2 class="font-heading-xl margin-top-4">Unordered list</h2>
<c-list>
    <li>Ensure all forms are accessible to users with disabilities</li>
    <li>Provide content in plain language at a sixth-grade reading level</li>
    <li>Test your website on mobile devices and assistive technologies</li>
    <li>Include a privacy policy on every page that collects user information</li>
</c-list>

<h2 class="font-heading-xl margin-top-4">Ordered list</h2>
<c-list list_type="ordered">
    <li>Create an account on the federal hiring portal</li>
    <li>Search for open positions matching your qualifications</li>
    <li>Prepare your federal resume using the required format</li>
    <li>Submit your application before the closing date</li>
    <li>Monitor your application status in your dashboard</li>
</c-list>

<h2 class="font-heading-xl margin-top-4">Unstyled</h2>
<c-list list_type="unstyled">
    <li>Office of Management and Budget</li>
    <li>Office of Personnel Management</li>
    <li>General Services Administration</li>
    <li>Government Accountability Office</li>
</c-list>
{% endblock %}