<article class="settings-card">
    <header class="settings-card-header">
        <div class="settings-card-title-row">
            @if (icon()) {
            <i [class]="icon() + ' settings-card-icon'" aria-hidden="true"></i>
            }
            <div class="settings-card-title-copy">
                <h2 class="settings-card-title">{{ title() }}</h2>
                @if (subtitle()) {
                <p class="settings-card-subtitle">{{ subtitle() }}</p>
                }
            </div>
        </div>
        <ng-content select="[settings-card-header]" />
    </header>

    <div class="settings-card-body">
        <ng-content select="[settings-card-body]" />
    </div>

    <div class="settings-card-footer">
        <ng-content select="[settings-card-footer]" />
    </div>
</article>
