Chapter headings <h2>
+Some regular text.
Topic headings <h3>
+Some regular text.
Subtitles <h4>
Normal floating text with links.
Colors:
diff --git a/test/test-cards.htm b/test/test-cards.htm new file mode 100644 index 0000000..e598d3b --- /dev/null +++ b/test/test-cards.htm @@ -0,0 +1,126 @@ + + + + + + +Card-container
+
+ 
+
+
+
+
+
+
+
+
+
+ What to say...
+Lorem ipsum
+
+ Some thoughts...
+
+ 
+
+
+ Some plain thoughts...
+
+
+
+
+ 
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ Lorem ipsum
+Lorem ipsum, dolor sit amet consectetur adipisicing elit. + Similique eveniet quaerat eum voluptatibus + dolore laborum praesentium
+id eaque, unde harum. Ea temporibus ipsam beatae adipisci repellat distinctio + consequuntur a quo!
+
+
+
+
+
+
+ Plain Lorem ipsum
+Lorem ipsum, dolor sit amet consectetur adipisicing elit. + Similique eveniet quaerat eum voluptatibus + dolore laborum praesentium
+id eaque, unde harum. Ea temporibus ipsam beatae adipisci repellat distinctio + consequuntur a quo!
+x
+ x
+ x
+ x
+ Card Tricks
+
+Often cards are used to show the into to a longer article or application and a click on the card will then navigate to the
+target.
+
+Here is a css trick to make the whole card a link to the first link found in the card. Effecting any click on the card will trigger the link.
+
+This is done by adding a ::before pseudo element to the first link that covers the card completely on z-index: 1:
+
+```css
+.card.autolink a:first-of-type::before {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ content: "";
+}
+
+in case you have further functions on the card like action buttons these must be shiftet to z-index > 1 to make sure that they
+
+```
+
+Links for whole cards
+
+[ .footer.action ] <= all additiona actions and links in the footer
+[ 1 ] <= pseudo element of the first link found
+[ auto layer ] <= all elements of the card, except .card > .footer.action
+
+
+
+
+