How Do I Wagtail?

How Do I Wagtail?

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

A copy 2@4x-100.jpg

Lorem ipsum dolor

C copy 2@4x-100.jpg

Lorem ipsum dolor

D copy 2@4x-100.jpg

Lorem ipsum dolor

B copy 2@4x-100.jpg

Lorem ipsum dolor

Category 2

B copy 2@4x-100.jpg

Lorem ipsum dolor

B copy 2@4x-100.jpg

Lorem ipsum dolor

D copy 2@4x-100.jpg

Lorem ipsum dolor

C copy 2@4x-100.jpg

Lorem ipsum dolor

Category 3

A copy 2@4x-100.jpg

Lorem ipsum dolor

C copy 2@4x-100.jpg

Lorem ipsum dolor

B copy 2@4x-100.jpg

Lorem ipsum dolor

A copy 2@4x-100.jpg

Lorem ipsum dolor

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

A-no-logo@4x-100.jpg

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at risus in elit vehicula ullamcorper eget eu metus. Quisque nisl tellus, semper sed cursus eget, porttitor ac mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed sit amet rhoncus mauris. Aliquam viverra lectus a.

A copy@4x-100.jpg

Category 1

B copy@4x-100.jpg

Category 2

C copy@4x-100.jpg

Category 3

D copy@4x-100.jpg

Category 4


Rating 2

B-no-logo@4x-100.jpg

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at risus in elit vehicula ullamcorper eget eu metus. Quisque nisl tellus, semper sed cursus eget, porttitor ac mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed sit amet rhoncus mauris. Aliquam viverra lectus a.

A copy@4x-100.jpg

Category 1

B copy@4x-100.jpg

Category 2

C copy@4x-100.jpg

Category 3

D copy@4x-100.jpg

Category 4

This is part of a broader movement for a healthy internet. See more.