Card Component - Replay UI

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure repellendus non aperiam rem incidunt, atque nihil odio molestias eveniet consectetur.

Card Link

Component Details

Card is a versatile element that groups related information into a container with a consistent layout.


        <div class="c-card">
          <div class="c-card__media">
            <img src="https://picsum.photos/id/124/350/200" alt="card image"/>
          </div>
          
          <div class="c-card__description">
            <h3 class="c-card__title">Card Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure repellendus non aperiam rem incidunt, atque nihil odio molestias eveniet consectetur.</p>
            <a href="#" class="c-card__cta">Card Link</a>
          </div>        
        </div>


        .c-card {
          width: 350px;
          background-color: #fff;
          color: #1a202c;
          border-radius: 5px;
        }
        
        .c-card__media img {
          width: 100%;
          height: auto;
          border-radius: 5px 5px 0 0;
        }
        
        .c-card__description {
          padding: 20px;
        }
        
        .c-card__description p {
          margin: 5px 0;
        }
        
        .c-card__cta {
          display: inline-flex;
          padding: 10px 15px;
          border-radius: 5px;
          background-color: #33aef7;
          color: #1A202C;
          font-size: 16px;
        }
        
        .c-card__cta:hover {
          background-color: #0999ee;
        }


        .c-card {
          width: 350px;
          background-color: #ffffff;
          color: #1A202C;
          border-radius: 5px;
          
          &__media {    
            img {
              width: 100%;
              height: auto;
              border-radius: 5px 5px 0 0;
            }
          }
          
          &__description {
            padding: 20px;
            
            p {
              margin: 5px 0;
            }
          }
          
          &__cta {
            display: inline-flex;
            padding: 10px 15px;
            border-radius: 5px;
            background-color: #33aef7;
            color: #1A202C;
            font-size: 16px;
            
            &:hover {
              background-color: darken(#33aef7, 10%);
            }
          }
        }