PopupCards_06n5 6 Hover cards managed via SC and local params.

Vitaproto
Description_06n_o

Vitaproto
Description_06n_o

Ouvrir
Exemple online
Card_06n
Ceci est un exemple de carte via shortcode




New nomenclature in progress Edit shortcode card_06n5 84410

Col: column_master100 100%
wrap_06n5L

contain_06n5L card_06n5L
Cardstart: wrap_06n5
wrap_06n5 {padding:0 5px 7px; border:2px dotted red; margin:0 0.4vw 0.4vw 0; height:max-content; overflow:hidden;}  
@media (min-width:1025px) {.wrap_06n5 {background:rgba(240,240,252,1);}}

contain_06n5 card_06n5
.contain_06n5 {float:left; position:relative; top:0; left:0; width:50%; background:rgba(0,200,230,0.3); border:2px dashed dodgerblue;}
@media (min-width:1025px) {.contain_06n5 {height:12vw;}}

.card_06n5 {position:absolute; width:100%; height:100%; box-shadow:0px 7px 10px rgba(0,0,0,0.5); border:0px dashed red; border-radius:10px;}

Cardstart: wrap_06n5
wrap_06n5 {padding:0 5px 7px; border:2px dotted red; margin:0 0.4vw 0.4vw 0; height:max-content; overflow:hidden;}  
@media (min-width:1025px) {.wrap_06n5 {background:rgba(240,240,252,1);}}

contain_06n5 card_06n5
.contain_06n5 {float:left; position:relative; top:0; left:0; width:50%; background:rgba(0,200,230,0.3); border:2px dashed dodgerblue;}
@media (min-width:1025px) {.contain_06n5 {height:12vw;}}

.card_06n5 {position:absolute; width:100%; height:100%; box-shadow:0px 7px 10px rgba(0,0,0,0.5); border:0px dashed red; border-radius:10px;}

Structural components
‹header›  BBLw    ≥  Page margins ≥ Local
‹column›  Column  ≥  Dashed grey  ≥ Local
‹section› Wrap    ≥  Dotted red   ≥ Local or Shortcode (Cardstart)
‹article› Contain ≥  Dotted blue  ≥ Local or Shortcode
‹article› Card    ≥  Base card    ≥ Local or Shortcode
‹div›     Layer   ≥  Interactive card overlays
‹column class="column_master1" style="margin-bottom:20px!important; min-height:50px!important;"› COLUMN CONTENT ‹/column›
Column_master1 nested: height:50px

Col1: column_master1 50% | SHORTCODE Cardstart: wrap_06n5
wrap_06n5 {padding:0 5px 7px; border:2px dotted red; margin:0 0.4vw 0.4vw 0; height:max-content; overflow:hidden;}  
@media (min-width:1025px) {.wrap_06n5 {background:rgba(240,240,252,1);}}

contain_06n5 card_06n5
.contain_06n5 {float:left; position:relative; top:0; left:0; width:50%; background:rgba(0,200,230,0.3); border:2px dashed dodgerblue;}
@media (min-width:1025px) {.contain_06n5 {height:12vw;}}

.card_06n5 {position:absolute; width:100%; height:100%; box-shadow:0px 7px 10px rgba(0,0,0,0.5); border:0px dashed red; border-radius:10px;}

Col2: column_master1 50% | LOCAL CODE wrap_06n5L

contain_06n5L card_06n5L
Layer 1
Layer 2
Layer 3
.contain_06n5L {float:left; position:relative; top:0; left:0; width:50%; background:rgba(0,200,230,0.3); border:2px dashed dodgerblue;}
@media (min-width:1025px) {.contain_06n5L {height:12vw;}}

.card_06n5L {position:absolute; width:100%; height:100%; box-shadow:0px 7px 10px rgba(0,0,0,0.5); border:0px dashed red; border-radius:10px;}

ColTest: column_master1 100%
1
HYTTE
This too enables the automatic generation of cards