{
    "status": "prototype",
    "context": {
        "params":{
            "columns": [
                {
                "content": "Column 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae lorem at mauris pellentesque semper. Nam quis nulla venenatis, rhoncus ligula ut, pellentesque ipsum. Suspendisse suscipit magna non tellus vulputate malesuada."
                },
                {
                "content": "Column 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae lorem at mauris pellentesque semper. Nam quis nulla venenatis, rhoncus ligula ut, pellentesque ipsum. Suspendisse suscipit magna non tellus vulputate malesuada."
                },
                {
                "content": "Column 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae lorem at mauris pellentesque semper. Nam quis nulla venenatis, rhoncus ligula ut, pellentesque ipsum. Suspendisse suscipit magna non tellus vulputate malesuada."
                }
            ]
        }
    },
    "variants": [
        {
            "name": "No gaps between columns",
            "context": {
                "params":{
                    "modifiers": " sta-row--gapless",
                    "columns": [
                        {
                        "content": "Column 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae lorem at mauris pellentesque semper. Nam quis nulla venenatis, rhoncus ligula ut, pellentesque ipsum. Suspendisse suscipit magna non tellus vulputate malesuada."
                        },
                        {
                        "content": "Column 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae lorem at mauris pellentesque semper. Nam quis nulla venenatis, rhoncus ligula ut, pellentesque ipsum. Suspendisse suscipit magna non tellus vulputate malesuada."
                        },
                        {
                        "content": "Column 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae lorem at mauris pellentesque semper. Nam quis nulla venenatis, rhoncus ligula ut, pellentesque ipsum. Suspendisse suscipit magna non tellus vulputate malesuada."
                        }

                    ]
                }
            }
        },
        {
            "name": "Vertical align centre",
            "context": {
                "params":{
                    "modifiers": " sta-row--align-center",
                    "columns": [
                        {
                        "content": "Column 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
                        },
                        {
                        "content": "Column 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae lorem at mauris pellentesque semper. Nam quis nulla venenatis, rhoncus ligula ut, pellentesque ipsum. Suspendisse suscipit magna non tellus vulputate malesuada."
                        },
                        {
                        "content": "Column 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae lorem at mauris pellentesque semper. Nam quis nulla venenatis, rhoncus ligula ut, pellentesque ipsum. "
                        }

                    ]
                }
            }
        },
        {
            "name": "Vertical align stretch",
            "context": {
                "params":{
                    "modifiers": " sta-row--align-stretch",
                    "columns": [
                        {
                        "content": "Column 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
                        },
                        {
                        "content": "Column 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae lorem at mauris pellentesque semper. Nam quis nulla venenatis, rhoncus ligula ut, pellentesque ipsum. Suspendisse suscipit magna non tellus vulputate malesuada."
                        },
                        {
                        "content": "Column 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae lorem at mauris pellentesque semper. Nam quis nulla venenatis, rhoncus ligula ut, pellentesque ipsum. "
                        }

                    ]
                }
            }
        },
        {
            "name": "Vertical align bottom",
            "context": {
                "params":{
                    "modifiers": " sta-row--align-bottom",
                    "columns": [
                        {
                        "content": "Column 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
                        },
                        {
                        "content": "Column 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae lorem at mauris pellentesque semper. Nam quis nulla venenatis, rhoncus ligula ut, pellentesque ipsum. Suspendisse suscipit magna non tellus vulputate malesuada."
                        },
                        {
                        "content": "Column 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae lorem at mauris pellentesque semper. Nam quis nulla venenatis, rhoncus ligula ut, pellentesque ipsum. "
                        }

                    ]
                }
            }
        },
        {
            "name": "Reverse direction (right to left)",
            "context": {
                "params":{
                    "modifiers": " sta-row--reverse",
                    "columns": [
                        {
                        "content": "Column 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae lorem at mauris pellentesque semper. Nam quis nulla venenatis, rhoncus ligula ut, pellentesque ipsum. Suspendisse suscipit magna non tellus vulputate malesuada."
                        },
                        {
                        "content": "Column 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae lorem at mauris pellentesque semper. Nam quis nulla venenatis, rhoncus ligula ut, pellentesque ipsum. Suspendisse suscipit magna non tellus vulputate malesuada."
                        },
                        {
                        "content": "Column 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae lorem at mauris pellentesque semper. Nam quis nulla venenatis, rhoncus ligula ut, pellentesque ipsum. Suspendisse suscipit magna non tellus vulputate malesuada."
                        }

                    ]
                }
            }
        },
        {
            "name": "Named widths that span rows",
            "context": {
                "params":{
                    "modifiers": " sta-row--multiline",
                    "columns": [
                        {
                        "content": "Full",
                        "modifiers": " sta-col--full"
                        },
                        {
                        "content": "One half",
                        "modifiers": " sta-col--one-half"
                        },
                        {
                        "content": "One half",
                        "modifiers": " sta-col--one-half"
                        },
                        {
                        "content": "One third",
                        "modifiers": " sta-col--one-third"
                        },
                        {
                        "content": "Two thirds",
                        "modifiers": " sta-col--two-thirds"
                        },
                        {
                        "content": "One quarter",
                        "modifiers": " sta-col--one-quarter"
                        },
                        {
                        "content": "Three quarters",
                        "modifiers": " sta-col--three-quarters"
                        },
                        {
                        "content": "One fifth",
                        "modifiers": " sta-col--one-fifth"
                        },
                        {
                        "content": "Four fifths",
                        "modifiers": " sta-col--four-fifths"
                        },
                        {
                        "content": "Two fifths",
                        "modifiers": " sta-col--two-fifths"
                        },
                        {
                        "content": "Three fifths",
                        "modifiers": " sta-col--three-fifths"
                        }

                    ]
                }
            }
        },
        {
            "name": "Numbered widths that span rows",
            "context": {
                "params":{
                    "modifiers": " sta-row--multiline",
                    "columns": [
                        {
                        "content": "11/12",
                        "modifiers": " sta-col--11"
                        },
                        {
                        "content": "1/12",
                        "modifiers": " sta-col--1"
                        },
                        {
                        "content": "10/12",
                        "modifiers": " sta-col--10"
                        },
                        {
                        "content": "2/12",
                        "modifiers": " sta-col--2"
                        },
                        {
                        "content": "9/12",
                        "modifiers": " sta-col--9"
                        },
                        {
                        "content": "3/12",
                        "modifiers": " sta-col--3"
                        },
                        {
                        "content": "8/12",
                        "modifiers": " sta-col--8"
                        },
                        {
                        "content": "4/12",
                        "modifiers": " sta-col--4"
                        },
                        {
                        "content": "7/12",
                        "modifiers": " sta-col--7"
                        },
                        {
                        "content": "5/12",
                        "modifiers": " sta-col--5"
                        },
                        {
                        "content": "6/12",
                        "modifiers": " sta-col--6"
                        },
                        {
                        "content": "Auto"
                        }

                    ]
                }
            }
        },
        {
            "name": "Offset with named widths",
            "context": {
                "params":{
                    "modifiers": " sta-row--multiline",
                    "columns": [
                        {
                        "content": "One half with one quarter offset",
                        "modifiers": " sta-col--one-half sta-col--offset-one-quarter"
                        },
                        {
                        "content": "One half with one half offset",
                        "modifiers": " sta-col--one-half sta-col--offset-one-half"
                        },
                        {
                        "content": "One third with two fifths offset",
                        "modifiers": " sta-col--one-third sta-col--offset-two-fifths"
                        }
                    ]
                }
            }
        },
        {
            "name": "Offset with numbered widths reversed",
            "context": {
                "params":{
                    "modifiers": " sta-row--multiline sta-row--reverse",
                    "columns": [
                        {
                        "content": "3 column width with 2 column offset",
                        "modifiers": " sta-col--3 sta-col--offset-2"
                        },
                        {
                        "content": "6 column width with 4 column offset",
                        "modifiers": " sta-col--6 sta-col--offset-4"
                        }
                    ]
                }
            }
        },
        {
            "name": "Stack columns until md size",
            "context": {
                "params":{
                    "modifiers": " sta-row--md",
                    "columns": [
                        {
                        "content": "Column 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
                        },
                        {
                        "content": "Column 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae lorem at mauris pellentesque semper. Nam quis nulla venenatis, rhoncus ligula ut, pellentesque ipsum. Suspendisse suscipit magna non tellus vulputate malesuada."
                        },
                        {
                        "content": "Column 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae lorem at mauris pellentesque semper. Nam quis nulla venenatis, rhoncus ligula ut, pellentesque ipsum. "
                        }
                    ]
                }
            }
        },
        {
            "name": "Collapse column width",
            "context": {
                "params":{
                    "modifiers": " sta-row--md",
                    "columns": [
                        {
                        "content": "<div style=\"width:200px\">This is 200px wide</div>",
                        "modifiers": " sta-col--collapse"
                        },
                        {
                        "content": "Column 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae lorem at mauris pellentesque semper. Nam quis nulla venenatis, rhoncus ligula ut, pellentesque ipsum. Suspendisse suscipit magna non tellus vulputate malesuada."
                        },
                        {
                        "content": "Column 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae lorem at mauris pellentesque semper. Nam quis nulla venenatis, rhoncus ligula ut, pellentesque ipsum. "
                        }
                    ]
                }
            }
        },
        {
            "name": "Column widths at breakpoints",
            "context": {
                "params":{
                    "modifiers": " sta-row--md sta-row--multiline",
                    "columns": [
                        {
                        "content": "Column 1 - Full width on md size. Lorem ipsum dolor sit amet, consectetur adipiscing elit. ",
                        "modifiers": " sta-col--full-md"
                        },
                        {
                        "content": "Column 2 - 5/12 width on sizes md and up. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae lorem at mauris pellentesque semper. Nam quis nulla venenatis, rhoncus ligula ut, pellentesque ipsum. Suspendisse suscipit magna non tellus vulputate malesuada.",
                        "modifiers": " sta-col--5-md sta-col--5-lg sta-col--5-xl sta-col--5-xxl"
                        },
                        {
                        "content": "Column 3 - 7/12 width on sizes md and up.  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae lorem at mauris pellentesque semper. Nam quis nulla venenatis, rhoncus ligula ut, pellentesque ipsum. ",
                        "modifiers": " sta-col--7-md sta-col--7-lg sta-col--7-xl sta-col--7-xxl"
                        }
                    ]
                }
            }
        }
    ]
}