UIUX Component

Define style to any elements which has a class that starts with "boxset", for an example, classes such as name "boxset-one", "boxset-two", "boxset-blah-blah" etc. DEMO Class .boxset Class .boxset-one Class .boxset-two HTML < h2 class = "boxset" > Class . boxset </ h2 > < h2 class = "boxset-one" > Class . boxset - one </ h2 > < h2 class = "boxset-two" > Class . boxset - two </ h2 > CSS [class ^= "boxset" ] { color: magenta; }

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers by default, to make number descending order add attribute reversed in ol element. DEMO Creeping Death (Ride The Lightning, 1984) Master Of Puppets (Master Of Puppets, 1986) One (…And Justice For All, 1988) For Whom The Bell Tolls (Ride The Lightning, 1984) Battery (Master Of Puppets, 1986) HTML < ol reversed > < li > Creeping Death (Ride The Lightning, 1984 ) </ li > < li > Master Of Puppets (Master Of Puppets, 1986 ) </ li > < li > One ( … And Justice For All, 1988 ) </ li > < li > For Whom The Bell Tolls (Ride The Lightning, 1984 ) </ li > < li > Battery (Master Of Puppets, 1986 ) </ li > </ ol >

Simple native progress bar - and it will automatically update whenever you change the value via JS etc. In progress element use these attributes value="25" max="100" . DEMO 25% HTML < progress value = "25" max = "100" > 25 %</ progress >

Images affect speed page loading. There is a native loading attribute with the lazy value for img elements! Image will be downloaded only when a browser have to display they in viewport. Just add attribute  loading="lazy" for img element. DEMO HTML < img src = "../imagepath.jpg" loading = "lazy" alt = "Image Title" >