Two-Column List as a Template (with Icon)?

How To
1

Hello!

I’m still new to Bricks and haven’t completely figured it out yet. Maybe somebody could give me some advice…

What’s the best way to do the following?: I’d like to create a template for a two-column list. Basically, I want everything pre-styled (that should be the idea), and when I use the template, I only want to insert the individual list items.

I’m currently struggling with the columns… In the end, it’s supposed to be one list. How can I distribute the list items across two columns (and multiple rows)? I just did find ways to distribute it as list by list.

The icon should also be predefined in the template, but as soon as I insert the template into my page and try to use it, I have to define the icon for each list item again… what am I doing wrong?

I think in components, where parameters are passed…

Thanks a lot :slight_smile:

2

Hi Ani,
Welcome to the forum!

You can “split” a list using CSS columns in custom CSS. See these general instructions, and a basic example you can copy and paste:

{"content":[{"id":"cyqknd","name":"section","parent":0,"children":["zsmmuy"],"settings":{}},{"id":"zsmmuy","name":"container","parent":"cyqknd","children":["dbzmlb"],"settings":{}},{"id":"dbzmlb","name":"div","parent":"zsmmuy","children":["fepsoo","fwgqdn","yscpsi"],"settings":{"tag":"ul","_cssGlobalClasses":["djvjzz"]}},{"id":"fepsoo","name":"div","parent":"dbzmlb","children":["hgddip","jmspfx"],"settings":{"_cssGlobalClasses":["tusbrr"],"tag":"li"}},{"id":"hgddip","name":"icon","parent":"fepsoo","children":[],"settings":{"icon":{"library":"themify","icon":"ti-star"}}},{"id":"jmspfx","name":"text-basic","parent":"fepsoo","children":[],"settings":{"text":"Here goes your text ... Select any part of your text to access the formatting toolbar."}},{"id":"fwgqdn","name":"div","parent":"dbzmlb","children":["oeazxc","zpdhwx"],"settings":{"_cssGlobalClasses":["tusbrr"],"tag":"li"}},{"id":"oeazxc","name":"icon","parent":"fwgqdn","children":[],"settings":{"icon":{"library":"themify","icon":"ti-star"}}},{"id":"zpdhwx","name":"text-basic","parent":"fwgqdn","children":[],"settings":{"text":"Here goes your text ... Select any part of your text to access the formatting toolbar."}},{"id":"yscpsi","name":"div","parent":"dbzmlb","children":["ddhdmx","uqfnok"],"settings":{"_cssGlobalClasses":["tusbrr"],"tag":"li"}},{"id":"ddhdmx","name":"icon","parent":"yscpsi","children":[],"settings":{"icon":{"library":"themify","icon":"ti-star"}}},{"id":"uqfnok","name":"text-basic","parent":"yscpsi","children":[],"settings":{"text":"Here goes your text ... Select any part of your text to access the formatting toolbar."}}],"source":"bricksCopiedElements","sourceUrl":"https://brxdev.local","version":"1.12.3","globalClasses":[{"id":"djvjzz","name":"list-cols","settings":{"_cssCustom":".list-cols {\n list-style-type: none;\n margin: 0;\n padding: 0;\n \n \n -webkit-column-count: 2; /* Chrome/Opera, Safari */\n -moz-column-count: 2; /* Mozilla Firefox */\n column-count: 2;\n\n /* Properties below are optional: */\n -webkit-column-gap: 4.8rem; /* Chrome/Opera, Safari */\n -moz-column-gap: 4.8rem; /* Mozilla Firefox */\n column-gap: 4.8rem;\n\n\trow-gap: 80px;\n\n}\n\n.list-cols__item:not(:nth-child(-n+1)) {\n margin-top: 4.8rem;\n}","_cssCustom:mobile_portrait":".list-cols {\n -webkit-column-count: 1; /* Chrome/Opera, Safari */\n -moz-column-count: 1; /* Mozilla Firefox */\n column-count: 1; \n}"}},{"id":"tusbrr","name":"list-cols__item","settings":{"_display":"flex","_direction":"row","_columnGap":"1.6rem","_alignItems":"center"}}],"globalElements":[]}

Best regards,
timmse

1 Like
3

Hi Timmse and thank you very much!!! I didn’t know yet, that I can create a custom code-Element in Bricks Builder :smiley:

Helps a lot! Thank you :slight_smile:

4

You don’t even need a code element since you can add custom CSS to any element, page, template, or the Bricks settings :slight_smile:

5

Ultimately, I had hoped that I could force a two-column layout using the “List” element and a few settings. If I were to code it myself, I would simply create a component that takes the list items as text and arranges them neatly inside a <ul> as <li>. The <ul> would have display: flex; flex-direction: row; flex-wrap: wrap; and maybe a fix width, and the <li> elements would have a fixed width (flex: 0 1 50%; ) and stretch into place.

However, I haven’t quite figured out where and how to set this up properly in Bricks Builder. It seems like I can only target individual <li> elements but not all of them at once?!

7

I’ve figured it out now… Turns out the devil was in the details of the custom CSS indeed :smiley:

1 Like