What is it for?
Our Flourish Cards template empowers you to display almost any type of content, instead of just a dataset. You can choose between a grid or carousel and can additionally configure content to appear or play on hover or click.
How to get started
- 1
-
Pick one of the starting points from our template chooser. Keep in mind that these are all just starting points, and you can adjust them however you like using the settings.
- 2
-
Edit the text, images and data bindings in the Data tab to display different content. Our example features poets and their artistic movements.
So we proceed to bind the columns to our data bindings. If you need to change the data type of a column, you are able to do that as described here.
- 3
-
We are making a Carousel - since it is a great fit for portraits. Head over to the View settings and opt for Carousel. You are able to choose between a Scroll bar or Buttons, and also set the bar background, color and height.
In case you want the cards carousel to autoplay, you can find more information here.
- 4
-
To further customize the cards, move on to the Cards settings. Through the Card layout options, you can choose Portrait, Landscape or Image overlay.
To bring the cards closer to your vision, the Card structure settings allow you to choose the layout. Image above text, Title above image, Title and subtitle above image, and Image below text are the available options.
Since we are creating portaits of the poets, we opt for Portrait and Image above text.
Further down, you can set the Width of your cards, the padding, and also the horizontal and vertical margins.
It is also possible to style the cards' border, set its weight, shape, and roundness. By turning on Shadow behind card, you can define the color and blur.
For near endless customization options, you can enable Customize card HTML.
- 5
-
Through the Text settings, you can set the font size, color weight for the Title and the Subtitle.
By turning on Advanced settings, you can define the opacity, line height, space between the different text sections, and also the alignment.
For the text settings, you can also choose to add column names.
- 6
-
Through the Image settings, you will find an array of options to make the images work better in the cards. You can set their width, aspect ratio (as a multiplier of the image's width), and also choose the images to Fill or Fit the cards.
Additionally, it is possible to change the margins and the space between image and text. For the border, it is possible to change the weight, shape and roundness.
If you turn on Advanced image styling, you can alter the opacity of the images, their contrast and brightness.
Blend mode determines how the card images blend with their background color. Options like Normal create no blending, Multiply darkens, Screen lightens, and Overlay combines both - creating different visual effects.
In case some of the images are missing, you can upload an icon to display instead or hide the cards outright.
- 7
-
On to Colors, you are able to set a fixed color for images and cards.
- 8
-
In our example, we do not need popups or panel so we will turn them to None - in case you want to know more, you can read about popups and panels here.
- 9
-
On the dataset, we have set column D, which contains the artistic movements, as a filter, so we centrally align it through the Alignment option in Controls.
In this help document, you can find out more about filters.
- 10
-
In the Header options, we add our title and subtitle.
TIP: Find out more about all the different header and footer options, here.