Page Column

Version 0.9.0-next.31 for Svelte Kit ^1.0.1

Basic Structure

After you have selected the type of Row that you want to include, you need to select the column that you want to include. There are a few options that Bubbles includes by default.

All of the column types will respond to mobile sizes.



Components


Column
This column will be dynamic. The first column will be 66% of the width, with the second column being 33%. You should not use this for more than two columns.

Column100
This column will take up 100% of the Row


Column50
This column will take up 50% of the Row


<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>

Column 100

Column 66

Column 33

Column 50

Column 50