WAIT UNTIL YOU BEGIN reading this > I have to think it through once more ... to make it a classic mother-child-implementation with nested components ...
ToDos, Spec to build MOLECULES around UiBox / UiColumns. Below I have collected some ideas towards a more generic text-image or media-banner. This all needs a call first and then details. Will be done in sept.
create/enhance the basic nuxt-content implementation for the basic content-distribution element within a section 'ColTmp'. It could be called 'Block' or something similar.
It shares basic functionality with #20 (cta, heading ...)
It is a molecule (on the layer?) and gives some defaults for the usage of the section + container + columns/column stuff already implemented.
It will be posted directly on the root level, cannot be nested inside other components and sets up section + container if needed.
The main content goes inside the slot. If it serves columns, than the slot is the unspecified-width column.
Below you see 3 typical usages.
Below the fold additional ideas
For every example is valid:
They could have the prop section=accent > in that case we would see a black section with an inverted inner block
They could have the prop section=muted > in that case we would see a muted section and a muted inner block
No1
This shows a simple one with background=accent.
It renders as full-width column or a simle div (no columns+col at all)
WAIT UNTIL YOU BEGIN reading this > I have to think it through once more ... to make it a classic mother-child-implementation with nested components ...
ToDos, Spec to build MOLECULES around UiBox / UiColumns. Below I have collected some ideas towards a more generic
text-imageormedia-banner. This all needs a call first and then details. Will be done in sept.create/enhance the basic nuxt-content implementation for the basic content-distribution element within a section 'ColTmp'. It could be called 'Block' or something similar. It shares basic functionality with #20 (cta, heading ...)
It is a molecule (on the layer?) and gives some defaults for the usage of the section + container + columns/column stuff already implemented. It will be posted directly on the root level, cannot be nested inside other components and sets up section + container if needed. The main content goes inside the slot. If it serves columns, than the slot is the unspecified-width column.
Below you see 3 typical usages.
Below the fold additional ideas For every example is valid:
section=accent> in that case we would see a black section with an inverted inner blocksection=muted> in that case we would see a muted section and a muted inner blockNo1
This shows a simple one with
background=accent. It renders as full-width column or a simle div (no columns+col at all)No2
This shows a typical 2-cols usage with
background=accentimgTmp=URLimgControlTmp=fill-center(fill-left|fill-right|boxed)2 other props are default:
imgPlacementTmp=left(right)imgSpaceTmp=1/4(1/3|1/2|2/3)No3
Well-known example ;) - same as No2 with these differences:
imgPlacementTmp=rightimgControlTmp=> defaults toboxed`imgControl with
fill-center | left | right(will be implemented not before mid-sept)
prop
addColumnsOne or several column-components can be added
Parallax/fixed-behaviours like here