FTSE Russell Styleguide

Video Card 

<div class="video__card">
    <div class="video__card__header">
        <script src="//fast.wistia.com/embed/medias/j38ihh83m5.jsonp" async></script>
        <script src="//fast.wistia.com/assets/external/E-v1.js" async></script>
        <div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;">
            <div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;">
                <div class="wistia_embed wistia_async_j38ihh83m5 seo=false videoFoam=true" style="height:100%;width:100%">&nbsp;</div>
            </div>
        </div>
    </div>

    <div class="video__card__content">
        <h4 class="video__card__title text--center">Introduction to ETFs </h4>
        <p class="video__card__description"> An introduction to Exchange Traded Funds (ETFs) with experts from London Stock Exchange, ETF Strategy and Twenty 20 Investments. Featuring Lida Eslami, Simon Smith and Allan Lane. </p>
    </div>

</div>
 
<div class="video__card">
  <div class="video__card__header">
    {{ videoSrc }}
  </div>
  {% if title %}
  <div class="video__card__content">
    <h4 class="video__card__title text--center">{{ title }} </h4>
    <p class="video__card__description"> {{ description }} </p>
    </div>
  {% endif %}
</div>
 
{
  "title": "Introduction to ETFs",
  "description": "An introduction to Exchange Traded Funds (ETFs) with experts from London Stock Exchange, ETF Strategy and Twenty 20 Investments. Featuring Lida Eslami, Simon Smith and Allan Lane.",
  "videoSrc": "<script src=\"//fast.wistia.com/embed/medias/j38ihh83m5.jsonp\" async></script> <script src=\"//fast.wistia.com/assets/external/E-v1.js\" async></script> <div class=\"wistia_responsive_padding\" style=\"padding:56.25% 0 0 0;position:relative;\"> <div class=\"wistia_responsive_wrapper\" style=\"height:100%;left:0;position:absolute;top:0;width:100%;\"> <div class=\"wistia_embed wistia_async_j38ihh83m5 seo=false videoFoam=true\" style=\"height:100%;width:100%\">&nbsp;</div> </div> </div>"
}
  • Content: 
    .video__card {
  background-color: $white;
  border: $border-width-thin solid $gray-lighter;
  box-shadow: $card-drop-shaddow;
  grid-template-rows: auto 65px;
  margin: 0;

  &__header {
    position: relative;
  }

  &__content {
    margin: $space-xxl $space-lg;
  }

  &__title {
    margin-bottom: $space-md;
    color: $primary-light;
    font-size: $font-size-lg;
  }


  &__description {
    color: $gray-light;
    line-height: $line-height;
    padding-bottom: $space-lg;
  }

}
  • URL: /components/raw/video_card/_video_card.scss
  • Filesystem Path: src/components/molecules/cards/video_card/_video_card.scss
  • Size: 488 Bytes

There are no notes for this item.