Services List - ViacomCBS UI Kit

HTML
SCSS

<div class="services-list">
    <ul class="services-list-list">
        <li class="services-group-item">
            <div class="services-group-header">
                <h3 class="component-subtitle services-group-title" id="item-0">Category name goes here</h3>
                <a role="button" data-toggle="collapse" href="#collapse-0" aria-expanded="true" aria-controls="collapse-0" class="toggle-icon"></a>
            </div>

            <div id="collapse-0" class="collapse in" aria-labelledby="item-0">
                <ul class="services-group-list">
                    <li class="services-list-item">
                        <a href="#" class="service-title">Service Name</a>
                        <div class="service-desc">
                            <p>One optional line about what to expect within the service goes here</p>
                        </div>
                    </li>

                    <li class="services-list-item">
                        <a href="#" class="service-title is-external">Service Name</a>
                        <div class="service-desc">
                            <p>One optional line about what to expect within the service goes here</p>
                        </div>
                    </li>

                    <li class="services-list-item">
                        <a href="#" class="service-title">Service Name</a>
                        <div class="service-desc">
                            <p>One optional line about what to expect within the service goes here</p>
                        </div>
                    </li>

                    <li class="services-list-item">
                        <a href="#" class="service-title is-external">Service Name</a>
                        <div class="service-desc">
                            <p>One optional line about what to expect within the service goes here</p>
                        </div>
                    </li>

                    <li class="services-list-item">
                        <a href="#" class="service-title">Service Name</a>
                        <div class="service-desc">
                            <p>One optional line about what to expect within the service goes here</p>
                        </div>
                    </li>

                    <li class="services-list-item">
                        <a href="#" class="service-title is-external">Service Name</a>
                    </li>

                    <li class="services-list-item">
                        <a href="#" class="service-title">Service Name</a>
                        <div class="service-desc">
                            <p>One optional line about what to expect within the service goes here</p>
                        </div>
                    </li>

                    <li class="services-list-item">
                        <a href="#" class="service-title is-external">Service Name</a>
                        <div class="service-desc">
                            <p>One optional line about what to expect within the service goes here</p>
                        </div>
                    </li>

                    <li class="services-list-item">
                        <a href="#" class="service-title">Service Name</a>
                        <div class="service-desc">
                            <p>One optional line about what to expect within the service goes here</p>
                        </div>
                    </li>
                </ul>
                <p><a href="#" class="btn btn-default">Optional Button</a></p>
            </div>
        </li>
        <li class="services-group-item">
            <div class="services-group-header">
                <h3 class="component-subtitle services-group-title" id="item-1">Category name goes here</h3>
                <a role="button" data-toggle="collapse" href="#collapse-1" aria-expanded="true" aria-controls="collapse-1" class="toggle-icon"></a>
            </div>

            <div id="collapse-1" class="collapse in" aria-labelledby="item-1">
                <ul class="services-group-list">
                    <li class="services-list-item">
                        <a href="#" class="service-title">Service Name</a>
                        <div class="service-desc">
                            <p>One optional line about what to expect within the service goes here</p>
                        </div>
                    </li>

                    <li class="services-list-item">
                        <a href="#" class="service-title is-external">Service Name</a>
                        <div class="service-desc">
                            <p>One optional line about what to expect within the service goes here</p>
                        </div>
                    </li>

                    <li class="services-list-item">
                        <a href="#" class="service-title">Service Name</a>
                        <div class="service-desc">
                            <p>One optional line about what to expect within the service goes here</p>
                        </div>
                    </li>

                    <li class="services-list-item">
                        <a href="#" class="service-title is-external">Service Name</a>
                        <div class="service-desc">
                            <p>One optional line about what to expect within the service goes here</p>
                        </div>
                    </li>

                    <li class="services-list-item">
                        <a href="#" class="service-title">Service Name</a>
                        <div class="service-desc">
                            <p>One optional line about what to expect within the service goes here</p>
                        </div>
                    </li>

                    <li class="services-list-item">
                        <a href="#" class="service-title is-external">Service Name</a>
                    </li>

                    <li class="services-list-item">
                        <a href="#" class="service-title">Service Name</a>
                        <div class="service-desc">
                            <p>One optional line about what to expect within the service goes here</p>
                        </div>
                    </li>

                    <li class="services-list-item">
                        <a href="#" class="service-title is-external">Service Name</a>
                        <div class="service-desc">
                            <p>One optional line about what to expect within the service goes here</p>
                        </div>
                    </li>

                    <li class="services-list-item">
                        <a href="#" class="service-title">Service Name</a>
                        <div class="service-desc">
                            <p>One optional line about what to expect within the service goes here</p>
                        </div>
                    </li>
                </ul>
                <p><a href="#" class="btn btn-default">Optional Button</a></p>
            </div>
        </li>
        <li class="services-group-item">
            <div class="services-group-header">
                <h3 class="component-subtitle services-group-title" id="item-2">Category name goes here</h3>
                <a role="button" data-toggle="collapse" href="#collapse-2" aria-expanded="true" aria-controls="collapse-2" class="toggle-icon"></a>
            </div>

            <div id="collapse-2" class="collapse in" aria-labelledby="item-2">
                <ul class="services-group-list">
                    <li class="services-list-item">
                        <a href="#" class="service-title">Service Name</a>
                        <div class="service-desc">
                            <p>One optional line about what to expect within the service goes here</p>
                        </div>
                    </li>

                    <li class="services-list-item">
                        <a href="#" class="service-title is-external">Service Name</a>
                        <div class="service-desc">
                            <p>One optional line about what to expect within the service goes here</p>
                        </div>
                    </li>

                    <li class="services-list-item">
                        <a href="#" class="service-title">Service Name</a>
                        <div class="service-desc">
                            <p>One optional line about what to expect within the service goes here</p>
                        </div>
                    </li>

                    <li class="services-list-item">
                        <a href="#" class="service-title is-external">Service Name</a>
                        <div class="service-desc">
                            <p>One optional line about what to expect within the service goes here</p>
                        </div>
                    </li>

                    <li class="services-list-item">
                        <a href="#" class="service-title">Service Name</a>
                        <div class="service-desc">
                            <p>One optional line about what to expect within the service goes here</p>
                        </div>
                    </li>

                    <li class="services-list-item">
                        <a href="#" class="service-title is-external">Service Name</a>
                    </li>

                    <li class="services-list-item">
                        <a href="#" class="service-title">Service Name</a>
                        <div class="service-desc">
                            <p>One optional line about what to expect within the service goes here</p>
                        </div>
                    </li>

                    <li class="services-list-item">
                        <a href="#" class="service-title is-external">Service Name</a>
                        <div class="service-desc">
                            <p>One optional line about what to expect within the service goes here</p>
                        </div>
                    </li>

                    <li class="services-list-item">
                        <a href="#" class="service-title">Service Name</a>
                        <div class="service-desc">
                            <p>One optional line about what to expect within the service goes here</p>
                        </div>
                    </li>
                </ul>
                <p><a href="#" class="btn btn-default">Optional Button</a></p>
            </div>
        </li>
        <li class="services-group-item">
            <div class="services-group-header">
                <h3 class="component-subtitle services-group-title" id="item-3">Category name goes here</h3>
                <a role="button" data-toggle="collapse" href="#collapse-3" aria-expanded="true" aria-controls="collapse-3" class="toggle-icon"></a>
            </div>

            <div id="collapse-3" class="collapse in" aria-labelledby="item-3">
                <ul class="services-group-list">
                    <li class="services-list-item">
                        <a href="#" class="service-title">Service Name</a>
                        <div class="service-desc">
                            <p>One optional line about what to expect within the service goes here</p>
                        </div>
                    </li>

                    <li class="services-list-item">
                        <a href="#" class="service-title is-external">Service Name</a>
                        <div class="service-desc">
                            <p>One optional line about what to expect within the service goes here</p>
                        </div>
                    </li>

                    <li class="services-list-item">
                        <a href="#" class="service-title">Service Name</a>
                        <div class="service-desc">
                            <p>One optional line about what to expect within the service goes here</p>
                        </div>
                    </li>

                    <li class="services-list-item">
                        <a href="#" class="service-title is-external">Service Name</a>
                        <div class="service-desc">
                            <p>One optional line about what to expect within the service goes here</p>
                        </div>
                    </li>

                    <li class="services-list-item">
                        <a href="#" class="service-title">Service Name</a>
                        <div class="service-desc">
                            <p>One optional line about what to expect within the service goes here</p>
                        </div>
                    </li>

                    <li class="services-list-item">
                        <a href="#" class="service-title is-external">Service Name</a>
                    </li>

                    <li class="services-list-item">
                        <a href="#" class="service-title">Service Name</a>
                        <div class="service-desc">
                            <p>One optional line about what to expect within the service goes here</p>
                        </div>
                    </li>

                    <li class="services-list-item">
                        <a href="#" class="service-title is-external">Service Name</a>
                        <div class="service-desc">
                            <p>One optional line about what to expect within the service goes here</p>
                        </div>
                    </li>

                    <li class="services-list-item">
                        <a href="#" class="service-title">Service Name</a>
                        <div class="service-desc">
                            <p>One optional line about what to expect within the service goes here</p>
                        </div>
                    </li>
                </ul>
                <p><a href="#" class="btn btn-default">Optional Button</a></p>
            </div>
        </li>
        <li class="services-group-item">
            <div class="services-group-header">
                <h3 class="component-subtitle services-group-title" id="item-4">Category name goes here</h3>
                <a role="button" data-toggle="collapse" href="#collapse-4" aria-expanded="true" aria-controls="collapse-4" class="toggle-icon"></a>
            </div>

            <div id="collapse-4" class="collapse in" aria-labelledby="item-4">
                <ul class="services-group-list">
                    <li class="services-list-item">
                        <a href="#" class="service-title">Service Name</a>
                        <div class="service-desc">
                            <p>One optional line about what to expect within the service goes here</p>
                        </div>
                    </li>

                    <li class="services-list-item">
                        <a href="#" class="service-title is-external">Service Name</a>
                        <div class="service-desc">
                            <p>One optional line about what to expect within the service goes here</p>
                        </div>
                    </li>

                    <li class="services-list-item">
                        <a href="#" class="service-title">Service Name</a>
                        <div class="service-desc">
                            <p>One optional line about what to expect within the service goes here</p>
                        </div>
                    </li>

                    <li class="services-list-item">
                        <a href="#" class="service-title is-external">Service Name</a>
                        <div class="service-desc">
                            <p>One optional line about what to expect within the service goes here</p>
                        </div>
                    </li>

                    <li class="services-list-item">
                        <a href="#" class="service-title">Service Name</a>
                        <div class="service-desc">
                            <p>One optional line about what to expect within the service goes here</p>
                        </div>
                    </li>

                    <li class="services-list-item">
                        <a href="#" class="service-title is-external">Service Name</a>
                    </li>

                    <li class="services-list-item">
                        <a href="#" class="service-title">Service Name</a>
                        <div class="service-desc">
                            <p>One optional line about what to expect within the service goes here</p>
                        </div>
                    </li>

                    <li class="services-list-item">
                        <a href="#" class="service-title is-external">Service Name</a>
                        <div class="service-desc">
                            <p>One optional line about what to expect within the service goes here</p>
                        </div>
                    </li>

                    <li class="services-list-item">
                        <a href="#" class="service-title">Service Name</a>
                        <div class="service-desc">
                            <p>One optional line about what to expect within the service goes here</p>
                        </div>
                    </li>
                </ul>
                <p><a href="#" class="btn btn-default">Optional Button</a></p>
            </div>
        </li>
    </ul>
