​
Contact us

Unique product page elements

Product cards

The Card components on the product page differ from the standard Cards.

Main heading and sub heading differ from standard headings. Border, button, and bullet color are set in the product colors.

  1. Product name

    Product heading

    Call-to-action button

    More information link

    USPs

    • USP one.

    • USP two.

    • USP three.

    • USP four.

  2. Product name

    Product heading

    Call-to-action button

    More information link

    USPs

    • USP one.

    • USP two.

    • USP three.

    • USP four.

    • USP five.

    • USP six.

HTML code snippet

<section class="pilars"> <ol> <li class="pilar product-semi--local"> <section class="product"> <div class="product-banner"> <h2><img src="../img/semi-product-local-2.svg" alt=""> Product name</h2> </div> <section> <h3>Product heading</h3> <a href="products-local-signup.html" class="button button--cta">Call-to-action button</a> <p class="paragraph--centered link-muted"><small><a href="#">More information link</a></small></p> <p class="paragraph--centered">USPs</p> <ul class="list-bullet bullet-rtp-green"> <li><p>USP one.</p></li> <li><p>USP two.</p></li> <li><p>USP three.</p></li> <li><p>USP four.</p></li> </ul> </section> </section> </li> <li class="pilar product-semi--world"> <section class="product"> <div class="product-banner"> <h2><img src="../img/semi-product-world-2.svg" alt=""> Product name</h2> </div> <section> <h3>Product heading</h3> <a href="products-world-signup.html" class="button button--cta">Call-to-action button</a> <p class="paragraph--centered link-muted"><small><a href="#">More information link</a></small></p> <p class="paragraph--centered">USPs</p> <ul class="list-bullet bullet-rtp-olive"> <li><p>USP one.</p></li> <li><p>USP two.</p></li> <li><p>USP three.</p></li> <li><p>USP four.</p></li> <li><p>USP five.</p></li> <li><p>USP six.</p></li> </ul> </section> </section> </li> </ol> </section>