@micromag/screen-urbania-article 0.3.460 → 0.3.465

package/assets/css/styles.css

@@ -1,2 +1,2 @@
 .micromag-screen-urbania-article-urbania-base-article-container.micromag-screen-urbania-article-urbania-base-article-isVideo .micromag-screen-urbania-article-urbania-base-article-visual,.micromag-screen-urbania-article-urbania-base-article-empty,.micromag-screen-urbania-article-urbania-base-article-footerContainer,.micromag-screen-urbania-article-urbania-base-article-video{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-urbania-article-urbania-base-article-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-urbania-article-urbania-base-article-disabled.micromag-screen-urbania-article-urbania-base-article-container{overflow:hidden;pointer-events:none}.micromag-screen-urbania-article-urbania-base-article-hidden.micromag-screen-urbania-article-urbania-base-article-container{display:none;visibility:hidden}.micromag-screen-urbania-article-urbania-base-article-placeholder.micromag-screen-urbania-article-urbania-base-article-container .micromag-screen-urbania-article-urbania-base-article-content{padding:6px;position:relative}.micromag-screen-urbania-article-urbania-base-article-empty{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-urbania-article-urbania-base-article-container.micromag-screen-urbania-article-urbania-base-article-isPlaceholder .micromag-screen-urbania-article-urbania-base-article-articleContent{background-color:transparent;background-color:#2b2b2b;height:35%;margin:5px auto;width:80%}.micromag-screen-urbania-article-urbania-base-article-container.micromag-screen-urbania-article-urbania-base-article-isPlaceholder .micromag-screen-urbania-article-urbania-base-article-visual{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;height:50%;margin:5px auto;position:relative;width:80%}.micromag-screen-urbania-article-urbania-base-article-container.micromag-screen-urbania-article-urbania-base-article-isVideo .micromag-screen-urbania-article-urbania-base-article-articleContent{-webkit-box-flex:1;-ms-flex-positive:1;-webkit-box-pack:end;-ms-flex-pack:end;background-color:transparent;flex-grow:1;justify-content:flex-end;margin-bottom:70px;position:relative}.micromag-screen-urbania-article-urbania-base-article-container.micromag-screen-urbania-article-urbania-base-article-isVideo .micromag-screen-urbania-article-urbania-base-article-articleContent .micromag-screen-urbania-article-urbania-base-article-description,.micromag-screen-urbania-article-urbania-base-article-container.micromag-screen-urbania-article-urbania-base-article-isVideo .micromag-screen-urbania-article-urbania-base-article-articleContent .micromag-screen-urbania-article-urbania-base-article-title{color:#fff;text-shadow:0 0 6px #222}.micromag-screen-urbania-article-urbania-base-article-container.micromag-screen-urbania-article-urbania-base-article-isVideo .micromag-screen-urbania-article-urbania-base-article-articleContent .micromag-screen-urbania-article-urbania-base-article-sponsors{margin-top:0}.micromag-screen-urbania-article-urbania-base-article-container.micromag-screen-urbania-article-urbania-base-article-isVideo .micromag-screen-urbania-article-urbania-base-article-callToAction{position:absolute}.micromag-screen-urbania-article-urbania-base-article-placeholder{background-color:#6c6c6c}.micromag-screen-urbania-article-urbania-base-article-emptyContainer{height:0;margin-bottom:10px;padding-bottom:20%;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);width:100%}.micromag-screen-urbania-article-urbania-base-article-emptyContainer.micromag-screen-urbania-article-urbania-base-article-small{padding-bottom:15%}.micromag-screen-urbania-article-urbania-base-article-empty{margin:0}.micromag-screen-urbania-article-urbania-base-article-background{position:absolute;z-index:1}.micromag-screen-urbania-article-urbania-base-article-content{height:100%;position:static;z-index:2}.micromag-screen-urbania-article-urbania-base-article-articleContent,.micromag-screen-urbania-article-urbania-base-article-content{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%}.micromag-screen-urbania-article-urbania-base-article-articleContent{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;color:#222;justify-content:center;text-align:center;z-index:3}.micromag-screen-urbania-article-urbania-base-article-articleContent .micromag-screen-urbania-article-urbania-base-article-authors,.micromag-screen-urbania-article-urbania-base-article-articleContent .micromag-screen-urbania-article-urbania-base-article-description,.micromag-screen-urbania-article-urbania-base-article-articleContent .micromag-screen-urbania-article-urbania-base-article-overTitle,.micromag-screen-urbania-article-urbania-base-article-articleContent .micromag-screen-urbania-article-urbania-base-article-title{padding:3px 20px}.micromag-screen-urbania-article-urbania-base-article-articleContent .micromag-screen-urbania-article-urbania-base-article-overTitle{border-bottom:1px solid;font-family:Agrandir Tight;font-size:10px;font-weight:700;margin-bottom:10px;padding:30px 0 2px;text-transform:uppercase}.micromag-screen-urbania-article-urbania-base-article-articleContent .micromag-screen-urbania-article-urbania-base-article-title{font-family:GarageGothic-Bold;font-size:36px;line-height:.88;text-transform:uppercase}.micromag-screen-urbania-article-urbania-base-article-articleContent .micromag-screen-urbania-article-urbania-base-article-description{padding:6px 20px 12px}.micromag-screen-urbania-article-urbania-base-article-articleContent .micromag-screen-urbania-article-urbania-base-article-lede{font-family:Agrandir;line-height:1.1}.micromag-screen-urbania-article-urbania-base-article-articleContent .micromag-screen-urbania-article-urbania-base-article-lede p{font-weight:inherit;margin:0}.micromag-screen-urbania-article-urbania-base-article-articleContent .micromag-screen-urbania-article-urbania-base-article-authors{margin-bottom:6px}.micromag-screen-urbania-article-urbania-base-article-articleContent .micromag-screen-urbania-article-urbania-base-article-authors.micromag-screen-urbania-article-urbania-base-article-isAboveDescription{margin-bottom:0}.micromag-screen-urbania-article-urbania-base-article-articleContent .micromag-screen-urbania-article-urbania-base-article-sponsors{background-color:#ff0;color:#222;display:inline-block;letter-spacing:.04em;line-height:.7;margin-top:auto;padding:2px 10px 4px;width:100%}.micromag-screen-urbania-article-urbania-base-article-articleContent .micromag-screen-urbania-article-urbania-base-article-sponsors p,.micromag-screen-urbania-article-urbania-base-article-articleContent .micromag-screen-urbania-article-urbania-base-article-sponsors span{line-height:.7}.micromag-screen-urbania-article-urbania-base-article-articleContent .micromag-screen-urbania-article-urbania-base-article-sponsor{display:inline;font-family:Agrandir;font-size:9px;font-weight:400;line-height:.7;text-transform:uppercase}.micromag-screen-urbania-article-urbania-base-article-articleContent.micromag-screen-urbania-article-urbania-base-article-quatre95{background-color:#fff}.micromag-screen-urbania-article-urbania-base-article-articleContent.micromag-screen-urbania-article-urbania-base-article-quatre95 .micromag-screen-urbania-article-urbania-base-article-author{color:#5e79ff}.micromag-screen-urbania-article-urbania-base-article-articleContent.micromag-screen-urbania-article-urbania-base-article-quatre95 .micromag-screen-urbania-article-urbania-base-article-sponsors,.micromag-screen-urbania-article-urbania-base-article-articleContent.micromag-screen-urbania-article-urbania-base-article-urbania{background-color:#ff0;color:#222}.micromag-screen-urbania-article-urbania-base-article-articleContent.micromag-screen-urbania-article-urbania-base-article-urbania .micromag-screen-urbania-article-urbania-base-article-author{color:#222}.micromag-screen-urbania-article-urbania-base-article-articleContent.micromag-screen-urbania-article-urbania-base-article-urbania .micromag-screen-urbania-article-urbania-base-article-sponsors{background-color:#222;color:#ff0}.micromag-screen-urbania-article-urbania-base-article-articleContent.micromag-screen-urbania-article-urbania-base-article-dehors{background-color:#00c693;color:#ffeada}.micromag-screen-urbania-article-urbania-base-article-articleContent.micromag-screen-urbania-article-urbania-base-article-dehors .micromag-screen-urbania-article-urbania-base-article-author{color:#ffeada}.micromag-screen-urbania-article-urbania-base-article-articleContent.micromag-screen-urbania-article-urbania-base-article-universities{background-color:#fff;color:#f33}.micromag-screen-urbania-article-urbania-base-article-articleContent.micromag-screen-urbania-article-urbania-base-article-universities .micromag-screen-urbania-article-urbania-base-article-overTitle{color:#222}.micromag-screen-urbania-article-urbania-base-article-visual{height:100%;z-index:2}.micromag-screen-urbania-article-urbania-base-article-footerContainer{z-index:3}.micromag-screen-urbania-article-urbania-base-article-footer{bottom:0;left:0;padding-bottom:5px;position:absolute;right:0;-webkit-transform:translateZ(0);transform:translateZ(0);vertical-align:middle;z-index:10}.micromag-screen-urbania-article-urbania-base-article-footer .micromag-screen-urbania-article-urbania-base-article-arrow{margin-bottom:5px;opacity:.95}.micromag-screen-urbania-article-urbania-base-article-footer .micromag-screen-urbania-article-urbania-base-article-icon{display:inline-block;margin-right:3px;margin-top:-3px;padding:2px}.micromag-screen-urbania-article-urbania-base-article-footer .micromag-screen-urbania-article-urbania-base-article-button{font-family:Agrandir;font-size:16px}.micromag-screen-urbania-article-urbania-base-article-mediaControls{padding:10px 20px 20px}.micromag-screen-urbania-article-urbania-base-article-placeholder{display:block}.micromag-screen-urbania-article-urbania-base-article-header{left:0;position:absolute;top:0;width:100%;z-index:4}.micromag-screen-urbania-article-urbania-base-article-bottom{opacity:0;-webkit-transition:opacity .15s linear;transition:opacity .15s linear}.micromag-screen-urbania-article-urbania-base-article-bottom.micromag-screen-urbania-article-urbania-base-article-visible{opacity:1}.micromag-screen-urbania-article-urbania-base-article-bottom.micromag-screen-urbania-article-urbania-base-article-withGradient{background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,.4)));background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.4))}.micromag-screen-urbania-article-urbania-base-article-image{height:100%!important;position:relative!important;width:100%!important}.micromag-screen-urbania-article-urbania-base-article-isCurrent .micromag-screen-urbania-article-urbania-base-article-image{-webkit-animation:micromag-screen-urbania-article-urbania-base-article-slowZoom 15s ease-out 1 forwards;animation:micromag-screen-urbania-article-urbania-base-article-slowZoom 15s ease-out 1 forwards}.micromag-screen-urbania-article-urbania-base-article-img{height:100%!important;left:auto!important;-o-object-fit:cover;object-fit:cover;position:relative!important;top:auto!important;width:100%!important}@-webkit-keyframes micromag-screen-urbania-article-urbania-base-article-slowZoom{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.2);transform:scale(1.2)}}@keyframes micromag-screen-urbania-article-urbania-base-article-slowZoom{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.2);transform:scale(1.2)}}
-.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-iframe{scrollbar-width:none}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-iframe::-webkit-scrollbar{display:none}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-close,.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-interactiveZone{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-content,.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-empty,.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-iframeContainer{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-urbania-article-urbania-base-article-card-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-urbania-article-urbania-base-article-card-disabled.micromag-screen-urbania-article-urbania-base-article-card-container{overflow:hidden;pointer-events:none}.micromag-screen-urbania-article-urbania-base-article-card-hidden.micromag-screen-urbania-article-urbania-base-article-card-container{display:none;visibility:hidden}.micromag-screen-urbania-article-urbania-base-article-card-placeholder.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-content{padding:6px;position:relative}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-empty{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-background{z-index:1}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-content{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;width:100%;z-index:2}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-layout{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-text{font-family:Agrandir,sans-serif;font-size:1.65em;font-weight:700;padding:0 10px;text-align:center;text-shadow:0 4px 4px rgba(0,0,0,.35);width:100%}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-text p{font-weight:inherit;margin:0}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-iframeContainer{z-index:5}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-iframeContainer.micromag-screen-urbania-article-urbania-base-article-card-isPlaceholder{-ms-flex-item-align:center;align-self:center;background-color:#6c6c6c;border-top-left-radius:1em;border-top-right-radius:1em;height:45%;top:55%;width:95%}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-popupContainer{position:absolute}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-popupContainerInner{border-top-left-radius:15px;border-top-right-radius:15px;-webkit-box-shadow:0 0 26px rgba(0,0,0,.35);box-shadow:0 0 26px rgba(0,0,0,.35);height:100%;left:50%;overflow:hidden;position:absolute;top:0;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);-webkit-transition:width .2s cubic-bezier(.5,0,.75,0),border-radius .2s cubic-bezier(.5,0,.75,0);transition:width .2s cubic-bezier(.5,0,.75,0),border-radius .2s cubic-bezier(.5,0,.75,0);width:calc(100% - 30px)}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-popupContainerInner.micromag-screen-urbania-article-urbania-base-article-card-opened{border-top-left-radius:0;border-top-right-radius:0;width:100%}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-pulse{-webkit-animation:micromag-screen-urbania-article-urbania-base-article-card-pulse 3s cubic-bezier(.68,-.6,.32,1.6) infinite alternate;animation:micromag-screen-urbania-article-urbania-base-article-card-pulse 3s cubic-bezier(.68,-.6,.32,1.6) infinite alternate;-webkit-animation-delay:1s;animation-delay:1s}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-interactiveZone{position:absolute;-ms-touch-action:none;touch-action:none;-webkit-transform:translateZ(0);transform:translateZ(0)}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-close{-webkit-animation:micromag-screen-urbania-article-urbania-base-article-card-popIn .2s cubic-bezier(.65,0,.35,1);animation:micromag-screen-urbania-article-urbania-base-article-card-popIn .2s cubic-bezier(.65,0,.35,1);color:#222;-webkit-filter:invert(100%);filter:invert(100%);position:absolute;right:10px;top:10px;z-index:6}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-closeIcon{height:1.5em;-webkit-transform:translateZ(0);transform:translateZ(0);width:1.5em}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-iframe{left:50%;position:absolute;top:0;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);z-index:4}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-empty{border-top-left-radius:2em;border-top-right-radius:2em;height:45%;margin:0;top:55%}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-header{left:0;position:absolute;top:0;width:100%;z-index:4}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-iframeBlocker{bottom:0;display:none;position:absolute;z-index:4}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-iframeBlocker.micromag-screen-urbania-article-urbania-base-article-card-active{display:block}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-placeholder{background-color:#6c6c6c;height:50px;width:50px}@-webkit-keyframes micromag-screen-urbania-article-urbania-base-article-card-popIn{0%{-webkit-transform:scale(.8);transform:scale(.8)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes micromag-screen-urbania-article-urbania-base-article-card-popIn{0%{-webkit-transform:scale(.8);transform:scale(.8)}to{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes micromag-screen-urbania-article-urbania-base-article-card-pulse{0%{-webkit-transform:translate(-50%);transform:translate(-50%)}50%{-webkit-transform:translate(-50%,2%);transform:translate(-50%,2%)}to{-webkit-transform:translate(-50%);transform:translate(-50%)}}@keyframes micromag-screen-urbania-article-urbania-base-article-card-pulse{0%{-webkit-transform:translate(-50%);transform:translate(-50%)}50%{-webkit-transform:translate(-50%,2%);transform:translate(-50%,2%)}to{-webkit-transform:translate(-50%);transform:translate(-50%)}}
+.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-iframe{scrollbar-width:none}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-iframe::-webkit-scrollbar{display:none}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-close,.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-dragHandle{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-cardContainer,.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-content,.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-empty{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-urbania-article-urbania-base-article-card-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-urbania-article-urbania-base-article-card-disabled.micromag-screen-urbania-article-urbania-base-article-card-container{overflow:hidden;pointer-events:none}.micromag-screen-urbania-article-urbania-base-article-card-hidden.micromag-screen-urbania-article-urbania-base-article-card-container{display:none;visibility:hidden}.micromag-screen-urbania-article-urbania-base-article-card-placeholder.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-content{padding:6px;position:relative}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-empty{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-background{z-index:1}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-content{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;width:100%;z-index:2}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-layout{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-text{font-family:Agrandir,sans-serif;font-size:1.65em;font-weight:700;padding:0 10px;text-align:center;text-shadow:0 4px 4px rgba(0,0,0,.35);width:100%}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-text p{font-weight:inherit;margin:0}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-cardContainer{z-index:5}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-cardContainer.micromag-screen-urbania-article-urbania-base-article-card-isPlaceholder{-ms-flex-item-align:center;align-self:center;background-color:#6c6c6c;border-top-left-radius:1em;border-top-right-radius:1em;height:45%;left:2.5%;top:55%;width:95%}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-card{position:absolute}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-callToAction{left:50%;opacity:1;position:absolute;text-align:center;top:-33px;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);-webkit-transition:opacity .1s cubic-bezier(.65,0,.35,1);transition:opacity .1s cubic-bezier(.65,0,.35,1)}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-arrow{-webkit-filter:drop-shadow(0 -1px 3px #000);filter:drop-shadow(0 -1px 3px #000)}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-ctaText{font-family:Agrandir,sans-serif;font-size:10px;font-weight:500;text-shadow:0 -1px 3px rgba(0,0,0,.35);text-transform:uppercase}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-cardInner{background-color:#fff;border-top-left-radius:15px;border-top-right-radius:15px;-webkit-box-shadow:0 0 26px rgba(0,0,0,.35);box-shadow:0 0 26px rgba(0,0,0,.35);height:100%;left:50%;position:absolute;top:0;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);-webkit-transition:width .2s cubic-bezier(.5,0,.75,0),border-radius .2s cubic-bezier(.5,0,.75,0);transition:width .2s cubic-bezier(.5,0,.75,0),border-radius .2s cubic-bezier(.5,0,.75,0);width:calc(100% - 30px)}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-pulse{-webkit-animation:micromag-screen-urbania-article-urbania-base-article-card-pulse 3s cubic-bezier(.68,-.6,.32,1.6) infinite alternate;animation:micromag-screen-urbania-article-urbania-base-article-card-pulse 3s cubic-bezier(.68,-.6,.32,1.6) infinite alternate;-webkit-animation-delay:1s;animation-delay:1s}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-dragHandle{height:100%;left:0;position:absolute;top:0;-ms-touch-action:none;touch-action:none;-webkit-transform:translateZ(0);transform:translateZ(0);width:100%;z-index:6}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-close{color:#222;-webkit-filter:invert(100%);filter:invert(100%);opacity:0;position:absolute;right:10px;top:10px;-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);-webkit-transition:opacity .2s cubic-bezier(.65,0,.35,1),-webkit-transform .2s cubic-bezier(.65,0,.35,1);transition:opacity .2s cubic-bezier(.65,0,.35,1),-webkit-transform .2s cubic-bezier(.65,0,.35,1);transition:transform .2s cubic-bezier(.65,0,.35,1),opacity .2s cubic-bezier(.65,0,.35,1);transition:transform .2s cubic-bezier(.65,0,.35,1),opacity .2s cubic-bezier(.65,0,.35,1),-webkit-transform .2s cubic-bezier(.65,0,.35,1);z-index:7}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-closeIcon{display:block;height:1.5em;-webkit-transform:translateZ(0);transform:translateZ(0);width:1.5em}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-articlePreview{background-color:#fff;border-top-left-radius:15px;border-top-right-radius:15px;opacity:1;position:relative;text-align:center;-webkit-transition:opacity .2s cubic-bezier(.65,0,.35,1),background-color .2s cubic-bezier(.65,0,.35,1);transition:opacity .2s cubic-bezier(.65,0,.35,1),background-color .2s cubic-bezier(.65,0,.35,1);width:100%;z-index:5}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-articlePreviewInner{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:start;-ms-flex-pack:start;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;justify-content:flex-start;padding:20px 10px;width:100%}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-articleTitle{color:#000;font-family:Garage Gothic,sans-serif;font-size:24px;margin-bottom:.75rem;text-transform:uppercase}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-spinnerContainer{left:50%;pointer-events:none;position:absolute;top:20px;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);z-index:8}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-spinner{color:#000}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-iframe{border-top-left-radius:15px;border-top-right-radius:15px;left:50%;opacity:0;position:absolute;top:0;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);-webkit-transition:border-radius .2s cubic-bezier(.5,0,.75,0),opacity .2s cubic-bezier(.5,0,.75,0);transition:border-radius .2s cubic-bezier(.5,0,.75,0),opacity .2s cubic-bezier(.5,0,.75,0);z-index:4}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-empty{border-top-left-radius:2em;border-top-right-radius:2em;height:45%;margin:0;top:55%}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-header{left:0;position:absolute;top:0;width:100%;z-index:4}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-iframeBlocker{bottom:0;display:none;height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-iframeBlocker.micromag-screen-urbania-article-urbania-base-article-card-active{display:block}.micromag-screen-urbania-article-urbania-base-article-card-container .micromag-screen-urbania-article-urbania-base-article-card-placeholder{background-color:#6c6c6c;height:50px;width:50px}.micromag-screen-urbania-article-urbania-base-article-card-container.micromag-screen-urbania-article-urbania-base-article-card-articleOpened .micromag-screen-urbania-article-urbania-base-article-card-cardInner{border-top-left-radius:0;border-top-right-radius:0;width:100%}.micromag-screen-urbania-article-urbania-base-article-card-container.micromag-screen-urbania-article-urbania-base-article-card-articleOpened .micromag-screen-urbania-article-urbania-base-article-card-callToAction{opacity:0}.micromag-screen-urbania-article-urbania-base-article-card-container.micromag-screen-urbania-article-urbania-base-article-card-articleOpened .micromag-screen-urbania-article-urbania-base-article-card-articlePreview{opacity:0;pointer-events:none}.micromag-screen-urbania-article-urbania-base-article-card-container.micromag-screen-urbania-article-urbania-base-article-card-articleOpened .micromag-screen-urbania-article-urbania-base-article-card-iframe{border-top-left-radius:0;border-top-right-radius:0;opacity:1}.micromag-screen-urbania-article-urbania-base-article-card-container.micromag-screen-urbania-article-urbania-base-article-card-articleOpened .micromag-screen-urbania-article-urbania-base-article-card-dragHandle{height:100px}.micromag-screen-urbania-article-urbania-base-article-card-container.micromag-screen-urbania-article-urbania-base-article-card-articleOpened .micromag-screen-urbania-article-urbania-base-article-card-close{opacity:1;pointer-events:all;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}@-webkit-keyframes micromag-screen-urbania-article-urbania-base-article-card-pulse{0%{-webkit-transform:translate(-50%);transform:translate(-50%)}50%{-webkit-transform:translate(-50%,2%);transform:translate(-50%,2%)}to{-webkit-transform:translate(-50%);transform:translate(-50%)}}@keyframes micromag-screen-urbania-article-urbania-base-article-card-pulse{0%{-webkit-transform:translate(-50%);transform:translate(-50%)}50%{-webkit-transform:translate(-50%,2%);transform:translate(-50%,2%)}to{-webkit-transform:translate(-50%);transform:translate(-50%)}}

package/es/index.js

@@ -9,9 +9,9 @@ import { isTextFilled, isHeaderFilled, isFooterFilled, getFooterProps, getStyleF
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import classNames from 'classnames';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
-import { ScreenElement, PlaceholderSubtitle, Empty, PlaceholderTitle, PlaceholderImage, PlaceholderText, Close } from '@micromag/core/components';
+import { ScreenElement, PlaceholderSubtitle, Empty, PlaceholderTitle, PlaceholderImage, PlaceholderText, Close, Spinner } from '@micromag/core/components';
 import { useScreenSize, useScreenRenderContext, useViewerWebView, useViewerContext, useViewerInteraction, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
-import { useDimensionObserver } from '@micromag/core/hooks';
+import { useDimensionObserver, useResizeObserver } from '@micromag/core/hooks';
 import Background from '@micromag/element-background';
 import Container from '@micromag/element-container';
 import Footer from '@micromag/element-footer';
@@ -27,14 +27,17 @@ import Layout from '@micromag/element-layout';
 
 var propTypes$4 = {
   color: PropTypes.string,
+  strokeWidth: PropTypes.number,
   className: PropTypes.string
 };
 var defaultProps$4 = {
   color: 'currentColor',
+  strokeWidth: 3,
   className: null
 };
 var Arrow = function Arrow(_ref) {
   var color = _ref.color,
+    strokeWidth = _ref.strokeWidth,
     className = _ref.className;
   return /*#__PURE__*/React.createElement("svg", {
     version: "1.1",
@@ -53,7 +56,7 @@ var Arrow = function Arrow(_ref) {
     id: "b",
     fill: "none",
     stroke: color,
-    strokeWidth: "3px",
+    strokeWidth: "".concat(strokeWidth, "px"),
     strokeLinejoin: "round",
     strokeLinecap: "round",
     d: "M1.5,10.88L24.26,1.5l22.77,9.38"
@@ -632,9 +635,6 @@ var UrbaniaLoader = function UrbaniaLoader(_ref) {
       })
     };
   }, [article, url, props]);
-
-  // console.log('full', { ...props, ...values });
-
   return /*#__PURE__*/React.createElement(Component, Object.assign({}, props, values, {
     hasArticle: url !== null
   }));
@@ -827,16 +827,18 @@ var definition = {
   }]
 };
 
-var styles = {"container":"micromag-screen-urbania-article-urbania-base-article-card-container","iframe":"micromag-screen-urbania-article-urbania-base-article-card-iframe","close":"micromag-screen-urbania-article-urbania-base-article-card-close","interactiveZone":"micromag-screen-urbania-article-urbania-base-article-card-interactiveZone","empty":"micromag-screen-urbania-article-urbania-base-article-card-empty","iframeContainer":"micromag-screen-urbania-article-urbania-base-article-card-iframeContainer","content":"micromag-screen-urbania-article-urbania-base-article-card-content","disabled":"micromag-screen-urbania-article-urbania-base-article-card-disabled","hidden":"micromag-screen-urbania-article-urbania-base-article-card-hidden","placeholder":"micromag-screen-urbania-article-urbania-base-article-card-placeholder","background":"micromag-screen-urbania-article-urbania-base-article-card-background","layout":"micromag-screen-urbania-article-urbania-base-article-card-layout","text":"micromag-screen-urbania-article-urbania-base-article-card-text","isPlaceholder":"micromag-screen-urbania-article-urbania-base-article-card-isPlaceholder","popupContainer":"micromag-screen-urbania-article-urbania-base-article-card-popupContainer","popupContainerInner":"micromag-screen-urbania-article-urbania-base-article-card-popupContainerInner","opened":"micromag-screen-urbania-article-urbania-base-article-card-opened","pulse":"micromag-screen-urbania-article-urbania-base-article-card-pulse","popIn":"micromag-screen-urbania-article-urbania-base-article-card-popIn","closeIcon":"micromag-screen-urbania-article-urbania-base-article-card-closeIcon","header":"micromag-screen-urbania-article-urbania-base-article-card-header","iframeBlocker":"micromag-screen-urbania-article-urbania-base-article-card-iframeBlocker","active":"micromag-screen-urbania-article-urbania-base-article-card-active"};
+var styles = {"container":"micromag-screen-urbania-article-urbania-base-article-card-container","iframe":"micromag-screen-urbania-article-urbania-base-article-card-iframe","close":"micromag-screen-urbania-article-urbania-base-article-card-close","dragHandle":"micromag-screen-urbania-article-urbania-base-article-card-dragHandle","empty":"micromag-screen-urbania-article-urbania-base-article-card-empty","cardContainer":"micromag-screen-urbania-article-urbania-base-article-card-cardContainer","content":"micromag-screen-urbania-article-urbania-base-article-card-content","disabled":"micromag-screen-urbania-article-urbania-base-article-card-disabled","hidden":"micromag-screen-urbania-article-urbania-base-article-card-hidden","placeholder":"micromag-screen-urbania-article-urbania-base-article-card-placeholder","background":"micromag-screen-urbania-article-urbania-base-article-card-background","layout":"micromag-screen-urbania-article-urbania-base-article-card-layout","text":"micromag-screen-urbania-article-urbania-base-article-card-text","isPlaceholder":"micromag-screen-urbania-article-urbania-base-article-card-isPlaceholder","card":"micromag-screen-urbania-article-urbania-base-article-card-card","callToAction":"micromag-screen-urbania-article-urbania-base-article-card-callToAction","arrow":"micromag-screen-urbania-article-urbania-base-article-card-arrow","ctaText":"micromag-screen-urbania-article-urbania-base-article-card-ctaText","cardInner":"micromag-screen-urbania-article-urbania-base-article-card-cardInner","pulse":"micromag-screen-urbania-article-urbania-base-article-card-pulse","closeIcon":"micromag-screen-urbania-article-urbania-base-article-card-closeIcon","articlePreview":"micromag-screen-urbania-article-urbania-base-article-card-articlePreview","articlePreviewInner":"micromag-screen-urbania-article-urbania-base-article-card-articlePreviewInner","articleTitle":"micromag-screen-urbania-article-urbania-base-article-card-articleTitle","spinnerContainer":"micromag-screen-urbania-article-urbania-base-article-card-spinnerContainer","spinner":"micromag-screen-urbania-article-urbania-base-article-card-spinner","header":"micromag-screen-urbania-article-urbania-base-article-card-header","iframeBlocker":"micromag-screen-urbania-article-urbania-base-article-card-iframeBlocker","active":"micromag-screen-urbania-article-urbania-base-article-card-active","articleOpened":"micromag-screen-urbania-article-urbania-base-article-card-articleOpened"};
 
 var propTypes = {
   hasArticle: PropTypes.bool,
   url: PropTypes.string,
-  title: PropTypes.string,
+  title: PropTypes$1.headingElement,
+  author: PropTypes$1.authorElement,
   text: PropTypes$1.textElement,
   image: PropTypes$1.visualElement,
   header: PropTypes$1.header,
   background: PropTypes$1.backgroundElement,
+  callToAction: PropTypes$1.textElement,
   current: PropTypes.bool,
   active: PropTypes.bool,
   spacing: PropTypes.number,
@@ -846,10 +848,12 @@ var defaultProps = {
   hasArticle: false,
   url: null,
   title: null,
+  author: null,
   text: null,
   image: null,
   header: null,
   background: null,
+  callToAction: null,
   current: true,
   active: true,
   spacing: 20,
@@ -859,15 +863,16 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
   var hasArticle = _ref.hasArticle,
     url = _ref.url,
     title = _ref.title,
+    author = _ref.author,
     text = _ref.text,
     image = _ref.image,
     header = _ref.header,
     background = _ref.background,
+    callToAction = _ref.callToAction,
     current = _ref.current,
     active = _ref.active,
     spacing = _ref.spacing,
     className = _ref.className;
-  var isSafari = navigator.userAgent.match(/safari/i) !== null;
   var finalBackground = background !== null ? background : {
     image: image
   };
@@ -892,55 +897,106 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
     enableInteraction = _useViewerInteraction.enableInteraction,
     disableInteraction = _useViewerInteraction.disableInteraction;
   var _usePlaybackContext = usePlaybackContext(),
-    muted = _usePlaybackContext.muted;
+    muted = _usePlaybackContext.muted,
+    setControls = _usePlaybackContext.setControls;
   var mediaRef = usePlaybackMediaRef(current);
+  var _ref3 = author || {},
+    _ref3$name = _ref3.name,
+    authorName = _ref3$name === void 0 ? null : _ref3$name;
   var hasUrl = url !== null && url.length > 0;
   var hasHeader = isHeaderFilled(header);
   var hasText = isTextFilled(text);
-
-  // iframe interaction
+  var hasTitle = isTextFilled(title);
+  var hasAuthorName = isTextFilled(authorName);
+  var hasCta = isTextFilled(callToAction);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    iframeOpened = _useState2[0],
-    setIframeOpened = _useState2[1];
+    articleOpened = _useState2[0],
+    setArticleOpened = _useState2[1];
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    iframeInteractionEnabled = _useState4[0],
-    setIframeInteractionEnabled = _useState4[1];
+    iframeEnabled = _useState4[0],
+    setIframeEnabled = _useState4[1];
   var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    firstInteraction = _useState6[0],
-    setFirstInteraction = _useState6[1];
+    iframeMounted = _useState6[0],
+    setIframeMounted = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    iframeLoaded = _useState8[0],
+    setIframeLoaded = _useState8[1];
   var mediaShouldLoad = current || active;
-  var backgroundPlaying = current && (isView || isEdit) && !iframeOpened;
+  var backgroundPlaying = current && (isView || isEdit) && !articleOpened;
+  var withIframe = hasUrl && !isPlaceholder && !isPreview && !isStatic;
+
+  // @TODO: collapsed card the height of articlePreview
+  // const articlePreviewRef = useRef();
+  // const previewCurrent = articlePreviewRef.current || null;
 
-  // iframe animation
-  var hasIframeAnimation = !isEdit && !isPlaceholder && !isPreview && !isStatic && !firstInteraction;
-  var slideInDelay = hasIframeAnimation && isBackgroundVideo && backgroundPlaying;
-  var hasIframeBounce = hasIframeAnimation && current && !iframeOpened;
-  var toggleIframe = useCallback(function () {
-    var newIframeOpened = !iframeOpened;
-    setIframeOpened(newIframeOpened);
-    if (newIframeOpened) {
+  // const articlePreviewHeight = useMemo(() => {
+  //     if (previewCurrent !== null) {
+  //         const { height: previewHeight = 0 } = previewCurrent.getBoundingClientRect();
+  //         return previewHeight !== 0 ? previewHeight : 0;
+  //     }
+  //     return 0;
+  // }, [previewCurrent, height]);
+
+  // card animations
+  var withCardAnimation = !isPlaceholder && !isPreview && !isStatic && !iframeMounted;
+  var slideInDelay = withCardAnimation && isBackgroundVideo && backgroundPlaying;
+  var withCardBounce = withCardAnimation && current && !articleOpened;
+  useEffect(function () {
+    if (!current) {
+      return function () {};
+    }
+    if (isBackgroundVideo && !articleOpened) {
+      setControls(true);
+    } else {
+      setControls(false);
+    }
+    return function () {
+      if (isBackgroundVideo && !articleOpened) {
+        setControls(false);
+      }
+    };
+  }, [current, setControls, isBackgroundVideo, articleOpened, setControls]);
+  var toggleCard = useCallback(function () {
+    var newOpened = !articleOpened;
+    setArticleOpened(newOpened);
+    if (newOpened) {
       disableInteraction();
     } else {
       enableInteraction();
     }
-    setFirstInteraction(true);
-  }, [iframeOpened, setFirstInteraction, setIframeOpened, disableInteraction, enableInteraction]);
-  var bind = useGesture({
-    onDrag: function onDrag(_ref3) {
-      var _ref3$movement = _slicedToArray(_ref3.movement, 2),
-        my = _ref3$movement[1];
-      if (!iframeOpened && my < 0 || iframeOpened && my > 0) {
-        toggleIframe();
-      }
-    },
-    onWheel: function onWheel(_ref4) {
+    setIframeMounted(true);
+  }, [articleOpened, setIframeMounted, setArticleOpened, disableInteraction, enableInteraction]);
+  var onIframeLoad = useCallback(function () {
+    setIframeLoaded(true);
+  }, [setIframeLoaded]);
+  useEffect(function () {
+    if (!iframeMounted || iframeLoaded) {
+      return function () {};
+    }
+    var timeout = setTimeout(function () {
+      setIframeLoaded(true);
+    }, 2000);
+    return function () {
+      clearTimeout(timeout);
+    };
+  }, [iframeMounted, iframeLoaded]);
+  var bindGesture = useGesture({
+    onDrag: function onDrag(_ref4) {
       var _ref4$movement = _slicedToArray(_ref4.movement, 2),
         my = _ref4$movement[1];
-      if (!iframeOpened && my > 0 || iframeOpened && my < 0) {
-        toggleIframe();
+      if (!articleOpened && my < 0 || articleOpened && my > 0) {
+        toggleCard();
+      }
+    },
+    onWheel: function onWheel(_ref5) {
+      var _ref5$movement = _slicedToArray(_ref5.movement, 2),
+        my = _ref5$movement[1];
+      if (!articleOpened && my > 0 || articleOpened && my < 0) {
+        toggleCard();
       }
     }
   }, {
@@ -953,45 +1009,51 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
       axis: 'y'
     }
   });
+  var _useResizeObserver = useResizeObserver({
+      disabled: !articleOpened
+    }),
+    articlePreviewRef = _useResizeObserver.ref,
+    _useResizeObserver$en = _useResizeObserver.entry.contentRect,
+    articlePreviewContentRect = _useResizeObserver$en === void 0 ? null : _useResizeObserver$en;
+  var _ref6 = articlePreviewContentRect || {},
+    _ref6$height = _ref6.height,
+    articlePreviewHeight = _ref6$height === void 0 ? 0 : _ref6$height;
   var y = 100;
-  if (current && iframeOpened) {
+  if (current && articleOpened) {
     y = 0;
-  } else if (current) {
-    y = 75;
+  } else if (current || isPreview) {
+    y = 100 - Math.max(articlePreviewHeight / height * 100, 25);
   }
   var springStyle = useSpring({
     from: {
-      y: 100
+      y: isPreview ? y : 100
     },
     to: {
       y: y
     },
     onStart: function onStart() {
-      setIframeInteractionEnabled(false);
+      setIframeEnabled(false);
     },
     onResolve: function onResolve() {
-      if (iframeOpened) {
-        setIframeInteractionEnabled(true);
+      if (articleOpened) {
+        setIframeEnabled(true);
       }
     },
     delay: slideInDelay ? 1500 : 0,
     config: {
-      // easing: easings.easeInOutElastic,
       easing: easings.easeInOutSine,
       duration: y === 100 ? 1000 : 400
     }
   });
   useEffect(function () {
     if (!current) {
-      setIframeOpened(false);
-      setFirstInteraction(false);
+      setArticleOpened(false);
+      setIframeMounted(false);
+      setIframeLoaded(false);
     }
   }, [current]);
-
-  // console.log('load 1-2', mediaShouldLoad, finalBackground);
-
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, _defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles.isCurrent, current), styles.isPlaceholder, isPlaceholder)]),
+    className: classNames([styles.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles.articleOpened, articleOpened), styles.isCurrent, current), styles.isPlaceholder, isPlaceholder)]),
     "data-screen-ready": isStatic || isCapture
   }, /*#__PURE__*/React.createElement(Background, {
     className: styles.background,
@@ -1037,7 +1099,7 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
   }, hasText ? /*#__PURE__*/React.createElement(Text, Object.assign({
     className: styles.text
   }, text)) : null)), /*#__PURE__*/React.createElement(Container, {
-    className: classNames([styles.iframeContainer, _defineProperty({}, styles.isPlaceholder, isPlaceholder)])
+    className: classNames([styles.cardContainer, _defineProperty({}, styles.isPlaceholder, isPlaceholder)])
   }, /*#__PURE__*/React.createElement(ScreenElement, {
     placeholderProps: {
       className: styles.placeholder
@@ -1051,59 +1113,75 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
     }),
     emptyClassName: styles.empty,
     isEmpty: !hasUrl || !hasArticle
-  }, (!isPreview || !isPlaceholder) && hasArticle ? /*#__PURE__*/React.createElement(animated.div, {
-    className: styles.popupContainer,
+  }, !isPlaceholder && hasArticle ? /*#__PURE__*/React.createElement(animated.div, {
+    className: styles.card,
     style: {
       height: height,
       width: width,
-      transform: springStyle.y.to(function (value) {
+      transform: !isPreview ? springStyle.y.to(function (value) {
         return "translateY(".concat(value, "%");
-      })
-      // top: iframeOpened ? 0 : '75%',
-      // ...springStyle,
+      }) : 'translateY(75%)'
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.popupContainerInner, _defineProperty(_defineProperty({}, styles.opened, iframeOpened), styles.pulse, hasIframeBounce)])
   }, /*#__PURE__*/React.createElement("button", Object.assign({
     type: "button",
-    style: {
-      height: iframeInteractionEnabled ? '100px' : height,
-      width: width,
-      zIndex: 5
-    },
-    onClick: toggleIframe,
-    className: styles.interactiveZone
-  }, current ? bind() : null)), iframeInteractionEnabled ? /*#__PURE__*/React.createElement(Button, {
+    onClick: toggleCard,
+    className: styles.dragHandle
+  }, current ? bindGesture() : null)), /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles.cardInner, _defineProperty({}, styles.pulse, withCardBounce)])
+  }, hasCta ? /*#__PURE__*/React.createElement("div", {
+    className: styles.callToAction
+  }, /*#__PURE__*/React.createElement(Arrow, {
+    strokeWidth: 1,
+    className: styles.arrow
+  }), /*#__PURE__*/React.createElement(Text, Object.assign({
+    className: styles.ctaText
+  }, callToAction))) : null, /*#__PURE__*/React.createElement(Button, {
     className: styles.close,
-    onClick: toggleIframe
+    disabled: !articleOpened,
+    onClick: toggleCard
   }, /*#__PURE__*/React.createElement(Close, {
     color: "#000",
     className: styles.closeIcon
-  })) : null, /*#__PURE__*/React.createElement("iframe", {
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles.articlePreview,
+    ref: articlePreviewRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.articlePreviewInner
+  }, hasTitle ? /*#__PURE__*/React.createElement(Heading, Object.assign({
+    className: classNames([styles.articleTitle])
+  }, title)) : null, hasAuthorName ? /*#__PURE__*/React.createElement(UrbaniaAuthor, {
+    isSmall: true,
+    withoutBackground: true,
+    author: author,
+    shouldLoad: mediaShouldLoad
+  }) : null)), iframeMounted && !iframeLoaded ? /*#__PURE__*/React.createElement("div", {
+    className: styles.spinnerContainer
+  }, /*#__PURE__*/React.createElement(Spinner, {
+    className: styles.spinner
+  })) : null, !iframeEnabled && iframeMounted ? /*#__PURE__*/React.createElement("div", {
+    className: styles.iframeBlocker
+  }) : null, iframeMounted && withIframe ? /*#__PURE__*/React.createElement("iframe", {
+    onLoad: onIframeLoad,
     className: styles.iframe,
     title: title.body,
     src: url || 'about:blank',
-    scrolling: !iframeOpened && !isSafari ? 'no' : 'auto',
     style: {
       width: '100%',
-      height: height,
-      overflow: !iframeOpened ? 'hidden' : 'auto'
+      height: height
     }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.iframeBlocker, _defineProperty({}, styles.active, !iframeInteractionEnabled)]),
-    style: {
-      width: width,
-      height: height * 0.25
-    }
-  }))) : null))));
+  }) : null)) : null))));
 };
 UrbaniaArticleCard.defaultProps = defaultProps;
 UrbaniaArticleCard.propTypes = propTypes;
 
 /* eslint-disable react/jsx-props-no-spreading */
 function UrbaniaCardLoader(props) {
+  var _ref = props || {},
+    _ref$cardCallToAction = _ref.cardCallToAction,
+    cardCallToAction = _ref$cardCallToAction === void 0 ? {} : _ref$cardCallToAction;
   return /*#__PURE__*/React.createElement(UrbaniaLoader, Object.assign({
-    component: UrbaniaArticleCard
+    component: UrbaniaArticleCard,
+    callToAction: cardCallToAction
   }, props));
 }
 
