[F2U HTML] Ribbon Box
StormyStarlight
- Created
- 2 years, 5 months ago
- Creator
- StormyStarlight
- Favorites
- 1006
Profile
A layout snippet made to showcase ribbons. Unlike other layouts that favor compactness by only showcasing the ribbons themselves, this layout aims to be as descriptive as possible while still taking up a minimal amount of space. You can add it to existing layouts or use it on its own! It is intentionally left unstyled so that you can fit it into whatever layout you're using yourself—try wrapping it in a div with the card, rounded, bg-faded, p-2, and/or other classes to get your desired look.
It's made specifically with MisterMuse (aka Slate)'s style of ribbons in mind, but will work with ribbons/images of just about any size. If ribbons made by anyone else are added to the box, please be sure to modify the credit for the ribbons used appropriately!
- Do not remove or redirect the credit. You may change how the credit is displayed/move it elsewhere, but it may not be removed altogether. Do not claim you made this layout.
- Feel free to modify/frankenstein this layout as much as you want as long as I am still credited, along with any other involved (consenting) creators.
- Keep Profile Text WYSIWYG disabled and Code Editor enabled when using this layout. You can change these settings here.
- Do not publicly redistribute this layout, or modified/copied/frankensteined versions of it, regardless of whether it is for free or paid use.
- Need assistance? Comment or message me for help!
26 Oct 2021:
- Initial release!
6 Feb 2022:
- Added version: Condensed.
Ribbon Name: Description text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ribbon Name: Longer descriptions work too. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis ac augue nec pretium. Aenean porta porttitor sem, at consequat dolor pretium sit amet.
Ribbon Name: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis ac augue nec pretium.
Ribbon Name: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ribbon Name: If you want more or less ribbons to show at once, add or subtract 78 pixels per ribbon from the default 296 in the first line. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ribbon Name: This last ribbon's code MUST NOT INCLUDE "mb-3" as all the others do in order for it to fit the box properly. When adding more ribbons, copy and paste the code ABOVE this one.
F2U HTML by StormyStarlight • Ribbons by MisterMuse
Ribbon Name: Description text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ribbon Name: Longer descriptions work but will cause the height of each row to change if longer than 2 lines.
Ribbon Name: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis ac augue nec pretium.
Ribbon Name: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ribbon Name: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ribbon Name: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis ac augue nec pretium.
Ribbon Name: If you want more or less ribbons to show at once...
Ribbon Name: ...add or subtract 78 pixels per row from the default 296 in the first line.
Ribbon Name: This last row's code MUST NOT INCLUDE "mb-3" as all the others do in order for it to fit the box properly. When adding more rows, copy and paste the code ABOVE this row.
Ribbon Name: If you have an odd number of ribbons, the 4 lines that make up this last ribbon can be deleted.
F2U HTML by StormyStarlight • Ribbons by MisterMuse
Comments