Card

Simple

You can change the border color depending on the one you want, just change the 'card-content-color'.

Colors:

  • card-content-green

  • card-content-red

  • card-content-orange

  • card-content-yellow

  • card-content-blue

  • card-content-purple

  • card-content-gray

  • card-content-light

Example:

Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac ex at neque mattis finibus a nec velit. 

      

    <div class="card-orange">
      <div class="card-head">
        <h1 class="card-title">Card</h1>
      </div>
      <div class="card-text">
        <p class="card-description">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac ex
          at neque mattis finibus a nec velit.
        </p>
        <button class="btn-blue-h">Button</button>
      </div>
    </div>

Alternative

This card is similar to the simple, but the title can be highlighted with color by changing the 'card-head-color'.

Colors:

  • card-head-green

  • card-head-red

  • card-head-orange

  • card-head-yellow

  • card-head-blue

  • card-head-purple

  • card-head-gray

  • card-head-light

Example:

Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac ex at neque mattis finibus a nec velit. 

      

    <div class="card-purple">
        <div class="card-head-purple">
            <h1 class="card-title">Card</h1>
        </div>
        <div class="card-text">
            <p class="card-description">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac ex
                at neque mattis finibus a nec velit.
            </p>
            <button class="btn-blue-h">Button</button>
        </div>
    </div>

Image

You can also use this component with an image, like the previous ones you can also change the border color, change 'card-color'.

Example:

project image

Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac ex at neque mattis finibus a nec velit. 

      

    <div class="card-blue">
      <img
        class="card-image"
        src="/pexels-javier-balseiro-19960599.webp"
        alt="project image"
      />
      <div class="card-head">
        <h1 class="card-title">Card</h1>
      </div>
      <div class="card-text">
        <p class="card-description">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac ex
          at neque mattis finibus a nec velit.
        </p>
        <button class="btn-blue-h">Button</button>
      </div>
    </div>
Photo by Javier Balseiro. You can find the photo at:
sunrise