@@ -1139,6 +1217,26 @@ var definitionCard = {
         "value": "Url"
       }]
     })
+  }, {
+    name: 'title',
+    type: 'heading-element',
+    label: defineMessage({
+      id: "N25iDO",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Title"
+      }]
+    })
+  }, {
+    name: 'author',
+    type: 'author-element',
+    label: defineMessage({
+      id: "73hxYw",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Author"
+      }]
+    })
   }, {
     name: 'text',
     type: 'text-element',
@@ -1164,6 +1262,21 @@ var definitionCard = {
         "value": "Background"
       }]
     })
+  }, {
+    name: 'cardCallToAction',
+    type: 'text-element',
+    fieldsProps: {
+      textStyle: {
+        excludedFields: ['highlight', 'link']
+      }
+    },
+    label: defineMessage({
+      id: "eBFxNl",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Call to Action"
+      }]
+    })
   }, {
     name: 'header',
     type: 'header',

package/lib/index.js

@@ -31,14 +31,17 @@ var Layout = require('@micromag/element-layout');
 
 var propTypes$4 = {
   color: PropTypes.string,
+  strokeWidth: PropTypes.number,
   className: PropTypes.string
 };
 var defaultProps$4 = {
   color: 'currentColor',
+  strokeWidth: 3,
   className: null
 };
 var Arrow = function Arrow(_ref) {
   var color = _ref.color,
+    strokeWidth = _ref.strokeWidth,
     className = _ref.className;
   return /*#__PURE__*/React.createElement("svg", {
     version: "1.1",
@@ -57,7 +60,7 @@ var Arrow = function Arrow(_ref) {
     id: "b",
     fill: "none",
     stroke: color,
-    strokeWidth: "3px",
+    strokeWidth: "".concat(strokeWidth, "px"),
     strokeLinejoin: "round",
     strokeLinecap: "round",
     d: "M1.5,10.88L24.26,1.5l22.77,9.38"
@@ -636,9 +639,6 @@ var UrbaniaLoader = function UrbaniaLoader(_ref) {
       })
     };
   }, [article, url, props]);
-
-  // console.log('full', { ...props, ...values });
-
   return /*#__PURE__*/React.createElement(Component, Object.assign({}, props, values, {
     hasArticle: url !== null
   }));
@@ -831,16 +831,18 @@ var definition = {
   }]
 };
 
