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 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.
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
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>
You can create tabs within pages using the the
<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>