Primer CSS Box Row Themes
Last Updated :
19 Apr, 2022
Primer CSS Box is a container that has a white-colored background, rounded corners, and a grey border on all four sides.
In this article, we will be seeing Primer CSS Box Row Themes. The background color of each row in a box can be changed individually. We can also specify the row color on hover or navigation focus.
Primer CSS Box Row Themes Classes:
- Box-row–gray: This class is used to set the background color of the row to gray.
- Box-row–hover-gray: This class is used to set the hover color of the row to gray.
- Box-row–focus-gray: This class is used to set the focus color of the row to gray.
- Box-row–blue: This class is used to set the background color of the row to blue.
- Box-row–hover-blue: This class is used to set the hover color of the row to blue.
- Box-row–focus-blue: This class is used to set the focus color of the row to blue.
- Box-row–yellow: This class is used to set the background color of the row to yellow.
Note: The focus color classes activate when the row also has a navigation-focus class. This can be used when you want to use some event to focus the row.
Syntax:
<div class="Box">
<div class="Box-row Box-row--gray">
...
</div>
</div>
Example 1: This example shows how to use the background and hover color classes mentioned above.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" >
< title >Row Themes - Primer CSS</ title >
< link href =
rel = "stylesheet" />
</ head >
< body >
< div class = "text-center" >
< h2 style = "color:green" >GeeksforGeeks</ h2 >
< strong >Primer CSS - Row Themes</ strong >
</ div >
< div class = "d-flex flex-justify-center" >
< div class = "Box mt-5" >
< div class = "Box-row Box-row--gray" >
Gray box row
</ div >
< div class = "Box-row Box-row--hover-gray" >
This row will turn gray when hovered
</ div >
< div class = "Box-row Box-row--blue" >
Blue Box Row
</ div >
< div class = "Box-row Box-row--hover-blue" >
This row will turn blue when hovered
</ div >
< div class = "Box-row Box-row--yellow" >
Yellow box row
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: This example shows the use of the focus color classes with and without the navigation-focus class.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" >
< title >Row Themes - Primer CSS</ title >
< link href =
rel = "stylesheet" />
</ head >
< body >
< div class = "text-center" >
< h2 style = "color:green" >GeeksforGeeks</ h2 >
< h4 >Primer CSS - Row Themes</ h4 >
</ div >
< div class = "d-flex flex-justify-center" >
< div class = "Box mt-5" >
< div class = "Box-row Box-row--focus-gray" >
Gray Focus color class without navigation focus
</ div >
< div class = "Box-row Box-row--focus-blue" >
Blue Focus color class without navigation focus
</ div >
< div class = "Box-row Box-row--focus-gray navigation-focus" >
Gray Focus color class with navigation focus
</ div >
< div class = "Box-row Box-row--focus-blue navigation-focus" >
Blue Focus color class with navigation focus
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Reference: https://primer.style/css/components/box#row-themes
Share your thoughts in the comments
Please Login to comment...