Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.evidence.studio/llms.txt

Use this file to discover all available pages before exploring further.

Use the Row and Stack components to arrange content horizontally (Row) or vertically (Stack). These components are especially useful for building dashboards and responsive layouts.

​
Row

  • Arranges elements in a horizontal row.
  • Elements will wrap to the next line if there isn’t enough space.
  • Useful for placing charts, tables, or values side by side.

​
Props

  • align (string, default: stretch): How to vertically align items. Options: top, center, bottom, or stretch.

​
Example

{% row %}
    {% bar_chart data="demo.order_details" x="date" y="sum(unit_price * quantity)" date_grain="month" /%}
    {% line_chart data="demo.order_details" x="date" y="sum(quantity)" date_grain="month" /%}
    {% area_chart data="demo.order_details" x="date" y="count(order_id)" date_grain="month" /%}
{% /row %}

​
Stack

  • Arranges elements in a vertical stack.
  • Useful for grouping related elements in a column within a row.
  • Will have no effect on components that are already vertically aligned.

​
Props

  • align (string, default: stretch): How to horizontally align items. Options: left, center, right, or stretch.
{% row %}
    {% stack %}
        {% bar_chart data="demo.order_details" x="date" y="sum(unit_price * quantity)" date_grain="month" /%}
        {% line_chart data="demo.order_details" x="date" y="sum(quantity)" date_grain="month" /%}
    {% /stack %}
    {% table data="demo.order_details" limit=20 /%}
{% /row %}

​
Tip

  • Use the align prop to control alignment of elements within the layout.
  • Rows wrap their elements if there isn’t enough horizontal space. This ensures that the layouts look good on all screen sizes. Each component has a default minimum width.
  • Stacks always arrange elements vertically.