Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <main>
  
  <h2>Cards Primary</h2>
  <div class="card-group">
    <div class="card card-primary text-center">
      <img class="card-img-top" src="https://static3.avast.com/10001215/web/i/index2/for-home.jpg" alt="Card image cap">
      <div class="card-body">
        <div class="badge badge-primary badge-sm">FOR HOME</div>
        <div class="card-title">Personal online protection everywhere you go</div>
        <p class="card-text">We protect your privacy and keep you safe online with Premium Security and our Virtual Private Network (VPN) that safeguards your personal data.</p>
      </div>
      <div class="card-footer">
        <a href="#" class="btn btn-outline-secondary btn-icon-right">
          <span>HOME SECURITY
            <img src="https://static3.avast.com/1/web/i/v2/components/arrow-m-right-orange.png" height="24">
          </span>
        </a>
      </div>
    </div>
    <div class="card card-primary text-center">
      <img class="card-img-top" src="https://static3.avast.com/10001215/web/i/index2/for-partners.jpg" alt="Card image cap">
      <div class="card-body">
        <div class="badge badge-primary badge-sm">FOR BUSINESS</div>
        <div class="card-title">Simple solutions for business’s biggest security problems</div>
        <p class="card-text">We deliver complete endpoint and network security solutions designed for small and midsize businesses & IT service providers.</p>
      </div>
      <div class="card-footer">
        <a href="#" class="btn btn-outline-secondary btn-icon-right">
          <span>BUSINESS SECURITY
            <img src="https://static3.avast.com/1/web/i/v2/components/arrow-m-right-orange.png" height="24">
          </span>
        </a>
      </div>
    </div>
    <div class="card card-primary text-center">
      <img class="card-img-top" src="https://static3.avast.com/10001215/web/i/index2/for-business.jpg" alt="Card image cap">
      <div class="card-body">
        <div class="badge badge-primary badge-sm">FOR PARTNERS</div>
        <div class="card-title">Protecting the customers of global operators</div>
        <p class="card-text">We partner with the world’s leading mobile and broadband network operators to offer security, privacy, and digital parenting solutions.</p>
      </div>
      <div class="card-footer">
        <a href="#" class="btn btn-outline-secondary btn-icon-right">
          <span>PARTNER SECURITY
            <img src="https://static3.avast.com/1/web/i/v2/components/arrow-m-right-orange.png" height="24">
          </span>
        </a>
      </div>
    </div>
  </div>
  
  <h2>Cards Secondary</h2>
  <div class="card-deck">
    <div class="card card-secondary">
      <img class="card-img-top" src="https://via.placeholder.com/350x180.png?text=img" alt="Card image cap">
      <div class="card-body">
        <div class="card-title">How to Choose the Best Password Manager</div>
        <p class="card-text">Learn everything you need to know about the security features and usability of password managers…</p>
      </div>
      <div class="card-footer text-right">
        <a href="#" class="btn btn-sm btn-link btn-icon-right">
          <span>LEARN MORE
            <img src="https://web-static.ff.int.avast.com/static3.avast.com/1/web/i/v2/components/arrow-s-right-orange.png" height="16">
          </span></a>
      </div>
    </div>
    <div class="card card-secondary">
      <img class="card-img-top" src="https://via.placeholder.com/350x180.png?text=img" alt="Card image cap">
      <div class="card-body">
        <div class="card-title">How to Choose the Best Password Manager</div>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer text-right">
        <a href="#" class="btn btn-sm btn-link btn-icon-right">
          <span>LEARN MORE
            <img src="https://web-static.ff.int.avast.com/static3.avast.com/1/web/i/v2/components/arrow-s-right-orange.png" height="16">
          </span></a>
      </div>
    </div>
    <div class="card card-secondary">
      <img class="card-img-top" src="https://via.placeholder.com/350x180.png?text=img" alt="Card image cap">
      <div class="card-body">
        <div class="card-title">How to Choose the Best Password Manager</div>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      </div>
      <div class="card-footer text-right">
        <a href="#" class="btn btn-sm btn-link btn-icon-right">
          <span>LEARN MORE
            <img src="https://web-static.ff.int.avast.com/static3.avast.com/1/web/i/v2/components/arrow-s-right-orange.png" height="16">
          </span></a>
      </div>
    </div>
    <div class="card card-secondary">
      <img class="card-img-top" src="https://via.placeholder.com/350x180.png?text=img" alt="Card image cap">
      <div class="card-body">
        <div class="card-title">How to Choose the Best Password Manager</div>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      </div>
      <div class="card-footer text-right">
        <a href="#" class="btn btn-sm btn-link btn-icon-right">
          <span>LEARN MORE
            <img src="https://web-static.ff.int.avast.com/static3.avast.com/1/web/i/v2/components/arrow-s-right-orange.png" height="16">
          </span></a>
      </div>
    </div>
  </div>
  
  <h2>Cards Secondary without body</h2>
  <div class="card-deck">
    <div class="card card-secondary">
      <img class="card-img-top" src="https://via.placeholder.com/350x180.png?text=img" alt="Card image cap">
      <div class="card-body">
        <div class="card-title">How to Choose the Best Password Manager</div>
      </div>
      <div class="card-footer text-right">
        <a href="#" class="btn btn-sm btn-link btn-icon-right">
          <span>LEARN MORE
            <img src="https://web-static.ff.int.avast.com/static3.avast.com/1/web/i/v2/components/arrow-s-right-orange.png" height="16">
          </span></a>
      </div>
    </div>
    <div class="card card-secondary">
      <img class="card-img-top" src="https://via.placeholder.com/350x180.png?text=img" alt="Card image cap">
      <div class="card-body">
        <div class="card-title">How to Choose the Best Password Manager</div>
      </div>
      <div class="card-footer text-right">
        <a href="#" class="btn btn-sm btn-link btn-icon-right">
          <span>LEARN MORE
            <img src="https://web-static.ff.int.avast.com/static3.avast.com/1/web/i/v2/components/arrow-s-right-orange.png" height="16">
          </span></a>
      </div>
    </div>
    <div class="card card-secondary">
      <img class="card-img-top" src="https://via.placeholder.com/350x180.png?text=img" alt="Card image cap">
      <div class="card-body">
        <div class="card-title">How to Choose the Best Password Manager</div>
      </div>
      <div class="card-footer text-right">
        <a href="#" class="btn btn-sm btn-link btn-icon-right">
          <span>LEARN MORE
            <img src="https://web-static.ff.int.avast.com/static3.avast.com/1/web/i/v2/components/arrow-s-right-orange.png" height="16">
          </span></a>
      </div>
    </div>
    <div class="card card-secondary">
      <img class="card-img-top" src="https://via.placeholder.com/350x180.png?text=img" alt="Card image cap">
      <div class="card-body">
        <div class="card-title">How to Choose the Best Password Manager</div>
      </div>
      <div class="card-footer text-right">
        <a href="#" class="btn btn-sm btn-link btn-icon-right">
          <span>LEARN MORE
            <img src="https://web-static.ff.int.avast.com/static3.avast.com/1/web/i/v2/components/arrow-s-right-orange.png" height="16">
          </span></a>
      </div>
    </div>
  </div>
  
  <div class="awards-container">
    <h2>Cards with Awards</h2>
    <div class="card-deck">
      <div class="card card-awards text-center">
        <div class="card-img-top">
          <img src="https://static3.avast.com/10001215/web/i/awards-v12/white/awards-cnet.png" alt="Card image cap">
        </div>
        <div class="card-body">
          <div class="card-title">The most downloaded software</div>
        </div>
        <div class="card-footer">
          <a href="#" class="btn btn-sm btn-link-light btn-icon-right">
            <span>LEARN MORE
              <img src="https://web-static.ff.int.avast.com/static3.avast.com/1/web/i/v2/components/arrow-s-right-orange.png" height="16">
            </span></a>
        </div>
      </div>
      <div class="card card-awards text-center">
        <div class="card-img-top">
          <img src="https://static3.avast.com/10001215/web/i/awards-v12/logo-pcmag-2.png" alt="Card image cap">
        </div>
        <div class="card-body">
          <div class="card-title">Best Free Anti-malware</div>
        </div>
        <div class="card-footer">
          <a href="#" class="btn btn-sm btn-link-light btn-icon-right">
            <span>LEARN MORE
              <img src="https://web-static.ff.int.avast.com/static3.avast.com/1/web/i/v2/components/arrow-s-right-orange.png" height="16">
            </span></a>
        </div>
      </div>
      <div class="card card-awards text-center">
        <div class="card-img-top">
          <img src="https://static3.avast.com/10001215/web/i/awards-v12/white/awards-av-comparatives.png" alt="Card image cap">
        </div>
        <div class="card-body">
          <div class="card-title">Antivirus with the lowest impact on PC performance</div>
        </div>
        <div class="card-footer">
          <a href="#" class="btn btn-sm btn-link-light btn-icon-right">
            <span>LEARN MORE
              <img src="https://web-static.ff.int.avast.com/static3.avast.com/1/web/i/v2/components/arrow-s-right-orange.png" height="16">
            </span></a>
        </div>
      </div>
      <div class="card card-awards text-center">
        <div class="card-img-top">
          <img src="https://static3.avast.com/10001215/web/i/awards-v12/white/awards-softpedia.png" alt="Card image cap">
        </div>
        <div class="card-body">
          <div class="card-title">Official download partner</div>
        </div>
        <div class="card-footer">
          <a href="#" class="btn btn-sm btn-link-light btn-icon-right">
            <span>LEARN MORE
              <img src="https://web-static.ff.int.avast.com/static3.avast.com/1/web/i/v2/components/arrow-s-right-orange.png" height="16">
            </span></a>
        </div>
      </div>
    </div>
  </div>
  
  
  <h2>Accordion</h2>
  <div class="accordion-container">
    <div class="accordion">
      <div class="card card-accordion">
        <div class="card-header" id="headingOne">
          <span>What are the system requirements for Avast Premium Security?</span>
          <a href="#collapseOne" class="icon-btn" data-toggle="collapse"></a>
        </div>

        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
          <div class="card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
          </div>
        </div>
      </div>
      <div class="card card-accordion">
        <div class="card-header" id="headingTwo">
          <span>What's the difference between Avast Premium Security (Single-Device) and Avast Premium Security (Multi-Device) subscriptions?</span>
          <a href="#collapseTwo" class="icon-btn" data-toggle="collapse"></a>
        </div>
        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
          <div class="card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
          </div>
        </div>
      </div>
      <div class="card card-accordion">
        <div class="card-header" id="headingThree">
          <span>Can I change the 10 devices activated with my Avast Premium Security (Multi-Device) subscription?</span>
          <a href="#collapseThree" class="icon-btn" data-toggle="collapse"></a>
        </div>
        <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
          <div class="card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
          </div>
        </div>
      </div>
      <div class="card card-accordion">
        <div class="card-header" id="headingFour">
          <span>Is it necessary to uninstall my previous Avast Antivirus version before upgrading to Avast Premium Security on my PC?</span>
          <a href="#collapseFour" class="icon-btn" data-toggle="collapse"></a>
        </div>
        <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordion">
          <div class="card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
          </div>
        </div>
      </div>
    </div>
  </div>
