<ul class="c-settings-list">
<li class="c-settings-list-item c-settings-list-item--blue">
<a href="#" class="c-settings-list-item__link">
<span class="c-settings-list-item__icon">
<i class="icon icon-settings"></i>
</span>
<h4 class="c-settings-list-item__title">Settings page</h4>
<div class="c-settings-list-item__subtitle">Subtitle goes here</div>
<i class="icon icon-chevron-right c-settings-list-item__arrow"></i>
</a>
</li>
<li class="c-settings-list-item c-settings-list-item--green">
<a href="#" class="c-settings-list-item__link">
<span class="c-settings-list-item__icon">
<i class="icon icon-settings"></i>
</span>
<h4 class="c-settings-list-item__title">Settings page</h4>
<div class="c-settings-list-item__subtitle">Subtitle goes here</div>
<i class="icon icon-chevron-right c-settings-list-item__arrow"></i>
</a>
</li>
<li class="c-settings-list-item c-settings-list-item--teal">
<a href="#" class="c-settings-list-item__link">
<span class="c-settings-list-item__icon">
<i class="icon icon-settings"></i>
</span>
<h4 class="c-settings-list-item__title">Settings page</h4>
<i class="icon icon-chevron-right c-settings-list-item__arrow"></i>
</a>
</li>
<li class="c-settings-list-item c-settings-list-item--red">
<a href="#" class="c-settings-list-item__link">
<span class="c-settings-list-item__icon">
<i class="icon icon-settings"></i>
</span>
<h4 class="c-settings-list-item__title">Settings page</h4>
<i class="icon icon-chevron-right c-settings-list-item__arrow"></i>
</a>
</li>
<li class="c-settings-list-item c-settings-list-item--orange">
<a href="#" class="c-settings-list-item__link">
<span class="c-settings-list-item__icon">
<i class="icon icon-settings"></i>
</span>
<h4 class="c-settings-list-item__title">Settings page</h4>
<i class="icon icon-chevron-right c-settings-list-item__arrow"></i>
</a>
</li>
<li class="c-settings-list-item c-settings-list-item--purple">
<a href="#" class="c-settings-list-item__link">
<span class="c-settings-list-item__icon">
<i class="icon icon-settings"></i>
</span>
<h4 class="c-settings-list-item__title">Settings page</h4>
<i class="icon icon-chevron-right c-settings-list-item__arrow"></i>
</a>
</li>
<li class="c-settings-list-item c-settings-list-item--gray">
<a href="#" class="c-settings-list-item__link">
<span class="c-settings-list-item__icon">
<i class="icon icon-settings"></i>
</span>
<h4 class="c-settings-list-item__title">Settings page</h4>
<i class="icon icon-chevron-right c-settings-list-item__arrow"></i>
</a>
</li>
</ul>