Skill Box

A card-like component for displaying a person’s skills, expertise, or other information with a header containing an avatar, title, and subtitle.

Dependencies

This component has no JavaScript dependencies as it’s purely CSS-based. It only requires the LESS stylesheet to be included in your project.

Usage

Basic Usage

1
<div class="skill-box">
2
    <div class="header">
3
        <div class="avatar">
4
            <img src="avatar.jpg" alt="User Avatar">
5
        </div>
6
        <div class="title">John Doe</div>
7
        <div class="subtitle">Senior Developer</div>
8
    </div>
9
    <div class="content">
10
        <ul class="skills">
11
            <li>
12
                JavaScript <span class="badge bg-green fg-white">Expert</span>
13
            </li>
14
            <li>
15
                HTML/CSS <span class="badge bg-blue fg-white">Advanced</span>
16
            </li>
17
            <li>
18
                React <span class="badge bg-cyan fg-white">Intermediate</span>
19
            </li>
20
            <li>
21
                Node.js <span class="badge bg-yellow fg-dark">Beginner</span>
22
            </li>
23
        </ul>
24
    </div>
25
</div>

With Icon Avatar

1
<div class="skill-box">
2
    <div class="header">
3
        <div class="avatar">
4
            <span class="mif-user"></span>
5
        </div>
6
        <div class="title">Jane Smith</div>
7
        <div class="subtitle">UX Designer</div>
8
    </div>
9
    <div class="content">
10
        <ul class="skills">
11
            <li>
12
                UI Design <span class="badge bg-green fg-white">Expert</span>
13
            </li>
14
            <li>
15
                Wireframing <span class="badge bg-blue fg-white">Advanced</span>
16
            </li>
17
        </ul>
18
    </div>
19
</div>

With Dark Mode

1
<div class="dark-side">
2
    <div class="skill-box">
3
        <!-- Skill box content -->
4
    </div>
5
</div>

Component Structure

The Skill Box component consists of the following parts:

The header section contains:

Avatar: A circular image or icon representing the person
Title: The main title (typically a person’s name)
Subtitle: A secondary title (typically a job title or description)

1
<div class="header">
2
    <div class="avatar">
3
        <!-- Avatar content (image or icon) -->
4
    </div>
5
    <div class="title">Title Text</div>
6
    <div class="subtitle">Subtitle Text</div>
7
</div>

Content

The content section can contain any content, but is typically used with a skills list:

1
<div class="content">
2
    <ul class="skills">
3
        <li>
4
            Skill Name <span class="badge">Level</span>
5
        </li>
6
        <!-- More skills -->
7
    </ul>
8
</div>

Styling with CSS Variables

Variable	Default (Light)	Dark Mode	Description
`--skill-box-border-radius`	`6px`	`6px`	Border radius of the box
`--skill-box-border-color`	`var(--border-color)`	`var(--border-color)`	Border color of the box
`--skill-box-background`	`#ffffff`	`#2b2d30`	Background color of the box
`--skill-box-color`	`#191919`	`#dbdfe7`	Text color of the box
`--skill-box-header-background`	`#fbfbfb`	`#282c35`	Background color of the header
`--skill-box-header-color`	`#191919`	`#fbfbfb`	Text color of the header
`--skill-box-avatar-background`	`#e6e6e6`	`#3b414e`	Background color of the avatar
`--skill-box-avatar-color`	`#191919`	`#fbfbfb`	Text color of the avatar

Example of Custom Styling

.custom-skill-box {
    --skill-box-border-radius: 10px;
    --skill-box-border-color: #dcdcdc;
    --skill-box-background: #f8f9fa;
    --skill-box-color: #333333;
    --skill-box-header-background: #e9ecef;
    --skill-box-header-color: #212529;
    --skill-box-avatar-background: #dee2e6;
    --skill-box-avatar-color: #212529;
}

1
<div class="skill-box custom-skill-box">
2
    <!-- Skill box content -->
3
</div>

Available CSS Classes

Base Classes

.skill-box - The main container class for the skill box component
.header - Container for the header section
.content - Container for the content section

Header Elements

.avatar - Container for the avatar (image or icon)
.title - Element for the main title
.subtitle - Element for the subtitle

Content Elements

.skills - Unordered list for skills
.skills li - List item for each skill
.badge - Badge element for skill level indication

Example with Complete Custom Styling

1
<style>
2
    .custom-skill-box {
3
        --skill-box-border-radius: 10px;
4
        --skill-box-border-color: #dcdcdc;
5
        --skill-box-background: #f8f9fa;
6
        --skill-box-color: #333333;
7
        --skill-box-header-background: #e9ecef;
8
        --skill-box-header-color: #212529;
9
        --skill-box-avatar-background: #dee2e6;
10
        --skill-box-avatar-color: #212529;
11
    }
12
</style>
13

14
<div class="skill-box custom-skill-box">
15
    <div class="header">
16
        <div class="avatar">
17
            <span class="mif-user"></span>
18
        </div>
19
        <div class="title">Jane Smith</div>
20
        <div class="subtitle">UX Designer</div>
21
    </div>
22
    <div class="content">
23
        <ul class="skills">
24
            <li>
25
                UI Design <span class="badge bg-green fg-white">Expert</span>
26
            </li>
27
            <li>
28
                Wireframing <span class="badge bg-blue fg-white">Advanced</span>
29
            </li>
30
            <li>
31
                User Research <span class="badge bg-cyan fg-white">Advanced</span>
32
            </li>
33
            <li>
34
                Prototyping <span class="badge bg-violet fg-white">Intermediate</span>
35
            </li>
36
        </ul>
37
    </div>
38
</div>

This example creates a skill box with custom styling for a UX designer’s profile.

Best Practices

Use the skill-box component for displaying professional profiles, team member information, or skill sets.
Keep the title and subtitle concise for better readability.
Use appropriate badges with contrasting colors to highlight skill levels.
Consider using icons instead of images for the avatar when a user photo is not available.
For better accessibility, ensure there’s sufficient color contrast between text and background.
When using custom styling, maintain the component’s structure to ensure proper layout.
In responsive designs, consider how the skill-box will display on smaller screens.

Additional Notes

The skill-box component is designed to be simple and lightweight, focusing on presenting information clearly.
While the examples show skills with badges, the content section can contain any HTML content you need.
The component works well in both light and dark modes without requiring additional configuration.
You can combine this component with other Metro UI components like buttons or progress bars in the content section for more interactive displays.