Card designer2 Designer2: card & excerpt combined
Contents: SC card4 | card1, card2, card3 | Very goo local card_06n5 HTML|CSS Revision nb:  2023-03-23 17:53:41   |    URL: 91756
Bottom versions in the SC:card4 below -› class=”contain card” is replaced by class=”contain pw5” which enables content expansion of the card.


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…




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…




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…




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

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

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

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%;