Cards provides you card-like containers which are clean, tidy, and easy to arrange. This script was inspired from Bootstrap.
|“||A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.||”|
This script uses the wikitext below:
<div class="card"> <div class="card-image"></div> <div class="card-content"> <div class="card-title"></div> <div class="card-text"></div> <div class="card-link"></div> </div></div>
In "card-content", you can put an addidtional class (card-xl, card-lg, card-sm, card-xs) to adjust its height.
<div class="card"> <div class="card-image">[[File:AjaxDiff.png|link=AjaxDiff]]</div> <div class="card-content"> <div class="card-title">AjaxDiff</div> <div class="card-text">Allows you to inspect diffs and stay in WikiActivity. It's easier to check edits, you can also revoke and block quickly while remaining on the WikiActivity page.</div> <div class="card-link">[[AjaxDiff|Learn more]]</div> </div></div>Which generates:
More examples can be seen on User:KurwaAntics/cards
Prepend the following code to MediaWiki:Wikia.css.
It is not advised to use overly long titles and/or descriptions as it will make the card look not so good especially when it is among a number of cards.