-var styles = {"container":"micromag-screen-urbania-article-urbania-base-article-card-container","iframe":"micromag-screen-urbania-article-urbania-base-article-card-iframe","close":"micromag-screen-urbania-article-urbania-base-article-card-close","interactiveZone":"micromag-screen-urbania-article-urbania-base-article-card-interactiveZone","empty":"micromag-screen-urbania-article-urbania-base-article-card-empty","iframeContainer":"micromag-screen-urbania-article-urbania-base-article-card-iframeContainer","content":"micromag-screen-urbania-article-urbania-base-article-card-content","disabled":"micromag-screen-urbania-article-urbania-base-article-card-disabled","hidden":"micromag-screen-urbania-article-urbania-base-article-card-hidden","placeholder":"micromag-screen-urbania-article-urbania-base-article-card-placeholder","background":"micromag-screen-urbania-article-urbania-base-article-card-background","layout":"micromag-screen-urbania-article-urbania-base-article-card-layout","text":"micromag-screen-urbania-article-urbania-base-article-card-text","isPlaceholder":"micromag-screen-urbania-article-urbania-base-article-card-isPlaceholder","popupContainer":"micromag-screen-urbania-article-urbania-base-article-card-popupContainer","popupContainerInner":"micromag-screen-urbania-article-urbania-base-article-card-popupContainerInner","opened":"micromag-screen-urbania-article-urbania-base-article-card-opened","pulse":"micromag-screen-urbania-article-urbania-base-article-card-pulse","popIn":"micromag-screen-urbania-article-urbania-base-article-card-popIn","closeIcon":"micromag-screen-urbania-article-urbania-base-article-card-closeIcon","header":"micromag-screen-urbania-article-urbania-base-article-card-header","iframeBlocker":"micromag-screen-urbania-article-urbania-base-article-card-iframeBlocker","active":"micromag-screen-urbania-article-urbania-base-article-card-active"};
+var styles = {"container":"micromag-screen-urbania-article-urbania-base-article-card-container","iframe":"micromag-screen-urbania-article-urbania-base-article-card-iframe","close":"micromag-screen-urbania-article-urbania-base-article-card-close","dragHandle":"micromag-screen-urbania-article-urbania-base-article-card-dragHandle","empty":"micromag-screen-urbania-article-urbania-base-article-card-empty","cardContainer":"micromag-screen-urbania-article-urbania-base-article-card-cardContainer","content":"micromag-screen-urbania-article-urbania-base-article-card-content","disabled":"micromag-screen-urbania-article-urbania-base-article-card-disabled","hidden":"micromag-screen-urbania-article-urbania-base-article-card-hidden","placeholder":"micromag-screen-urbania-article-urbania-base-article-card-placeholder","background":"micromag-screen-urbania-article-urbania-base-article-card-background","layout":"micromag-screen-urbania-article-urbania-base-article-card-layout","text":"micromag-screen-urbania-article-urbania-base-article-card-text","isPlaceholder":"micromag-screen-urbania-article-urbania-base-article-card-isPlaceholder","card":"micromag-screen-urbania-article-urbania-base-article-card-card","callToAction":"micromag-screen-urbania-article-urbania-base-article-card-callToAction","arrow":"micromag-screen-urbania-article-urbania-base-article-card-arrow","ctaText":"micromag-screen-urbania-article-urbania-base-article-card-ctaText","cardInner":"micromag-screen-urbania-article-urbania-base-article-card-cardInner","pulse":"micromag-screen-urbania-article-urbania-base-article-card-pulse","closeIcon":"micromag-screen-urbania-article-urbania-base-article-card-closeIcon","articlePreview":"micromag-screen-urbania-article-urbania-base-article-card-articlePreview","articlePreviewInner":"micromag-screen-urbania-article-urbania-base-article-card-articlePreviewInner","articleTitle":"micromag-screen-urbania-article-urbania-base-article-card-articleTitle","spinnerContainer":"micromag-screen-urbania-article-urbania-base-article-card-spinnerContainer","spinner":"micromag-screen-urbania-article-urbania-base-article-card-spinner","header":"micromag-screen-urbania-article-urbania-base-article-card-header","iframeBlocker":"micromag-screen-urbania-article-urbania-base-article-card-iframeBlocker","active":"micromag-screen-urbania-article-urbania-base-article-card-active","articleOpened":"micromag-screen-urbania-article-urbania-base-article-card-articleOpened"};
 
 var propTypes = {
   hasArticle: PropTypes.bool,
   url: PropTypes.string,
-  title: PropTypes.string,
+  title: core.PropTypes.headingElement,
+  author: core.PropTypes.authorElement,
   text: core.PropTypes.textElement,
   image: core.PropTypes.visualElement,
   header: core.PropTypes.header,
   background: core.PropTypes.backgroundElement,
+  callToAction: core.PropTypes.textElement,
   current: PropTypes.bool,
   active: PropTypes.bool,
   spacing: PropTypes.number,
@@ -850,10 +852,12 @@ var defaultProps = {
   hasArticle: false,
   url: null,
   title: null,
+  author: null,
   text: null,
   image: null,
   header: null,
   background: null,
+  callToAction: null,
   current: true,
   active: true,
   spacing: 20,
@@ -863,15 +867,16 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
   var hasArticle = _ref.hasArticle,
     url = _ref.url,
     title = _ref.title,
+    author = _ref.author,
     text = _ref.text,
     image = _ref.image,
     header = _ref.header,
     background = _ref.background,
+    callToAction = _ref.callToAction,
     current = _ref.current,
     active = _ref.active,
     spacing = _ref.spacing,
     className = _ref.className;
-  var isSafari = navigator.userAgent.match(/safari/i) !== null;
   var finalBackground = background !== null ? background : {
     image: image
   };
@@ -896,55 +901,106 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
     enableInteraction = _useViewerInteraction.enableInteraction,
     disableInteraction = _useViewerInteraction.disableInteraction;
   var _usePlaybackContext = contexts.usePlaybackContext(),
-    muted = _usePlaybackContext.muted;
+    muted = _usePlaybackContext.muted,
+    setControls = _usePlaybackContext.setControls;
   var mediaRef = contexts.usePlaybackMediaRef(current);
+  var _ref3 = author || {},
+    _ref3$name = _ref3.name,
+    authorName = _ref3$name === void 0 ? null : _ref3$name;
   var hasUrl = url !== null && url.length > 0;
   var hasHeader = utils.isHeaderFilled(header);
   var hasText = utils.isTextFilled(text);
-
-  // iframe interaction
+  var hasTitle = utils.isTextFilled(title);
+  var hasAuthorName = utils.isTextFilled(authorName);
+  var hasCta = utils.isTextFilled(callToAction);
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    iframeOpened = _useState2[0],
-    setIframeOpened = _useState2[1];
+    articleOpened = _useState2[0],
+    setArticleOpened = _useState2[1];
   var _useState3 = React.useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    iframeInteractionEnabled = _useState4[0],
-    setIframeInteractionEnabled = _useState4[1];
+    iframeEnabled = _useState4[0],
+    setIframeEnabled = _useState4[1];
   var _useState5 = React.useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    firstInteraction = _useState6[0],
-    setFirstInteraction = _useState6[1];
+    iframeMounted = _useState6[0],
+    setIframeMounted = _useState6[1];
+  var _useState7 = React.useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    iframeLoaded = _useState8[0],
+    setIframeLoaded = _useState8[1];
   var mediaShouldLoad = current || active;
-  var backgroundPlaying = current && (isView || isEdit) && !iframeOpened;
+  var backgroundPlaying = current && (isView || isEdit) && !articleOpened;
+  var withIframe = hasUrl && !isPlaceholder && !isPreview && !isStatic;
+
+  // @TODO: collapsed card the height of articlePreview
+  // const articlePreviewRef = useRef();
+  // const previewCurrent = articlePreviewRef.current || null;
 
-  // iframe animation
-  var hasIframeAnimation = !isEdit && !isPlaceholder && !isPreview && !isStatic && !firstInteraction;
-  var slideInDelay = hasIframeAnimation && isBackgroundVideo && backgroundPlaying;
-  var hasIframeBounce = hasIframeAnimation && current && !iframeOpened;
-  var toggleIframe = React.useCallback(function () {
-    var newIframeOpened = !iframeOpened;
-    setIframeOpened(newIframeOpened);
-    if (newIframeOpened) {
+  // const articlePreviewHeight = useMemo(() => {
+  //     if (previewCurrent !== null) {
+  //         const { height: previewHeight = 0 } = previewCurrent.getBoundingClientRect();
+  //         return previewHeight !== 0 ? previewHeight : 0;
+  //     }
+  //     return 0;
+  // }, [previewCurrent, height]);
+
+  // card animations
+  var withCardAnimation = !isPlaceholder && !isPreview && !isStatic && !iframeMounted;
+  var slideInDelay = withCardAnimation && isBackgroundVideo && backgroundPlaying;
+  var withCardBounce = withCardAnimation && current && !articleOpened;
+  React.useEffect(function () {
+    if (!current) {
+      return function () {};
+    }
+    if (isBackgroundVideo && !articleOpened) {
+      setControls(true);
+    } else {
+      setControls(false);
+    }
+    return function () {
+      if (isBackgroundVideo && !articleOpened) {
+        setControls(false);
+      }
+    };
+  }, [current, setControls, isBackgroundVideo, articleOpened, setControls]);
+  var toggleCard = React.useCallback(function () {
+    var newOpened = !articleOpened;
+    setArticleOpened(newOpened);
+    if (newOpened) {
       disableInteraction();
     } else {
       enableInteraction();
     }
-    setFirstInteraction(true);
-  }, [iframeOpened, setFirstInteraction, setIframeOpened, disableInteraction, enableInteraction]);
-  var bind = react.useGesture({
-    onDrag: function onDrag(_ref3) {
-      var _ref3$movement = _slicedToArray(_ref3.movement, 2),
-        my = _ref3$movement[1];
-      if (!iframeOpened && my < 0 || iframeOpened && my > 0) {
-        toggleIframe();
-      }
-    },
-    onWheel: function onWheel(_ref4) {
+    setIframeMounted(true);
+  }, [articleOpened, setIframeMounted, setArticleOpened, disableInteraction, enableInteraction]);
+  var onIframeLoad = React.useCallback(function () {
+    setIframeLoaded(true);
+  }, [setIframeLoaded]);
+  React.useEffect(function () {
+    if (!iframeMounted || iframeLoaded) {
+      return function () {};
+    }
+    var timeout = setTimeout(function () {
+      setIframeLoaded(true);
+    }, 2000);
+    return function () {
+      clearTimeout(timeout);
+    };
+  }, [iframeMounted, iframeLoaded]);
+  var bindGesture = react.useGesture({
+    onDrag: function onDrag(_ref4) {
       var _ref4$movement = _slicedToArray(_ref4.movement, 2),
         my = _ref4$movement[1];
-      if (!iframeOpened && my > 0 || iframeOpened && my < 0) {
-        toggleIframe();
+      if (!articleOpened && my < 0 || articleOpened && my > 0) {
+        toggleCard();
+      }
+    },
+    onWheel: function onWheel(_ref5) {
+      var _ref5$movement = _slicedToArray(_ref5.movement, 2),
+        my = _ref5$movement[1];
+      if (!articleOpened && my > 0 || articleOpened && my < 0) {
+        toggleCard();
       }
     }
   }, {
@@ -957,45 +1013,51 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
       axis: 'y'
     }
   });
+  var _useResizeObserver = hooks.useResizeObserver({
+      disabled: !articleOpened
+    }),
+    articlePreviewRef = _useResizeObserver.ref,
+    _useResizeObserver$en = _useResizeObserver.entry.contentRect,
+    articlePreviewContentRect = _useResizeObserver$en === void 0 ? null : _useResizeObserver$en;
+  var _ref6 = articlePreviewContentRect || {},
+    _ref6$height = _ref6.height,
+    articlePreviewHeight = _ref6$height === void 0 ? 0 : _ref6$height;
   var y = 100;
-  if (current && iframeOpened) {
+  if (current && articleOpened) {
     y = 0;
-  } else if (current) {
-    y = 75;
+  } else if (current || isPreview) {
+    y = 100 - Math.max(articlePreviewHeight / height * 100, 25);
   }
   var springStyle = web.useSpring({
     from: {
-      y: 100
+      y: isPreview ? y : 100
     },
     to: {
       y: y
     },
     onStart: function onStart() {
-      setIframeInteractionEnabled(false);
+      setIframeEnabled(false);
     },
     onResolve: function onResolve() {
-      if (iframeOpened) {
-        setIframeInteractionEnabled(true);
+      if (articleOpened) {
+        setIframeEnabled(true);
       }
     },
     delay: slideInDelay ? 1500 : 0,
     config: {
-      // easing: easings.easeInOutElastic,
       easing: web.easings.easeInOutSine,
       duration: y === 100 ? 1000 : 400
     }
   });
   React.useEffect(function () {
     if (!current) {
-      setIframeOpened(false);
-      setFirstInteraction(false);
+      setArticleOpened(false);
+      setIframeMounted(false);
+      setIframeLoaded(false);
     }
   }, [current]);
-
-  // console.log('load 1-2', mediaShouldLoad, finalBackground);
-
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, _defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles.isCurrent, current), styles.isPlaceholder, isPlaceholder)]),
+    className: classNames([styles.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles.articleOpened, articleOpened), styles.isCurrent, current), styles.isPlaceholder, isPlaceholder)]),
     "data-screen-ready": isStatic || isCapture
   }, /*#__PURE__*/React.createElement(Background, {
     className: styles.background,
@@ -1041,7 +1103,7 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
   }, hasText ? /*#__PURE__*/React.createElement(Text, Object.assign({
     className: styles.text
   }, text)) : null)), /*#__PURE__*/React.createElement(Container, {
-    className: classNames([styles.iframeContainer, _defineProperty({}, styles.isPlaceholder, isPlaceholder)])
+    className: classNames([styles.cardContainer, _defineProperty({}, styles.isPlaceholder, isPlaceholder)])
   }, /*#__PURE__*/React.createElement(components.ScreenElement, {
     placeholderProps: {
       className: styles.placeholder
@@ -1055,59 +1117,75 @@ var UrbaniaArticleCard = function UrbaniaArticleCard(_ref) {
     }),
     emptyClassName: styles.empty,
     isEmpty: !hasUrl || !hasArticle
-  }, (!isPreview || !isPlaceholder) && hasArticle ? /*#__PURE__*/React.createElement(web.animated.div, {
-    className: styles.popupContainer,
+  }, !isPlaceholder && hasArticle ? /*#__PURE__*/React.createElement(web.animated.div, {
+    className: styles.card,
     style: {
       height: height,
       width: width,
-      transform: springStyle.y.to(function (value) {
+      transform: !isPreview ? springStyle.y.to(function (value) {
         return "translateY(".concat(value, "%");
-      })
-      // top: iframeOpened ? 0 : '75%',
-      // ...springStyle,
+      }) : 'translateY(75%)'
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.popupContainerInner, _defineProperty(_defineProperty({}, styles.opened, iframeOpened), styles.pulse, hasIframeBounce)])
   }, /*#__PURE__*/React.createElement("button", Object.assign({
     type: "button",
-    style: {
-      height: iframeInteractionEnabled ? '100px' : height,
-      width: width,
-      zIndex: 5
-    },
-    onClick: toggleIframe,
-    className: styles.interactiveZone
-  }, current ? bind() : null)), iframeInteractionEnabled ? /*#__PURE__*/React.createElement(Button, {
+    onClick: toggleCard,
+    className: styles.dragHandle
+  }, current ? bindGesture() : null)), /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles.cardInner, _defineProperty({}, styles.pulse, withCardBounce)])
+  }, hasCta ? /*#__PURE__*/React.createElement("div", {
+    className: styles.callToAction
+  }, /*#__PURE__*/React.createElement(Arrow, {
+    strokeWidth: 1,
+    className: styles.arrow
+  }), /*#__PURE__*/React.createElement(Text, Object.assign({
+    className: styles.ctaText
+  }, callToAction))) : null, /*#__PURE__*/React.createElement(Button, {
     className: styles.close,
-    onClick: toggleIframe
+    disabled: !articleOpened,
+    onClick: toggleCard
   }, /*#__PURE__*/React.createElement(components.Close, {
     color: "#000",
     className: styles.closeIcon
-  })) : null, /*#__PURE__*/React.createElement("iframe", {
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles.articlePreview,
+    ref: articlePreviewRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.articlePreviewInner
+  }, hasTitle ? /*#__PURE__*/React.createElement(Heading, Object.assign({
+    className: classNames([styles.articleTitle])
+  }, title)) : null, hasAuthorName ? /*#__PURE__*/React.createElement(UrbaniaAuthor, {
+    isSmall: true,
+    withoutBackground: true,
+    author: author,
+    shouldLoad: mediaShouldLoad
+  }) : null)), iframeMounted && !iframeLoaded ? /*#__PURE__*/React.createElement("div", {
+    className: styles.spinnerContainer
+  }, /*#__PURE__*/React.createElement(components.Spinner, {
+    className: styles.spinner
+  })) : null, !iframeEnabled && iframeMounted ? /*#__PURE__*/React.createElement("div", {
+    className: styles.iframeBlocker
+  }) : null, iframeMounted && withIframe ? /*#__PURE__*/React.createElement("iframe", {
+    onLoad: onIframeLoad,
     className: styles.iframe,
     title: title.body,
     src: url || 'about:blank',
-    scrolling: !iframeOpened && !isSafari ? 'no' : 'auto',
     style: {
       width: '100%',
-      height: height,
-      overflow: !iframeOpened ? 'hidden' : 'auto'
+      height: height
     }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.iframeBlocker, _defineProperty({}, styles.active, !iframeInteractionEnabled)]),
