Split Media Component

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel fugiat deleniti ipsa eaque voluptatibus voluptate iusto facilis, ut exercitationem nostrum!

Button

Component Details

Split media displays content side-by-side. Such as combing text with images or video.


        <div class="c-split-media">
          <div class="c-split-media__grid">
            <div class="c-split-media__media">
              <img src="/boat.jpg" alt="example image">
            </div>
            <div class="c-split-media__content">
              <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel fugiat deleniti ipsa eaque voluptatibus voluptate iusto facilis, ut exercitationem nostrum!</p>
              <a href="#">Button</a>
            </div>
          </div>
        </div>


        .c-split-media__grid {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          column-gap: 40px;
        }
        
        .c-split-media__media img {
          width: 100%;
          height: auto;
        }
        
        .c-split-media__content p {
          margin: 20px 0;
        }
        
        .c-split-media__content a {
          display: inline-flex;
          padding: 10px 20px;
          color: #1A202C;
          font-size: 16px;
          border-radius: 20px;
          background-color: #33aef7;
          transition: all 0.2s ease;
        }
        
        .c-split-media__content a:hover {
          background-color: #0999ee;
        }


        .c-split-media {
          &__grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            column-gap: 40px;
          }
          
          &__media {
            img {
              width: 100%;
              height: auto;
            }
          }
          
          &__content {
            p {
              margin: 20px 0;
            }
            
            a {
              display: inline-flex;
              padding: 10px 20px;
              color: #1A202C;
              font-size: 16px;
              border-radius: 20px;
              background-color: #33aef7;
              transition: all 0.2s ease;
              
              &:hover {
                background-color: darken(#33aef7, 10%);
              }
            }
          }
        }