Primer CSS Box Row Themes
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 = "https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" rel = "stylesheet" /> </ head > < body > < div class = "text-center" > < h2 style = "color:green" >w3wiki</ h2 > < strong >Primer CSS - Row Themes</ strong > </ div > < div class = "d-flex flex-justify-center" > <!-- Primer CSS Box --> < 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 = "https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" rel = "stylesheet" /> </ head > < body > < div class = "text-center" > < h2 style = "color:green" >w3wiki</ h2 > < h4 >Primer CSS - Row Themes</ h4 > </ div > < div class = "d-flex flex-justify-center" > <!-- Primer CSS Box --> < 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
Contact Us