Card designer2 ∫Designer2: card & excerpt combined•
Contents: SC card4 | card1, card2, card3 | Very goo local card_06n5 HTML|CSS Revision nb: Last modified: 2023/03/23 19:53:41 |  Edit 91756
Bottom versions in the SC:card4 below -› class=”contain card” is replaced by class=”contain pw5” which enables content expansion of the card.
Card designer2
Excerpt structure: p1/contain card/layer_h1/title/body: 
sc name="card4" N="·c4a"
contain·c4a · title·c4a · body·c4a
ACF_quote
HEIGHT BY CARD | E: The card4 shortcode has no wrapper. width:%W:90% %; padding-top:max-content; card4 CONTENT EXPANDS THE CARD!! MORE CONTENT… MORE CONTENT… MORE CONTENT… MUCH MORE CONTENT… MORE CONTENT… MORE CONTENT… MUCH MORE CONTENT… MUCH MORE CONTENT… MORE CONTENT… MORE CONTENT… MUCH MORE CONTENT… MUCH MORE CONTENT… MORE CONTENT… MORE CONTENT… MUCH MORE CONTENT… MUCH MORE CONTENT… MORE CONTENT… MORE CONTENT… MUCH MORE CONTENT…MORE CONTENT… MUCH MORE CONTENT… MUCH MORE CONTENT… MORE CONTENT… MORE CONTENT… MUCH MORE CONTENT… MUCH MORE CONTENT… MORE CONTENT… MORE CONTENT… MUCH MORE FINAL…
Card designer2
Excerpt structure: contain pw5/title/body: 
sc name="card4" N="·c4a"
contain·c4a · title·c4a · body·c4a
ACF_quote
HEIGHT BY CONTENT "contain pw5 | E: The card4 shortcode has no wrapper. width:%W:90% %; padding-top:max-content; card4 CONTENT EXPANDS THE CARD!! MORE CONTENT… MORE CONTENT… MORE CONTENT… MUCH MORE CONTENT… MORE CONTENT… MORE CONTENT… MUCH MORE CONTENT… MUCH MORE CONTENT… MORE CONTENT… MORE CONTENT… MUCH MORE CONTENT… MUCH MORE CONTENT… MORE CONTENT… MORE CONTENT… MUCH MORE CONTENT… MUCH MORE CONTENT… MORE CONTENT… MORE CONTENT… MUCH MORE CONTENT…MORE CONTENT… MUCH MORE CONTENT… MUCH MORE CONTENT… MORE CONTENT… MORE CONTENT… MUCH MORE CONTENT… MUCH MORE CONTENT… MORE CONTENT… MORE CONTENT… MUCH MORE FINAL…
Card designer2
Excerpt structure: p1/contain card/layer_h1/title/body: 
sc name="card4" N="·c4b"
contain·c4b · title·c4b · body·c4b
ACF_quote
HEIGHT BY CARD | E: The card4 shortcode has no wrapper. width:%W:90% %; padding-top:max-content; Bottom version maintains the ability to have animated layers based on “contain” or “contain2_”. It expands vertically with height:max-content MORE CONTENT… MORE CONTENT… MORE CONTENT… MUCH MORE CONTENT… MORE CONTENT… MUCH MORE FINAL…
Card designer2
Excerpt structure: contain pw5/title/body: 
sc name="card4" N="·c4b"
contain·c4b · title·c4b · body·c4b
ACF_quote
HEIGHT BY CONTENT "contain pw5 | E: The card4 shortcode has no wrapper. width:%W:90% %; padding-top:max-content; Bottom version maintains the ability to have animated layers based on “contain” or “contain2_”. It expands vertically with height:max-content MORE CONTENT… MORE CONTENT… MORE CONTENT… MUCH MORE CONTENT… MORE CONTENT… MUCH MORE FINAL…
card1
Layer ·c3a_h1: EMPTY.png
Card designer2
Excerpt shortcode structure: contain-card/layer_h1/contain2_/title/body: 
sc name="card3" N="·c3a"
contain2_·c3a · title·c3a · body·c3a
ACF_quote
The card3 shortcode uses the animated h1 card hover layer as the wrapper.
card3
Layer ·c3b_h1: EMPTY.png
Card designer2
Excerpt shortcode structure: contain-card/layer_h1/contain2_/title/body: 
sc name="card3" N="·c3b"
contain2_·c3b · title·c3b · body·c3b
ACF_quote
The card3 shortcode uses the animated h1 card hover layer as the wrapper.
 
[ sc name="card1" N="·c1a" W="25%" H="25%" mgnR="1.5%" img1="LAKE.jpg" img2="HYTTE.jpg" h1_Yshift="0%" h1_transit="1s" rad="3px" b_="2px" b_st="dashed" b_col="dodgerblue" shadow="0px 0px 0px rgba(0,0,0,0)"][ /sc]
[ sc name="card2" N="·c2a"][ /sc]
card1 w. vars
Card designer2
SC for the crop/hover img: 
sc name="card1" N="·c1c" W="30%" H="30%" mgnR="1.5%" img1="HYTTE.jpg" img2="LAKE.jpg" h1_Yshift="0%" h1_transit="1s" rad="3px" b_="2px" b_st="dashed" b_col="dodgerblue" shadow="0px 0px 0px rgba(0,0,0,0)"
contain2_ · title · body
ACF_quote
Version to update.
Edit SC
The card1 shortcode shown in column 1 makes it easy to insert a hover/crop card image. The card height finally controlled by % thru padding-top in the card container. Card2 is excerpt text only. Card3 is animated with the h1 hover wrapper.
.contain {width:x%; padding-top:y%}
Local HTML|CSS class=”contain_06n5 card_06n5″ | 49%+1% mgn | !!The two contain/card classes must be set in the SAME div!!
Layer _06n5_h1: LAKE
Layer _06n5_h1: EYE
Manual: Card height is defined in the contain class:width:49%; padding-top:49%; margin-right:1%;