code

[bread]

Credit: HSR Wikia

Wrapper code You NEED this code to make the layout work. Place elements between "start" and "end" <raw-code><div style="width:100%;max-width:800px; margin:0 auto; display:grid;gap:10px;"> <!-- Start --> <!-- Place code elements in between "start" and "end". You may remove this line --> <!-- End --> </div></raw-code> Credit code Wherever it says <!— credit code -->, you can replace that with the following to provide sources to fanart or otherwise. <div style="height:100%;display:flex;flex-direction: column;align-items: stretch;"> <div style="flex-grow:1;"></div><div style="background-color:#ffffff;flex-grow:0;padding:7px 20px;text-align:right;font-size:10px;text-transform:uppercase;font-style:italic;">Credit: <a href="#">Username/ID</a></div></div> Additional editing information • Widen/Narrow overall design. In the wrapper code, change max-width:800px to whatever value you like. • Spacing between images. All instances of gap:10px; need to be changed • the height of your elements. By default, each segemented is coded at height:200px; • Change the width of columns (or interior rows). Change flex-grow:1; to a different number. Bigger number means it takes up more space. In "staggered images," it is also listed as flex-grow:2; • Elements can be moved & repeated. Check comments for premade layouts

Single Column Banner

<!-- Simple-column Banner --> <div style="height:200px; display: flex;align-items: stretch;gap:10px;;"> <div style="background:url('URLHERE') center / cover #65c2ff ; flex-grow: 1;"><!-- credit code --></div> </div><!-- END Simple-column Banner -->

Multi Column Banner
(works for 2+ items / more than 4 might struggle on mobile)

<!-- Multi-column Banner --> <div style="height:200px; display: flex;align-items: stretch;gap:10px;;"> <!-- Repeat/Remove line --> <div style="background:url('URLHERE') center / cover #65c2ff ; flex-grow: 1;"><!-- credit code --></div> <!-- Repeat/Remove line --> <div style="background:url('URLHERE') center / cover #65c2ff ; flex-grow: 1;"><!-- credit code --></div> <!-- Repeat/Remove line --> <div style="background:url('URLHERE') center / cover #65c2ff ; flex-grow: 1;"><!-- credit code --></div> </div><!-- END Multi-column Banner -->

Left Large, Multiple Right (2 or more)

<!-- Left Large, Right Two-row --> <div style="height:200px; display: flex;align-items: stretch;gap:10px"> <div style="background:url('URLHERE') center / cover #65c2ff ; flex-grow: 1;"><!-- credit code --></div> <div style="flex-grow: 1;display:flex;flex-direction: column;gap:10px;"> <!-- Repeat/Remove line --> <div style="background:url('URLHERE') center / cover #65c2ff ; flex-grow: 1;"><!-- credit code --></div> <!-- Repeat/Remove line --> <div style="background:url('URLHERE') center / cover #65c2ff ; flex-grow: 1;"><!-- credit code --></div> </div></div><!-- END Left Large, Right Two-row -->

Multiple Left (2 or more), Right Large

<!-- Left Large, Right Two-row --> <div style="height:200px; display: flex;align-items: stretch;gap:10px"> <div style="flex-grow: 1;display:flex;flex-direction: column;gap:10px;"> <!-- Repeat/Remove line --> <div style="background:url('URLHERE') center / cover #65c2ff ; flex-grow: 1;"><!-- credit code --></div> <!-- Repeat/Remove line --> <div style="background:url('URLHERE') center / cover #65c2ff ; flex-grow: 1;"><!-- credit code --></div> </div> <div style="background:url('URLHERE') center / cover #65c2ff ; flex-grow: 1;"><!-- credit code --></div> </div><!-- END Left Large, Right Two-row -->

Large Left, Multiple Right + Split segment

