Rows

Format and organize content linearly down a page.

Introduction

The Row is an intermediate container between a page’s shell and content components inside, each positioned in a stack between page’s Product Bar header and Footer.

Rows, down a page

Rows enable you to layout content predictably, including Comet spacing for a row’s padding, margins, and responsiveness. In particular, rows can take on background colors and images, often full bleed, to vary displays behind content down a page.

Relating Row and Grid Components

Rows are distinct from the Grid component. Whereas Rows establish a broad, often-full bleed background color and account for responsive margins on both left/right and top/bottom, Grids arrange content within a row into columnar groups, accounting for each column’s responsive characteristics.

For example, a Row can contain multiple “rows” of columnar content, such as two-column display followed by a three-up (33%) column set. In this case, you could use Grid to lay out the two and three column content displays.

Rows, down a page

Default

Use a default row to contain content with Comet’s proper responsive padding, margin, and max-width.
Default row
Content
<div class="comet-row">
    <div class="comet-row__inner">
        Content
    </div>
</div>
                

Common Colors

Extend a row to apply a common background color, whether dark, light, white, or black.

Light row
Content
<div class="comet-row comet-theme--light-background">
    <div class="comet-row__inner">
        Content
    </div>
</div>
                
{% call comet.row(class="comet-theme--light-background") %}Content{% endcall %}
                
Macro params reference
Dark row
Content
<div class="comet-row comet-theme--dark-background">
    <div class="comet-row__inner">
        Content
    </div>
</div>
                
{% call comet.row(class="comet-theme--dark-background") %}Content{% endcall %}
                
Macro params reference
White row
Content
<div class="comet-row comet-theme--white-background">
    <div class="comet-row__inner">
        Content
    </div>
</div>
                
{% call comet.row(class="comet-theme--white-background") %}Content{% endcall %}
                
Macro params reference
Theme row
Content
<div class="comet-row comet-theme--primary-background">
    <div class="comet-row__inner">
        Content
    </div>
</div>
                
{% call comet.row(class="comet-theme--primary-background") %}Content{% endcall %}
                
Macro params reference

Black Backgroundss

Apply a comet-theme--black-background sparingly to an entire row, only when showcasing a single asset or object to achieve a lightbox appeal and focus.

Black row
Content
<div class="comet-row comet-theme--black-background">
    <div class="comet-row__inner">
        Content
    </div>
</div>
                
{% call comet.row(class="comet-theme--black-background") %}Content{% endcall %}
                
Macro params reference
  • Use a black background as the first row of a page layout.
  • Avoid multiple black background rows on a single page.
  • Avoid displaying black background and dark background rows adjacent to one another.

Insets & Spacing

Extra inset spacing is needed when using a background image or color, so that content doesn’t collide with a background’s edge. Apply the conventional responsive inset using the comet-row--inner-inset class.

For example, add .comet-row--inner-inset to space a white row from surrounding colored rows.

Dark, White, then Light
Content
Content
Content
<div class="comet-row comet-theme--dark-background">
    <div class="comet-row__inner">
        Content
    </div>
</div>
<div class="comet-row comet-row--inner-inset">
    <div class="comet-row__inner">
        Content
    </div>
</div>
<div class="comet-row comet-theme--light-background">
    <div class="comet-row__inner">
        Content
    </div>
</div>
                
{% call comet.row(class="comet-theme--dark-background") %}Content{% endcall %}
{% call comet.row(class="comet-row--inner-inset") %}Content{% endcall %}
{% call comet.row(class="comet-theme--light-background") %}Content{% endcall %}
                
Macro params reference

Custom Color

Customize a row to include an approved background color. For example, suppose you extend the .comet-row element to include a background color relevant for your product using a .my-product-theme--yellow-background class. To use conventional insets, also apply .comet-row--inner-inset to the same element.

Custom Color
Content
<div class="comet-row comet-row--inner-inset" style=" background-color: #3D126D">
    <div class="comet-row__inner">
        <span class="overriding-color-so-it-displays-well-on-purple" style="color:#FFF">Content</span>
    </div>
</div>
                
{% call comet.row(background_color="#3D126D", class="comet-row--inner-inset") %}
    <span class="overriding-color-so-it-displays-well-on-purple" style="color:#FFF">Content</span>
{% endcall %}
                
Macro params reference

Custom Image

Add a background image to a row by adding a style=”background-image: url()” property to the .comet-row element. Note the use of comet-theme--dark-background for reversing text color on the largely dark background image.

Background Image
Content
<div class="comet-row comet-theme--dark-background" style=" background-image: url(/images/components/row/cosmos.jpeg)">
    <div class="comet-row__inner">
        Content
    </div>
</div>
                
{% call comet.row(
            background_image="/images/components/row/cosmos.jpeg",
            class="comet-theme--dark-background") %}
    Content
{% endcall %}
                
Macro params reference

Class Reference

Class Applies to Outcome

.comet-row

Any block element

Establishes the row container.

.comet-row__inner

The direct child element of .comet-row

Bounds content to a max-width and applies responsive styles.

.comet-row--inner-inset

.comet-row

Adds responsive inset padding.

.comet-theme--dark-background

.comet-row

Displays the row with a standard dark background color.

.comet-theme--light-background

.comet-row

Displays the row with a standard light background color.

.comet-theme--primary-background

.comet-row

Displays the row with a product's theme color.

.comet-theme--white-background

.comet-row

Displays the row with a white background, particularly helpful when the overall page's background is not white.

.comet-theme--black-background

.comet-row

Displays the row with a black background.

Macro Reference

Parameter Values Description

class

Value

Custom classes to the .comet-row element.

max_height

px

Create a maximum height for row content

min_height

px

Create a minimum height for row content

background_color

RGB or HEX value

Applies background color to the .comet-row element.

background_image

URL location of image, relative to page

Applies background image to the .comet-row element.