Styling Hacks

Tables

Currently there is no table functionality in Wagtail. There is a way, however, to circumvent this by using the Image grid component. The Image grid component allows four images and captions to be uploaded up to four in a row. On mobile, the arrangement will change to up to two in a row.

Figure 1: Table created using the Paragraph and Image grid component

Category 1

Category 2

Category 3

Get Creative ...

This style hack can be pushed further by being creative with the images and combining it with other components. The example below creates a 'scorecard' using the Image text component to give an overall grade while the Image grid component shows a breakdown. Different images are used to show nuances in the grading, the category and is used to distinguish the overall grade from the breakdown grades.

Figure 2: Table created using Image text and Image grid component

Rating 1

Rating 2