</main>
              
            
!

CSS

              
                /* styles reset */
.card {
  border:0;
}


/* card group aka PRIMARY */
.card-group .card-primary:hover {
  box-shadow: 0 40px 60px -20px rgba(12, 5, 62, 0.15);
  z-index: 100;
}
.card-group .card-primary:hover .card-title{
  color: #4e22d0;
}
.card-group .card-primary .card-img-top{
  width:264px;
  height:264px;
  margin: 80px auto 32px;
}
.card-group .card-primary .card-body > .badge {
  margin-bottom: 24px;
}
.card-group .card-primary .card-body {
  padding: 0 32px;
}
.card-group .card-primary .card-title {
  color: #261c6a;
  font-size: 26px;
  line-height: 1.54;
  font-weight: 900;
  margin-bottom: 24px;
}
.card-group .card-primary .card-text {
  color: #261c6a;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
}
.card-group .card-primary .card-footer {
  padding: 48px 0 56px;
  background: transparent;
  border:0;
}


/* card deck aka SECONDARY */

.card-deck .card-secondary {
  padding: 32px 32px 0;
  margin: 16px;
  border-radius: 0;
}
.card-deck .card-secondary:hover {
  box-shadow: 0 40px 60px -20px rgba(12, 5, 62, 0.15);
}
.card-deck .card-secondary:hover .card-title{
  color: #4e22d0;
}
.card-deck .card-secondary .card-body {
  padding: 0;
}
.card-deck .card-secondary .card-img-top{
  margin-bottom: 24px;
  border-radius: 0px;
}
.card-deck .card-secondary .card-title {
  color: #261c6a;
  font-size: 20px;
  line-height: 1.6;
  font-weight: 700;
  margin-bottom: 16px;
}
.card-deck .card-secondary .card-text {
  color: #261c6a;
  font-size: 14px;
  line-height: 1.71;
  font-weight: 400;
  margin-bottom: 16px;
}
.card-deck .card-secondary .card-footer {
  padding: 9px 0 25px;
  background: transparent;
  border:0;
}
.card-deck .card-secondary .card-footer .btn{
  margin-right: -24px;
}


