Use Layout Built-ins

White Label Data allows you to layout a page quickly using a modern data application design, without the need to hire a UI designer. There are built-in HTML tags that let you layout your visualizations on a page and organize them in a way that makes sense for your application.

Cards

Cards are a way to organize your page into panels. You can place visualizations and other HTML markup on cards using the <card> tag. The card tag optionally takes borderless as an option to allow you to align elements as if they were on cards but without the frame.

Cards

Grid Layout

A page is built up one row at a time using the <row> tag. All elements, including visualizations, that you want to appear on the same row should be placed between <row> tags.

A page in White Label Data has an invisible 12-column layout. If you want an element to take up the full width, you specify that it is 12 columns wide. A half-width element would be 6 columns, and so on. The <card> tag takes the number of columns as an argument. Here is an example of a visualization that is placed on a card and configured to be 8 columns wide:

<row>
   <card height=70 cols=8><my_visualization/></card>
</row>

Tabs

You can create tabs within pages using the the <tab>, <tabset> and <tabcontent> tags. Within these tags, you can place both standard HTML and visualization tags. The <tabset> tag is used to denote the buttons at the top for switching between tabs. Then, the content of each tab goes in <tabcontent> in the same order as the tabs are defined in tabset. It is even okay to put visualizations on the tab buttons. Here is an example:

<card height=620 cols=12>
    <tabset>
      <tab><sv_total/></tab>
      <tab><sv_states/></tab>
    </tabset>
    <tabcontent><bar_bystate/></tabcontent>
    <tabcontent><choropleth_all/></tabcontent>
</card>

Tabs