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 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.
Default
<div class="comet-row">
<div class="comet-row__inner">
Content
</div>
</div>
{% call comet.row() %}Content{% endcall %}
Macro params referenceCommon Colors
Extend a row to apply a common background color, whether dark, light, white, or black.
<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<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<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<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 referenceBlack 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.
<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.
<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 referenceCustom 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.
<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 referenceCustom 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.
<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 referenceClass Reference
| Class | Applies to | Outcome |
|---|---|---|
|
|
Any block element |
Establishes the row container. |
|
|
The direct child element of |
Bounds content to a |
|
|
|
Adds responsive inset padding. |
|
|
|
Displays the row with a standard dark background color. |
|
|
|
Displays the row with a standard light background color. |
|
|
|
Displays the row with a product's theme color. |
|
|
|
Displays the row with a white background, particularly helpful when the overall page's background is not white. |
|
|
|
Displays the row with a black background. |
Macro Reference
| Parameter | Values | Description |
|---|---|---|
|
class |
|
Custom classes to the |
|
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 |
|
background_image |
URL location of image, relative to page |
Applies background image to the |