User:KCVelaga-test/stack
A stackable card is a basic design element. They're cards of content that line up next to each other, taking up the full width of the container they're in (such as the page body). If the screen becomes narrower, they stack on top of each other. They should never be wider than the container itself.
Usage
[edit]Each card is divided roughly into three sections: a header, the main contents, and the footer. As so:
{{Stackable card|header=Introduction|contents=Welcome to this lovely page.|footer=(Buttons might go here.)}}
Introduction
Welcome to this lovely page.
(Buttons might go here.)
For extra customization, you can add styles to the card as well as custom attributes (such as class attributes or data attributes).
{{Stackable card|header=Introduction|contents=Welcome to this lovely page.|footer=(Buttons might go here.)|styles=padding:4em;|attributes=data-test=Wow!}}
Introduction
Welcome to this lovely page.
(Buttons might go here.)