The Basic Icon
You can place Mana icons anywhere using the CSS classname prefix ms
(for "mana symbol") and then the mana/card symbol's suffix.
<i class="ms ms-u"></i>
You can place Mana icons anywhere using the CSS classname prefix ms
(for "mana symbol") and then the mana/card symbol's suffix.
<i class="ms ms-u"></i>
Add the .ms-cost
class to create a casting cost circle around the symbol. Append the .ms-shadow
class to add a drop shadow.
<i class="ms ms-g ms-cost"></i>
<i class="ms ms-r ms-cost ms-shadow"></i>
New: You no longer need the .ms-split
class name, simply identifying a split or hybrid cost will now automatically handle the split styles.
<i class="ms ms-wu ms-cost"></i>
<i class="ms ms-2b ms-cost ms-shadow"></i>
For backwards compatibility and full control you can still use create split and hybrid casting costs separately with the .ms-split
class along with the 2-symbols' codes. This works for color pairs and the "2" with a color.
Even though there's only been one two of these ever printed you can still create them :P Half costs used to require a wrapping element but as of v1.4.1 they are a regular single element:
<i class="ms ms-w ms-half ms-cost"></i>
You can create planewalker loyalty symbols for the starting value, zero, and ticking up or down. The number that appears is based on a class you add, like .ms-loyalty-4
. Currently numbers 0-20 are supported for start, up, and down.
<i class="ms ms-loyalty-up ms-loyalty-3"></i>
<i class="ms ms-loyalty-down ms-loyalty-2"></i>
Saga symbols are supported natively up to V, even though only IV has ever been printed. The number that appears inside the hexagon is based on a class you add, like .ms-saga-2
.
<i class="ms ms-saga ms-saga-1"></i>
<i class="ms ms-saga ms-saga-4"></i>
Battle cards have a unique defense box and values are supported from 0-20 using utility classes similar to Loyalty and Sagas, in the format .ms-defense-2
.
There are 3 variations of the symbol that you can display. The simplest is just the black background with a white number (.ms-defense
). An outline version has a black border with black number and white inside (.ms-defense-outline
). Finally the full "print" version uses 3 layers and mimics the way the defense box is printed on cards; use this with .ms-defense-print
.
<i class="ms ms-defense ms-defense-1"></i>
<i class="ms ms-defense ms-defense-outline ms-defense-3"></i>
<i class="ms ms-defense ms-defense-print ms-defense-5"></i>
To conveniently increase the size of a mana or card symbol you can append the classes ms-2x
, ms-3x
, ms-4x
, ms-4x
, and ms-6x
. These classes increase the size by a factor equal to class name number.
<i class="ms ms-r ms-2x"></i> ms-2x
<i class="ms ms-r ms-3x"></i> ms-3x
<i class="ms ms-r ms-4x"></i> ms-4x
<i class="ms ms-r ms-5x"></i> ms-5x
<i class="ms ms-r ms-6x"></i> ms-6x
Some of the card symbols are variable width by default, if you put them in a list they may stack irregularly. To fix their width to a standard size, just append the class .ms-fw
and the symbols will have a constant width and centered icon.
<i class="ms ms-planeswalker ms-fw"></i> Planeswalker symbol
<i class="ms ms-land ms-fw"></i> Land symbol
The multicolor symbol has 2 layers and the only way to reliably achieve this is with 2 glyphs. Add .ms-duo
and .ms-multicolor
will add the background layer and knock out the foreground. If you add .ms-duo-color
and optionally .ms-grad
it will colorize it like the official symbol.
<i class="ms ms-multicolor"></i> One layer
<i class="ms ms-multicolor ms-duo"></i> Two layers
<i class="ms ms-multicolor ms-duo ms-duo-color ms-grad"></i> Complete multicolor symbol <i class="ms ms-school-prismari ms-duo ms-duo-color"></i> Prismari colored symbol
Mana has full Arena and Modo ability and counter coverage. You can apply the set-specific gold gradient that Arena uses on abilities with .ms-mechanic
.
<i class="ms ms-ability-flying"></i> Evergreen ability
<i class="ms ms-ability-adventure ms-mechanic"></i> Set-specific ability
<i class="ms ms-counter-plus"></i> MODO counter
Some cards use color indicator circles on their alternate faces to indicate that the card is still a certain color identity. Mana supports all 31 variations, though only about 10 different color combinations exist on cards currently.
<i class="ms ms-ci ms-ci-1 ms-ci-g"></i> Green
<i class="ms ms-ci ms-ci-2 ms-ci-rg"></i> Red/Green
<i class="ms ms-ci ms-ci-3 ms-ci-gur"></i> Red/Green/Blue
To display these, use class .ms-ci
and then .ms-ci-X
where "X" is the number of colors in the identity. Then add the corresponding color class, like .ms-ci-wug
.
Importantly, the only SVGs used to display these are the borders, and there are 5 different border glyphs. The colors themselves are displayed using the background: conic-gradient();
CSS attribute, which you can view the support for on Can I Use. TL;DR: it has almost universal practical browser support.