</div>

.services-list {
  margin-bottom: 4.8rem;

  .services-list-list {
    list-style: none;
    padding-left: 0;
  }

  .services-group-header {
    display: flex;
    align-items: center;
    margin-bottom: 0.8rem;
  }

  .services-group-item {
    margin-bottom: 0.8rem;
    padding: 1.2rem;

    &:nth-child(even) {
      background-color: $color-base-grey;
    }
  }

  .services-group-title {
    flex: 1;
  }

  .services-group-list {
    list-style: none;
    padding-left: 0;
    display: grid;
    gap: 1.6rem 2.4rem;
    margin-bottom: 2.4rem;

    @media (min-width: $breakpoint-desktop) {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }

  .service-title {
    @include typeBody(true);
    display: block;
    color: $color-base-blue;
    margin-bottom: 0.4rem;

    &.is-external::after {
      display: inline-block;
      text-decoration: none;
      font-family: "FontAwesome";
      color: $color-grey-dark;
      content: "\f08e";
      margin-left: 0.8rem;
    }
  }

  .service-desc {
    @include typeCaption;
    color: $color-grey-dark;
  }

  a.toggle-icon {
    font-family: "FontAwesome";
    text-decoration: none;

    &[aria-expanded="false"]::before {
      content: "\f067";
    }

    &[aria-expanded="true"]::before {
      content: "\f068";
    }
  }
}