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=
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css"
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">
<!-- 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">GeeksforGeeks</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
Similar Reads
Primer CSS Blue Box Theme Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
2 min read
Primer CSS Box Danger Theme Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
2 min read
Primer CSS Box Shadow Remove Primer CSS is a free open-source CSS framework that is built upon systems that create the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CS
2 min read
Primer CSS Box shadow Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
4 min read
Primer CSS Small Box Shadow Primer CSS is a free open-source CSS framework that is built upon systems that create the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CS
2 min read