<card-tag> and <card-inner>
HTDML-tag as mentioned in the HTDML-custom-tag-table and the custom-tagtable-stylesheet.
As cards have become a popular item in web design, like for displaying products, articles, receipes, studies, opinions, pictures etc. in a uniform and visually appealing way, HTDML needs to go with the card-flow too.
The strong point of the <card-tag> is that you can use it as a hard-coded container, a docker if you wish, with a high CSS-specifity, in which you can place literally every other HTML5 tag like <p>, <form> and even <article> and give them all your own styling without any worries that it will affect any other webpage somewhere else, as long as you start your CSS-rules with card-tag like: card-tag article
and card-tag p
. This will never affect your regular <article> or regular <p>.
It is advisable to give your card-tag a friend, a helper. I have chosen for <card-inner> because that concept is already used to replace the divs and spans with <part-inner-shell> and <text-inner>.
Let's have a look at the HTML (the link to the CSS is at the top of this article):<card-tag>
<center-tag><var-attention>Optional card-title</var-attention></center-tag><br>
<card-inner>Lorem ipsum dolor sit amet,<br>
consectetur adipiscing elit,<br>
sed do eiusmod tempor incididunt<br>
ut labore et dolore magna aliqua.</card-inner>
</card-tag>
And the result is:
consectetur adipiscing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.