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.

Output:            

👁 Image

Example 2: This example shows the use of the focus color classes with and without the navigation-focus class.

Output:            

👁 Image

Reference: https://primer.style/#row-themes