Anki Material flashcard

The goal of this project is to have a supercharged version of the basic Anki flashcards (front and back fields). You can have a very basic card but with a good looking style and then add features like images, emojis, hints, headers, subheader, text blocks, etc. Also, you have several variants to choose.

Features

• Material style
• 11 color variants
• Wide image support (front and back)
• Header and subhedaer (front)
• Back sections
• External link icon
• Hints
• Pills
• Emoji support
• Audio controls, vertical and horizontal (front and back)

Screenshots

Light	Dark

Demo

https://codepen.io/cdmoro/pen/ZEqbOLG

Installation

1. Create a new card type on Anki (i.e. "Material basic")
2. Copy the files into the right place (front, back and styles)
3. Select the desired variant (optional)
4. Voila!

Variants

Anki Material flashcard comes with several variants: base (default), blue, white, purple, pink, teal, green, and orange. All the colors were taken from the material color specification. Checkout the demo to see the colors in action!

Features

Audio

Audio style is supported out of the box. And the best is that you don't need to create a separate field for the audio, you can put it in the same field as the answer, for example, Water [audio:water.mp3] and voila!

Hints

Hints are supported, by default the display property is set to block and the text is displayed in italics. Add a hint is pretty straight forward, as you can see in the following example:

<div class="flashcard back base">
    {{FrontSide}}

    <hr id="answer">

    <div class="body">
        <div class="text-block">
           <div class="flex">{{Back}}</div>
          {{hint:Translation}}
        </div>
    </div>
</div>

Symbol class

If you are learning Chinese, Greek, and so, you can add the class symbol to the flashcards to get this more appeal style. Bonus tip: if you add a subheader element below the answer you can get this result:

<div class="flashcard front base symbol">
  <div class="body">
    漢字
    <div class="subheader">[kaɲdʑi]</div>
  </div>
</div>

Images

Back

<div class="flashcard back base">
  {{FrontSide}}
  <hr id="answer">
  <div class="body">
    <img src="https://picsum.photos/id/154/600/600" />
    <div class="text-block">
      <div class="flex">
        {{Back}}
      </div>
      {{hint:Variants}}
    </div>
  </div>
</div>

Header

<div class="flashcard front base">
  <div class="body">
    <div class="header">Greek nouns</div>
    Νερό
  </div>
</div>

Emoji

<div class="flashcard front base">
  <div class="body">
    <div class="emoji">🥣</div><br>Το πρωινό
  </div>
</div>

Examples

These examples were taken from imported decks and applied the Material flashcard (with minor adjustments).

• Greek alphabet with Modern Greek pronunciation

• British English IPA pronunciation drill

• Italian Core 100 - Basic words (EN IT with audio) (dark theme, white variant)

Credits

• Color variants were taken from https://mui.com/material-ui/customization/color/#color-palette