Mana Home Mana Icons Attributes GitHub Project
Created by Andrew Gioia

### Mana has some built in icon options to easily change the size and position, convert the mana symbols to the casting costs, and create planeswalker loyalty symbols with numbers. Take a look below at examples of each option with the class names to implement them.

#### The Basic Icon

.ms-u

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>

#### Creating a Casting Cost

.ms-cost + .ms-shadow

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>

#### Split Casting Costs

.ms-wu .ms-bgp .ms-cr + .ms-shadow

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.

#### Half Mana Casting Costs

.ms-half

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>

#### Planeswalker Symbols

.ms-loyalty-up .ms-loyalty-down

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

.ms-saga-1 .ms-saga-4

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 Symbols

.ms-defense .ms-defense-outline .ms-defense-print

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>

#### Increase the Symbol's Size

.ms-2x .ms-3x .ms-4x .ms-5x .ms-6x

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

#### Fixed Width

Planeswalker Land

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

#### Dual-Layered Symbols

One layer Two layers Two with color Prismari

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

#### Arena Abilites and MODO Counters

Evergreen ability Set-specific ability MODO counter

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

#### Card Color Indicators

Green Red/Green Red/Green/Blue

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.