Principal Element

Our learning webpage / application will display various information organized in different structures. All of those information bits are displayed as cards. We are currently trying to limit the fragmentation by introducing common elements that can be used across all cards.

One such common element is a visual indicator that tells the user that this piece of text is the principal element of the card (i.e. the main topic):

As you can see, the faint gradient tells the user the topic of the card, or serves as a prompt (this is not the final design, most likely the gradient will be replaced by something else). This lets the user quickly recognize the most important information on the card. Most of the time, the user would only look at this principal element, as it contains the information the user is mostly looking for:

For languages, we might have a sentence in a foreign language that is presented as a prompt:

For a prompt like this, the solution (or answer) is presented in a similar way:

Structured Information

However, we want to give the user more information. There could be other translations, and to distinguish the translations from each other, we want to display back translations:

As you can see, in the last image, we have some structured information. But that structured information contains the most important information: the sentence "How are you?" is the main translation of "Come stai?", and so it needs to be displayed as the principal element of the card, as described earlier.

Structured Information with Principal Element?

So we need to find a way to combine the two last images. But this turns out to be quite difficult:

1. Here, the sentence is displayed twice:

2. Here, the hierarchy is wrong. The principal element appears outside of the hierarchy, but it should be part of it:

Any ideas how to do this in a better way?