Cloud Vid Pattern Library - Group 9

Header Image

UI Components

This section provides a collection of UI components that can be used to match the CloudVid UI pattern.

Button

The Button component offers various styles to suit your needs. Be mindful of using the appropriate colors available

            <button class="btn btn-primary">Primary Button</button>
            
            <button class="btn btn-secondary" style="background-color: #d16b42; border: 1px solid #322315;">Secondary Button</button>
            
            <button class="btn custom-button" style="background-color: #322315; color: #fff;">Custom Button</button>

Card

This Card component is perfect for showcasing key features or content.

Feature Card Image
Feature Title

Feature description goes here.

Learn More 
            <div class="card">
              <img src="images/logo.png" alt="Feature Card Image" class="card-img-top" />
              <div class="card-body">
                <h5 class="card-title">Feature Title</h5>
                <p class="card-text">Feature description goes here.</p>
                <a href="#" class="btn btn-primary">Learn More</a>
              </div>
            </div>