Card designer Designer2: card & excerpt combined

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 | The card4 shortcode has no wrapper. width:%W:90% %; padding-top:max-content; 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…


Excerpt structure: contain pw5/title/body:
sc name="card4" N="·c4a"

contain·c4a · title·c4a · body·c4a

ACF_quote

HEIGHT BY CONTENT | The card4 shortcode has no wrapper. width:%W:90% %; padding-top:max-content; 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…
Layer ·c4a_h1:

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 | The card4 shortcode has no wrapper. width:%W:90% %; padding-top:max-content; It maintains the ability to have animated layers based on “contain” or “contain2_”. It will NOT expand vertically with height:max-content


Excerpt structure: contain pw5/title/body:
sc name="card4" N="·c4b"

contain·c4b · title·c4b · body·c4b

ACF_quote

HEIGHT BY CONTENT | The card4 shortcode has no wrapper. width:%W:90% %; padding-top:max-content; It maintains the ability to have animated layers based on “contain” or “contain2_”. It will NOT expand vertically with height:max-content
Layer ·c4b_h1:


V2a


V2b
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.


Excerpt shortcode structure: contain_2/title/body:
sc name="card2" N="·c2a"

contain2_·c2a · title·c2a · body·c2a

ACF_quote

The card2 shortcode has no wrapper.
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]

Excerpt shortcode structure: contain_2/title/body:
sc name="card2" N="·c2b"

contain2_·c2b · title·c2b · body·c2b

ACF_quote

The card2 shortcode has no wrapper.
V2a


V2b

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%}
Card height is defined in the contain class:width:49%; padding-top:49%; margin-right:1%;
class=”contain_06n5 card_06n5″ | 49%+1% mgn | !!The two classes must be set in the SAME div!!
Layer _06n5_h1: LAKE
Layer _06n5_h1: EYE