Boxes

Boxes are simply containers for text that have a background color similar to cards. They don't have any specific options or configuration other than background colors and spacing, but there are some simple guidelines in order to make them look consistant and accessible.

Colors

Make sure the background and text color combinations you use meet any accessibility contrast guidelines. In almost all contexts you will use either the default text color or the text-white class for inversed text. Adding the class on the container and the headings should cover pretty much everything, but sometimes you have to add the class on a specific element to override styling.

Spacing

Generally you must have at least a p-3 class to provide appropriate padding between the background color and the content inside. You could increase this for specific use cases, but 1rem would generally be the minimum for default font-sizes. If the font inside is smaller, the padding could be smaller as well. A margin should be added if boxes are stacked or side by side depending on the context. Much like cards, adding a mb-3 will ensure content after the box never sits flush against it.