Swanson DS: Sections

- Typography
- Color
- Logo
- Homepage
- About Me

When listing skills, you should use these tiles to create the list. There is a dark-mode and light-mode version.

List Variations

Skill

Accessibility Considerations

Ensure all icons have alt tags. Colors should match those found in the foundational colors so that they meet the color-contrast requirements.

Usage

Primary usage is for a skills list for a portfolio. However, this may be used for listing various things.
This is not a section on its own, this should be within a section on a page.

Code Examples

Skill List

<div class="col-lg-12 d-flex p-4 border-start border-end border-top">
    <div class="col-lg-3 col-sm-4 d-flex p-4">
        <div class="skill-icons">
            <div class="skill-icon"><i class="fa-solid fa-magnifying-glass" style="color: #05b3e5;"></i></div>
        </div>
        <h3 class="align-self-center">Skill</h3>
    </div>
    <div class="col-lg-3 col-sm-4 d-flex p-4">
        <div class="skill-icons">
            <div class="skill-icon"><i class="fa-solid fa-magnifying-glass" style="color: #05b3e5;"></i></div>
        </div>
        <h3 class="align-self-center">Skill</h3>
    </div>
    <div class="col-lg-3 col-sm-4 d-flex p-4">
        <div class="skill-icons">
            <div class="skill-icon"><i class="fa-solid fa-magnifying-glass" style="color: #05b3e5;"></i></div>
        </div>
        <h3 class="align-self-center">Skill</h3>
    </div>
</div>
<div class="col d-flex p-4  border-start border-end border-bottom">
    <div class="col-lg-3 col-sm-4 d-flex p-4">
        <div class="skill-icons">
            <div class="skill-icon"><i class="fa-solid fa-magnifying-glass" style="color: #05b3e5;"></i></div>
        </div>
        <h3 class="align-self-center">Skill</h3>
    </div>
    <div class="col-lg-3 col-sm-4 d-flex p-4">
        <div class="skill-icons">
            <div class="skill-icon"><i class="fa-solid fa-magnifying-glass" style="color: #05b3e5;"></i></div>
        </div>
        <h3 class="align-self-center">Skill</h3>
    </div>
    <div class="col-lg-3 col-sm-4 d-flex p-4">
        <div class="skill-icons">
            <div class="skill-icon"><i class="fa-solid fa-magnifying-glass" style="color: #05b3e5;"></i></div>
        </div>
        <h3 class="align-self-center">