Fandom

Wikia Developers Wiki

Cards

869pages on
this wiki
Add New Page
Talk1 Share
High priorityThis script has been discontinued

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.

Bootstrap

Wikitext

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.

Example

<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:

Cards example More examples can be seen on User:KurwaAntics/cards

Installation

Prepend the following code to MediaWiki:Wikia.css.

@import "/load.php?mode=articles&articles=u:dev:MediaWiki:Cards.css&only=styles";

Notice

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.

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.