---
tags: cards
title: Banner cards
description: "Banner card components for promotional content, announcements, and highlighted information areas."
---

.banner-card.welcome
  %img.welcome-image{src:"/assets/images/logo-testio/testio_symbol_purpleteal_square.svg"}
  .card-content
    %h3.card-title Welcome to Test IO!
    %p We are glad to have you here. To get started earning money with us please complete some onboarding modules. Also check out this Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    .card-actions
      %a.btn.btn-inverted{href:""} Dismiss
.banner-card
  .card-chart
    .piechart-example
    .chart-value 0/3
    .chart-label madatory modules completed
  .card-content
    %h5.card-title Mandatory onboarding modules available
    %p You received mandatory onboarding modules which are required for receiving customer tasks and test invitations. Please complete them soon.
    .card-actions
      %a.btn.btn-primary{href:""} Go to learning portal
.banner-card
  .card-image
    %img{src:"/assets/images/tester-badges/testIO-testerbadge-cybersecurity.svg"}
  .card-content
    %h5.card-title Mandatory cybersecurity course
    %p.mb-xxs You received the mandatory onboarding course Cybersecurity which is required for receiving customer tasks and test invitations.
    .text-with-icon.mb-xxs
      .icon.icon-exclamation-circle
      All approved testers must complete this course to achieve bronze level and above.
    .text-with-icon
      .icon.icon-exclamation-circle
      All approved testers will have a one-month transition period to complete it. If they do not pass, even Diamond testers will be downgraded to copper level.
    .card-actions
      %a.btn.btn-primary{href:""} Go to course
      %a.btn.btn-secondary{href:""} Remind me later
.banner-card
  .card-image
    .icon-xxl.icon-bug-sad-xl.text-danger
  .card-content
    %h5.card-title Level downgrade
    %p Unfortunatly you didn’t finish the onboarding course Cybersecurity in the required timeframe. As a result you have been downgraded to level 2.
    .card-actions
      %a.btn.btn-primary{href:""} Go to course
      %a.btn.btn-secondary{href:""} Remind me later