<!-- Large Left, Multiple Right, Split segment --><div style="height:200px; display: flex;align-items: stretch;gap:10px"> <div style="background:url('URLHERE') center / cover #65c2ff ; flex-grow: 1;"><!-- credit code --></div> <div style="flex-grow: 1;display:flex;flex-direction: column;gap:10px;"> <!-- Repeat/Remove line --> <div style="background:url('URLHERE') center / cover #65c2ff ; flex-grow: 1;"><!-- credit code --></div> <!-- Split segment --><div style="display:flex;flex-grow: 1;gap:10px;"> <!-- Repeat/Remove line --> <div style="background:url('URLHERE') center / cover #65c2ff ; flex-grow: 1;"><!-- credit code --></div> <!-- Repeat/Remove line --> <div style="background:url('URLHERE') center / cover #65c2ff ; flex-grow: 1;"><!-- credit code --></div> </div><!-- END Split segment --> </div></div> <!-- END Large Left, Multiple Right, Split segment -->

Multiple Left + Split Segment, Large Right

<!-- Multiple Left, Split segment, Large Right --><div style="height:200px; display: flex;align-items: stretch;gap:10px"> <div style="flex-grow: 1;display:flex;flex-direction: column;gap:10px;"> <!-- Repeat/Remove line --> <div style="background:url('URLHERE') center / cover #65c2ff ; flex-grow: 1;"><!-- credit code --></div> <!-- Split segment --><div style="display:flex;flex-grow: 1;gap:10px;"> <!-- Repeat/Remove line --> <div style="background:url('URLHERE') center / cover #65c2ff ; flex-grow: 1;"><!-- credit code --></div> <!-- Repeat/Remove line --> <div style="background:url('URLHERE') center / cover #65c2ff ; flex-grow: 1;"><!-- credit code --></div> </div><!-- END Split segment --> </div> <div style="background:url('URLHERE') center / cover #65c2ff ; flex-grow: 1;"><!-- credit code --></div> </div> <!-- END Multiple Left, Split segment, Large Right -->

Staggered Columns

<!-- Staggered Columns --> <div style="height:200px; display: flex;align-items: stretch;gap:10px"> <!-- First Row --><div style="flex-grow: 1;display:flex;flex-direction: column;gap:10px;"> <!-- Repeat/Remove line --> <div style="background:url('URLHERE') center / cover #65c2ff ; flex-grow: 1;"><!-- credit code --></div> <!-- Repeat/Remove line --> <div style="background:url('URLHERE') center / cover #65c2ff ; flex-grow: 2;"><!-- credit code --></div> </div> <!-- Second Row --><div style="flex-grow: 1;display:flex;flex-direction: column;gap:10px;"> <!-- Repeat/Remove line --> <div style="background:url('URLHERE') center / cover #65c2ff ; flex-grow: 2;"><!-- credit code --></div> <!-- Repeat/Remove line --> <div style="background:url('URLHERE') center / cover #65c2ff ; flex-grow: 1;"><!-- credit code --></div> </div> </div><!-- Staggered Columns -->

Icon Banner - Fix Spacing

<!-- Icon Banner - Fixed Spacing --> <div style="height:100px; display: flex; justify-content: center;gap:10px;"> <div><img src=https://i.imgur.com/9pIKyJ9.png></div> <div><img src=https://i.imgur.com/1E76yqU.png></div> <div><img src=https://i.imgur.com/ePzfwff.png></div> <div><img src=https://i.imgur.com/1E76yqU.png></div> </div> <!-- END Icon Banner - Fixed Spaced -->

Icon Banner - Stretched Spacing

<!-- Icon Banner - Stretch Spaced --> <div style="height:100px; display: flex; justify-content:space-between;align-items: stretch;gap:10px;"> <div><img src=https://i.imgur.com/9pIKyJ9.png></div> <div><img src=https://i.imgur.com/1E76yqU.png></div> <div><img src=https://i.imgur.com/ePzfwff.png></div> <div><img src=https://i.imgur.com/1E76yqU.png></div> </div> <!-- END Icon Banner - Stretch Spaced -->