Material-based Anki flashcard

[cdmoro]

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

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

[tatsumoto]

@cdmoro

it’s not allowed to paste links

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](https://example.com/).

[jojo55]

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

[cdmoro]

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

Thanks for share the link!

[cdmoro]

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

[szalejot]

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?

[cdmoro]

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

Front

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

Back template

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

	<hr id="answer">

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