Columns Block

[badvision]

We need a columns block which supports variants for different combinations of column/layout.

1) The block needs to support 2, 3 or 4 columns 2) The different layouts are:

• 33 / 66
• 50 / 50
• 66 / 33
• 33 / 33 / 33
• 25 / 25 / 25 / 25 3) Styles must be named in a way that does not break CSS (namely, a style has to start with a letter, not a number) 4) The 3 and 4 column styles can just be shorted to represent three or four columns, it's assumed the space is distributed evenly. 5) If a column has an image as the first child, that image should be set as a background image for the cell, maintaining its proportionality while filling the cell. If we need any variations of this, they will be described by another story. 6) If an image is not the first element of the column, it should be treated as a regular block/inline block element with a max width of the column so that it resizes down as the screen becomes more narrow. 7) For four-columns: if a row has only two columns, then that row should be treated as 50/50. This is important for mobile.

Mobile requirements: For 2 and 3 columns, the columns should just stack vertically. For 4 columns, it should stack vertically with the left two columns on top and the right two columns on the bottom.

Example pages:

Cols	Split	Example 1	Example 2
2	33/66	https://www.momentive.com/en-us/about	https://www.momentive.jp/content/momentive/jp/ja/company/company1.html
2	66/33	https://www.momentive.com/en-us/about/careers	https://www.momentive.com/en-us/about
2	50/50	https://www.momentive.com/en-us/about
4	25/25/25/25	https://www.momentive.com/en-us/about
3	33/33/33	https://www.momentive.com/en-us/about/careers

[anuj-adobe]

I am using default column block in header block as well. Please make sure, the implementation support that as well. Used in -

1. secondary navigation when hover on "+PRODUCTS" in desktop view.
2. secondary navigation when hover on "+ORDER PRODUCTS" in desktop view.
3. secondary navigation when click on "+ORDER PRODUCTS" in mobile view.

[anuraggupta228]

Noted!, however I don't think we should be making any changes in OOTB block (for eg-> "Column" here) and more or less, I'll be introducing a new block (probably via name- "Column-Customised") and there on the basis of what variant the block gets call for, i'll be internally creating Column block like [1] with target variant and will create styling specifc to that variant. Do let me know if that doesn't makes sense.

[1]: var columnExtended = buildBlock('Column', {..Variant-data}) decorateBlock(columnExtended); loadBlock(columnExtended);