How to make a banner component completely dynamic or customizable

I’m trying to create a page-builder of sorts and with my most complex component: a banner. These components would be a drag and drop style using something like Vue Draggable. I was thinking of passing the props to the component in a json string, like the query, images, text, or any important data that needs to be passed along and another json string for stuff like styles.

This banner is complicated because it has to be fully customizable in that the user can control the amount of rows the banner has and the “blocks” and their width. The banner would use a grid system maybe in one row it could be 12 blocks per row. For example a banner could be: first row: one block of 10 next to a block of 2, and the second row: two even blocks of 6. I would want to do this without having to create 20 different banner components to display the different block combinations.

That part would have to be totally custom only using props or any other data that can be passed in a json string.

Any ideas on how this could be done? or any another suggestions?