-    style: {
-      width: width,
-      height: height * 0.25
-    }
-  }))) : null))));
+  }) : null)) : null))));
 };
 UrbaniaArticleCard.defaultProps = defaultProps;
 UrbaniaArticleCard.propTypes = propTypes;
 
 /* eslint-disable react/jsx-props-no-spreading */
 function UrbaniaCardLoader(props) {
+  var _ref = props || {},
+    _ref$cardCallToAction = _ref.cardCallToAction,
+    cardCallToAction = _ref$cardCallToAction === void 0 ? {} : _ref$cardCallToAction;
   return /*#__PURE__*/React.createElement(UrbaniaLoader, Object.assign({
-    component: UrbaniaArticleCard
+    component: UrbaniaArticleCard,
+    callToAction: cardCallToAction
   }, props));
 }
 
@@ -1143,6 +1221,26 @@ var definitionCard = {
         "value": "Url"
       }]
     })
+  }, {
+    name: 'title',
+    type: 'heading-element',
+    label: reactIntl.defineMessage({
+      id: "N25iDO",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Title"
+      }]
+    })
+  }, {
+    name: 'author',
+    type: 'author-element',
+    label: reactIntl.defineMessage({
+      id: "73hxYw",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Author"
+      }]
+    })
   }, {
     name: 'text',
     type: 'text-element',
@@ -1168,6 +1266,21 @@ var definitionCard = {
         "value": "Background"
       }]
     })