/* card AWARDS */
.awards-container {
  background-image: linear-gradient(to bottom, #0c053e 2%, #261c6a);
  margin: 0 -30px;
  padding: 30px;
}
.awards-container h2 {
  color: #fff;
}
.card-deck > .card-awards {
  padding: 32px 32px 0;
  margin: 16px;
  border-radius: 0;
  background: transparent;
}
.card-deck .card-awards:hover {
  box-shadow: 0 40px 60px -20px rgba(8, 4, 43, 0.8);
  background-color: #261c6a;
}
.card-deck .card-awards:hover .card-footer .btn{
  visibility: visible;
}

.card-deck > .card-awards .card-body {
  padding: 0;
}
.card-deck > .card-awards .card-img-top{
  margin-bottom: 24px;
  border-radius: 0px;
  height: 80px;
  display: flex; justify-content: center;
}
.card-deck .card-awards .card-img-top img {
  margin: auto;
}
.card-deck .card-awards .card-title {
  color: #fff;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  margin-bottom: 3px;
}
.card-deck .card-awards .card-footer {
  padding: 9px 0 13px;
  border:0;
}
.card-deck .card-awards .card-footer .btn{
  color: #fff;
  visibility: hidden;
}

/* cards as ACCORDION */
.accordion-container{
  margin: 50px 0;
}
.accordion {
  margin: 24px 100px;
  box-shadow: 0 40px 60px -20px rgba(12, 5, 62, 0.15);
  border: solid 1px #e9e8f3;
}
.accordion .card {
  border-radius: 0;
  margin:0;
}

.accordion .card:first-child {
  border-bottom: solid 1px #e9e8f3;
}
.accordion .card:not(:first-of-type):not(:last-of-type){
  border-bottom: solid 1px #e9e8f3;
}


.accordion .card-header {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.6;
  background-color: #fff;
  border-radius: 0;
  color: #261c6a;
  padding: 36px 32px;
  border-bottom-width: 0;
}
.accordion .card-header:hover {
  color: #4e22d0;
}
.accordion .card:hover {
  z-index: 99999;
  box-shadow: 0 20px 40px -20px rgba(12, 5, 62, 0.4);
}
.accordion .card-header img {
  padding-right: 16px;
}
.accordion .card-header span {
  display: inline-block;
  width: calc(100% - 60px);
}
.accordion .card-header + .list-group .list-group-item:first-child {
  border-top: 1px;
}
.accordion .icon-btn {
  float: right;
  width: 48px;
  height: 48px;
  padding: 0;
  background: #fff url('https://web-static.ff.int.avast.com/static3.avast.com/1/web/i/v2/components/plus-s-plum.png') no-repeat 50% 50%;
  box-shadow: 0 12px 15px -4px rgba(12, 5, 62, 0.12);
  border: solid 1.2px #d4d2e6;
  border-radius: 24px;
  /* -webkit-transition: background .3s;
  transition: background .3s; */
}
.accordion .icon-btn:hover {
  background: #4e22d0 url('https://web-static.ff.int.avast.com/static3.avast.com/1/web/i/v2/components/plus-s-white.png') no-repeat 50% 50%;
  box-shadow: 0 12px 15px -4px rgba(78, 34, 208, 0.3), 0 12px 15px -4px rgba(12, 5, 62, 0.15);
}
.accordion .icon-btn:active {
  background: #261c6a url('https://web-static.ff.int.avast.com/static3.avast.com/1/web/i/v2/components/plus-s-white.png') no-repeat 50% 50%;
  box-shadow: 0 12px 15px -4px rgba(78, 34, 208, 0.3), 0 12px 15px -4px rgba(12, 5, 62, 0.15);
}
.accordion .card-body {
  padding: 0 32px 40px;
}


/* PAGE LAYOUT */
main{
  padding:0 20px;
  max-width:1361px;
  margin:0 auto;
}
h2 {
  margin-top: 40px;
}
              
            
!

JS

              
                
              
            
!
999px

Console