Page Row

Basic Structure

Each page of your UI will most likely have data structured in rows and columns. First you'll include the type of row you want, then include of that row will have the columns. The rows will add the correct padding that you need.

Components

Row
The most basic row that you can have. You'll normally use this with a 100% width column or two 50% width columns.

RowBorder
This will add a vertical border between two rows.

Props

mobile_reverse boolean false
When the columns in a row stack on mobile screens, setting this to true will reverse the stacking.

<script>
// Inside of your page file.

// Import the rows
import { Row, RowBorder } from "bubbles-ui";

// Import Columns
import { Column100, Column50, Column } from "bubbles-ui";
</script>

<Row>
    <Column100>
        Full width content here
    <Column100>
</Row>

<Row>
    <Column50>
        First half width column
    <Column50>
     <Column50>
        Second half width column
    <Column50>
</Row>

<RowBorder>
    <Column>
        This column will be 66% width
    <Column>
     <Column>
         This column will be 33% width
    <Column>
</RowBorder>