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.3.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.3.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/#row-themes

Primer CSS Box Row Themes

Explore