+  }, {
+    name: 'cardCallToAction',
+    type: 'text-element',
+    fieldsProps: {
+      textStyle: {
+        excludedFields: ['highlight', 'link']
+      }
+    },
+    label: reactIntl.defineMessage({
+      id: "eBFxNl",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Call to Action"
+      }]
+    })
   }, {
     name: 'header',
     type: 'header',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-urbania-article",
-    "version": "0.3.460",
+    "version": "0.3.465",
     "private": false,
     "description": "",
     "keywords": [
@@ -61,21 +61,21 @@
         "@babel/runtime": "^7.13.10",
         "@folklore/fetch": "^0.1.17",
         "@folklore/size": "^0.1.20",
-        "@micromag/core": "^0.3.460",
-        "@micromag/element-background": "^0.3.460",
-        "@micromag/element-button": "^0.3.460",
-        "@micromag/element-closed-captions": "^0.3.460",
-        "@micromag/element-container": "^0.3.460",
-        "@micromag/element-footer": "^0.3.460",
-        "@micromag/element-header": "^0.3.460",
-        "@micromag/element-heading": "^0.3.460",
-        "@micromag/element-image": "^0.3.460",
-        "@micromag/element-layout": "^0.3.460",
-        "@micromag/element-text": "^0.3.460",
-        "@micromag/element-urbania-author": "^0.3.460",
-        "@micromag/element-video": "^0.3.460",
-        "@micromag/element-visual": "^0.3.460",
-        "@micromag/transforms": "^0.3.460",
+        "@micromag/core": "^0.3.465",
+        "@micromag/element-background": "^0.3.465",
+        "@micromag/element-button": "^0.3.465",
+        "@micromag/element-closed-captions": "^0.3.465",
+        "@micromag/element-container": "^0.3.465",
+        "@micromag/element-footer": "^0.3.465",
+        "@micromag/element-header": "^0.3.465",
+        "@micromag/element-heading": "^0.3.465",
+        "@micromag/element-image": "^0.3.465",
+        "@micromag/element-layout": "^0.3.465",
+        "@micromag/element-text": "^0.3.465",
+        "@micromag/element-urbania-author": "^0.3.465",
+        "@micromag/element-video": "^0.3.465",
+        "@micromag/element-visual": "^0.3.465",
+        "@micromag/transforms": "^0.3.465",
         "@react-spring/web": "^9.6.1",
         "@use-gesture/react": "^10.3.0",
         "classnames": "^2.2.6",
@@ -88,5 +88,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "7e5a6ed3d80be59cdd74716781b467be88a4ccc6"
+    "gitHead": "5595546150eb35a0d670e00d4259fd9a43256ed6"
 }