How to make custom contextually colored cards with SCSS
Introduction
During the course of writing my article on Advent of Code challenges, I wanted a way to add colored cards to signify things I think I did well or poorly on in my solutions, without adding another external dependency just for this feature.
How
Colors
I used some base colors from the Skeleton UI Seafoam theme, and used a site called tint.dev to get the different color “weights”:
I used some sass mixins to apply the same styles with different colors to each card.
Icons
I also added some svg icons to the cards that I got from fontawesome free icons. These are displayed using the ::before pseudo-element by setting the content property with a data-url for the svg. Sass string interpolation and a hacky function to convert the # at the beginning of the color to a url-encoded %23 are used to set different colors for each icon.
Usage
To use these cards in an article, you just use the custom class decorator on any block of content:
1
2
Some content
{: .card-success }
Here’s how they look:
odio ut sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor elit sed vulputate mi sit amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero nunc consequat interdum varius sit amet mattis vulputate enim nulla aliquet porttitor
odio ut sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor elit sed vulputate mi sit amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero nunc consequat interdum varius sit amet mattis vulputate enim nulla aliquet porttitor
odio ut sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor elit sed vulputate mi sit amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero nunc consequat interdum varius sit amet mattis vulputate enim nulla aliquet porttitor
odio ut sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor elit sed vulputate mi sit amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero nunc consequat interdum varius sit amet mattis vulputate enim nulla aliquet porttitor
Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
// https://stackoverflow.com/a/25478589
@function url-friendly-color($color) {
@return '%23' + str-slice('#{$color}', 2, -1)
}
$color-shadow-gray: rgba(50,50,50,.8);
$color-text: black;
// ERROR: https://tints.dev/error/CC3333
$color-error-50: #FAEBEB;
$color-error-100: #F5D6D6;
$color-error-200: #EBADAD;
$color-error-300: #E08585;
$color-error-400: #D65C5C;
$color-error-500: #CC3333;
$color-error-600: #A32929;
$color-error-700: #7A1F1F;
$color-error-800: #521414;
$color-error-900: #290A0A;
$color-error-950: #140505;
// WARN: https://tints.dev/warn/EAB308
$color-warn-50: #FEF8E6;
$color-warn-100: #FDF1CE;
$color-warn-200: #FBE297;
$color-warn-300: #FAD566;
$color-warn-400: #F8C630;
$color-warn-500: #EAB308;
$color-warn-600: #BB8E06;
$color-warn-700: #8F6C05;
$color-warn-800: #5E4703;
$color-warn-900: #312502;
$color-warn-950: #191301;
// SUCCESS: https://tints.dev/sucess/84CC16
$color-success-50: #F2FCE3;
$color-success-100: #E7FACC;
$color-success-200: #D0F49A;
$color-success-300: #B8EF67;
$color-success-400: #9FE930;
$color-success-500: #84CC16;
$color-success-600: #68A111;
$color-success-700: #507C0D;
$color-success-800: #355309;
$color-success-900: #1B2904;
$color-success-950: #0C1202;
// INFO: https://www.tints.dev/info/86D0CB
$color-info-50: #F4FBFA;
$color-info-100: #E5F5F4;
$color-info-200: #CFECEA;
$color-info-300: #B6E2DF;
$color-info-400: #A0DAD6;
$color-info-500: #86D0CB;
$color-info-600: #56BDB6;
$color-info-700: #39938D;
$color-info-800: #27635F;
$color-info-900: #13302E;
$color-info-950: #0A1A19;
// Mixin for cards of different colors
@mixin card($color-light, $color-dark, $color-text) {
//styling for colors and border
background: $color-light;
outline: 1px solid $color-dark;
border-radius: .5rem;
padding: .5rem;
padding-left: .5rem;
box-shadow: 0px 0px 5px 1px var(--text-color), inset 0px 0px 4px 1px $color-dark;
color: $color-text;
font-size: 1rem;
padding-right: .5rem;
//layout for icons
display: flex;
align-items: center;
justify-content: center;
}
// card classes
.card-error {
@include card($color-error-200, $color-error-500, $color-text)
}
.card-warn {
@include card($color-warn-200, $color-warn-500, $color-text)
}
.card-success {
@include card($color-success-200, $color-success-500, $color-text)
}
.card-info {
@include card($color-info-200, $color-info-500, $color-text)
}
// card icons
.card-error::before,
.card-warn::before,
.card-success::before,
.card-info::before {
padding-right: 1rem;
padding-left: .5rem;
}
.card-error::before {
content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="1.5rem" viewBox="0 0 512 512"><path style="fill:#{ url-friendly-color($color-error-500) }" d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"/></svg>');
}
.card-warn::before {
content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="1.5rem" viewBox="0 0 512 512"><path style="fill:#{ url-friendly-color($color-warn-500) }" d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"/></svg>');
color: $color-warn-500;
}
.card-success::before {
content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="1.5rem" viewBox="0 0 512 512"><path style="fill:#{ url-friendly-color($color-success-500) }" d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-111 111-47-47c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0L369 209z"/></svg>');
color: $color-success-500;
}
.card-info::before {
content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="1.5rem" viewBox="0 0 512 512"><path style="fill:#{ url-friendly-color($color-info-500) }" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>');
color: $color-info-500;
}