supercast-plan

by ryanbrunner

HTML

<head>
  <!-- This JS must be included on every page using Supercast embeds or JS. 
       It's recommended you include it within the HEAD element -->
  <script src="https://supercast.tech/js/embed.js"></script>
</head>

<body>
  <div style="width: 300px;">
    <supercast-plan code="2fa370f0-2670-4fe3-bc4c-27d8def3e600"></supercast-plan>
  </div>
</body>

CSS

/* supercast-plan can be styled like any other element - this allows you to
   set fonts, sizing, etc. */
supercast-plan {
  font-family: Helvetica, Arial, sans-serif;
}

/* In addition, you can style parts of a supercast-plan element using CSS. 
   A complete list of styleable parts can be found at 
   https://supercast.readme.io/reference/supercast-plan-1 */

supercast-plan::part(image) {
  filter: saturate(50%)
}

supercast-plan::part(button) {
  background-color: #e85e2b;
}

supercast-plan::part(container) {
  border: solid 2px #e85e2b;
  display: flex;

}

supercast-plan::part(title) {
  text-transform: uppercase;
  color: #585b5d;
  font-size: 14px;
}

supercast-plan::part(description) {
  color: #585b5d;
  font-size: 12px;
}