This demo stems from a question about how to have a map key without having the icon and text on two separate levels on mobile. The easiest way, in my opinion, is custom code and CSS (at the bottom) but using Avada elements, you can use nested columns and just set the columns not to be 1/1 on mobile. The checklist would be another element that would fit the bill, but you need CSS to change the colors.
Map Key
This option uses nested columns, separators, icons, and text elements. The columns are set at 10% and 90% at all breakpoints. This can be difficult to get just right.
Laoreet commodi id magnam? Ornare earum gravida, suscipit.
Laoreet commodi id magnam? Ornare earum gravida, suscipit.
Laoreet commodi id magnam? Ornare earum gravida, suscipit.
Laoreet commodi id magnam? Ornare earum gravida, suscipit.
Map Key
This option uses a simple list and custom CSS and can be very flexible.
- Eget nullam recusandae? Diamlorem cras congue ducimus gravida.
- Esse irure, ultricies? Aute eiusmod taciti suspendisse vestibulum.
- Faucibus nisl fugiat, lectus, justo wisi natus ipsa.
- Inceptos imperdiet voluptate nostrum minus, risus ullamco molestie.
Map Key
This option uses custom code and CSS, and is the most flexible. It also highlights why the nested columns of Avada are very limiting.
-
Esse irure, ultricies? Aute eiusmod taciti suspendisse vestibulum.
-
Esse irure, ultricies? Aute eiusmod taciti suspendisse vestibulum.
-
Esse irure, ultricies? Aute eiusmod taciti suspendisse vestibulum.
-
Esse irure, ultricies? Aute eiusmod taciti suspendisse vestibulum.
