Accordions

<ul class="card border-t border-thick teal-border dark-gray-2-anchors margin-3-b">
    <li class="border-b">
        <details class="pad">
            <summary>
                <a href="components/accordions/#" class="margin-r">Apply for Financial Aid</a>
                <span
                    class="btn-outline btn-round-sm mu-icon-chevron-down summary-icon-open teal"
                ></span>
                <span
                    class="btn-round-sm mu-icon-chevron-up summary-icon-close teal-bg"
                ></span>
            </summary>
            <p class="margin-1-t">
                <a class="display-block margin-1-b">Lorem Ipsum Link 1</a>
                <a class="display-block margin-1-b">Lorem Ipsum Link 2</a>
                <a class="display-block">Lorem Ipsum Link 3</a>
            </p>
        </details>
    </li>
    <li class="border-b">
        <details class="pad">
            <summary>
                <a href="components/accordions/#" class="margin-r">Tuition</a>
                <span
                    class="btn-outline btn-round-sm mu-icon-chevron-down summary-icon-open teal"
                ></span>
                <span
                    class="btn-round-sm mu-icon-chevron-up summary-icon-close teal-bg"
                ></span>
            </summary>
            <p class="margin-1-t">
                <a class="display-block margin-1-b">Lorem Ipsum Link 1</a>
                <a class="display-block margin-1-b">Lorem Ipsum Link 2</a>
                <a class="display-block">Lorem Ipsum Link 3</a>
            </p>
        </details>
    </li>
    <li class="pad border-b"><a>Loans</a></li>
    <li class="pad border-b"><a>Scholarships</a></li>
    <li class="pad"><a>Grants</a></li>
</ul>

To load accordions opened, add the open attribute to <details>.

<ul class="card border-t border-thick teal-border dark-gray-2-anchors margin-3-b">
    <li class="border-b">
        <details class="pad" open>
            <summary>
                <a href="components/accordions/#" class="margin-r">Apply for Financial Aid</a>
                <span
                    class="btn-outline btn-round-sm mu-icon-chevron-down summary-icon-open teal"
                ></span>
                <span
                    class="btn-round-sm mu-icon-chevron-up summary-icon-close teal-bg"
                ></span>
            </summary>
            <p class="margin-1-t">
                <a class="display-block margin-1-b">Lorem Ipsum Link 1</a>
                <a class="display-block margin-1-b">Lorem Ipsum Link 2</a>
                <a class="display-block">Lorem Ipsum Link 3</a>
            </p>
        </details>
    </li>
    <li class="border-b">
        <details class="pad">
            <summary>
                <a href="components/accordions/#" class="margin-r">Tuition</a>
                <span
                    class="btn-outline btn-round-sm mu-icon-chevron-down summary-icon-open teal"
                ></span>
                <span
                    class="btn-round-sm mu-icon-chevron-up summary-icon-close teal-bg"
                ></span>
            </summary>
            <p class="margin-1-t">
                <a class="display-block margin-1-b">Lorem Ipsum Link 1</a>
                <a class="display-block margin-1-b">Lorem Ipsum Link 2</a>
                <a class="display-block">Lorem Ipsum Link 3</a>
            </p>
        </details>
    </li>
    <li class="pad border-b"><a>Loans</a></li>
    <li class="pad border-b"><a>Scholarships</a></li>
    <li class="pad"><a>Grants</a></li>
</ul>