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>