Bento Box Layout

Hey blizzmarketing,

You could try using the Grid Row element for a layout like that.

Best regards,
Rikard

Hi,

Thank you for the update.

You may need to manually create the html and css for this layout. You can add this html in a Code Block element for example:

<div class="av-bento-container">
<div class="av-bento-box av-bento-left-box">Left Box (100%)</div>
<div class="av-bento-right-container">
<div class="av-bento-box av-bento-top-box">Top Box</div>
<div class="av-bento-box av-bento-bottom-box">Bottom Box</div>
</div>
</div>

Then insert this css code:

.av-bento-container {
    display: flex;
    height: 100vh; 
}

.av-bento-container .av-bento-left-box {
    flex: 1; 
    background-color: #4CAF50; 
    color: white;
    padding: 20px;
    text-align: center;
}

.av-bento-container .av-bento-right-container {
    display: flex;
    flex-direction: column; 
    width: 300px; 
}

.av-bento-container .av-bento-top-box {
    flex: 1;
    background-color: #2196F3; 
    color: white;
    padding: 20px;
    text-align: center;
}

av-bento-container .av-bento-bottom-box {
    flex: 1; 
    background-color: #f44336;
    color: white;
    padding: 20px;
    text-align: center;
}

Best regards,
Ismael

Hi,

Thanks for the update. Please open a new thread if you should have any further questions or problems.

Best regards,
Rikard