Material-based Anki flashcard

Hey there! I wanted to share with you a project that I´ve been working on for a while. My goal was to create a fresh new Anki flashcard design, with variants and features. The flashcards were tested in Android, Windows and macOS.

The idea is to have a super simple flashcard (front and back fields) and at the same time flexible if I need to create some complex ones.

Since it’s not allowed to paste links the only thing I can do is to share a few screenshots, I suppose I can share the link to the github repo via DM :frowning:

Anyways, hope you like the screenshots!

Basic card light theme


Dark theme (yellow variant) with an emoji in the header and a section with pills

Light theme (base variant), header, wide-image, audio and a hint.


Light theme (blue variant), sub-header, audio and a Pronunciation section.

Pink card with complex structure



Really? Did they change something in the way the forum works? In the past you could paste a link by using markdown syntax, e.g. [link](

I believe your account has to not be brand new in order to post links.

I love seeing new card designs/templates and saw your post on reddit as well. You’re doing a great job! I like how many options you have.

Here is the link you posted on reddit: Anki Material Flashcard


Yep, you are right, new accounts can’t post links.
I’m glad you like the design :grinning: I think it would be nice to have a curated list of card styles.

Thanks for share the link!

It seems new account can’t post links… But @jojo55 shared the link to the repo if you want to take a look :slight_smile:

Hi @cdmoro
Do I understand correctly, that for those templates to work “out of the box” the note needs to have 2 fields: “Front” and “Back”?
What about notes that have multiple fields and create a few cards templates out of it? Do you plan to support such more complex cards in the future?

Hey! Even tough it works out-of-the-box with simple cards (front and back), it was meant to support complex cards (you can take a look at the Codepen examples that is in the link that @jojo55 shared, I can’t post links yet).
It supports hints, header, subheader, subtitles, images, wide-images, pills, etc. But you need to tweak the templates in order to include those things (the good news is that I created classes for all these things). I can include a section in the repo with real code examples.

This is a good example of a modified shared deck (the deck is “Greek alphabet with Modern Greek pronunciation” - I can’t post links). As you can see, the back template is not extremely complex and the result is pretty decent :slight_smile:


<div class="flashcard front white">
    <div class="body">{{Symbol (front)}}</div>

Back template

<div class="flashcard back white">

	<hr id="answer">

	<div class="body">
		<div class="text-block flex">
			{{Name (back)}} [{{Number (back)}}]
            {{Audio (back)}}
		<div class="text-block">
			<div class="subtitle">Modern Greek</div>
            {{Modern Greek pronunciation (back)}}
		<div class="text-block">
			<div class="subtitle">Classic Greek</div>
            {{Classic Greek pronunciation (back)}}


This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.