v2.1.0

Modal

  • Basic

    <button data-modal-id="modal1" class="modal-button outset-neomo">MODAL Button</button>
    <div data-modal-id="modal1" class="modal">
      <div class="modal-content--md outset-neomo">
        <span class="modal-close">&times;</span>
        <p>You can insert any type of content with this modal class.</p>
      </div>
    </div>
    
  • Size

    Small

    <button data-modal-id="modal3" class="modal-button outset-neomo">Small Card MODAL</button>
    <div data-modal-id="modal3" class="modal">
      <div class="modal-content--sm outset-neomo">
        <span class="modal-close">&times;</span>
        <header class="card-header">
          <p class="card-header-title">Modal Card</p>
        </header>
        <div class="column size-10 text-center ml-10" style="margin: 0 auto">
          <div class="card-image">
            <img
              src="https://images.unsplash.com/photo-1593642634315-48f5414c3ad9?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
              alt="Placeholder image"
              style="border-radius: 0"
            />
          </div>
          <div class="card-content">
            <p class="font-size-4 profile-link text-left m-0">
              <img
                class="img-profile p-0"
                src="https://images.unsplash.com/profile-1609856653329-a9e174ff28b6image?auto=format&amp;fit=crop&amp;w=32&amp;h=32&amp;q=60&amp;crop=faces&amp;bg=fff"
                width="32"
                height="32"
                role="presentation"
                alt="Go to Julian Steenbergen's profile"
              />
    
              Julian Steenbergen
            </p>
            <p class="text-left">
              I'm actually a musician, but photography is just too fun. It brings me
              joy, inspiration and peace. Happy to support the community here with
              my work! ✨
            </p>
            <p class="text-left">
              <i class="fas fa-calendar-week"></i>
              Published on May 9, 2021
            </p>
            <p class="text-left">
              <i class="fas fa-shield-alt"></i>
              Free to use under the Unsplash License
            </p>
          </div>
        </div>
      </div>
    </div>
    

    Middle

    <button data-modal-id="modal2" class="modal-button outset-neomo">Middle Card MODAL</button>
    <div data-modal-id="modal2" class="modal">
      <div class="modal-content--md outset-neomo">
        <span class="modal-close">&times;</span>
        <header class="card-header">
          <p class="card-header-title">Modal Card</p>
        </header>
        <div class="column size-10 text-center ml-10" style="margin: 0 auto">
          <div class="card-image">
            <img
              src="https://images.unsplash.com/photo-1593642634524-b40b5baae6bb?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80"
              alt="Placeholder image"
              style="border-radius: 0"
            />
          </div>
          <div class="card-content">
            <p class="font-size-4 profile-link text-left m-0">
              <img
                class="img-profile p-0"
                src="https://images.unsplash.com/profile-1609856653329-a9e174ff28b6image?auto=format&amp;fit=crop&amp;w=32&amp;h=32&amp;q=60&amp;crop=faces&amp;bg=fff"
                width="32"
                height="32"
                role="presentation"
                alt="Go to Julian Steenbergen's profile"
              />
    
              Julian Steenbergen
            </p>
            <p class="text-left">
              I'm actually a musician, but photography is just too fun. It brings me
              joy, inspiration and peace. Happy to support the community here with
              my work! ✨
            </p>
            <p class="text-left">
              <i class="fas fa-calendar-week"></i>
              Published on May 9, 2021
            </p>
            <p class="text-left">
              <i class="fas fa-shield-alt"></i>
              Free to use under the Unsplash License
            </p>
          </div>
        </div>
      </div>
    </div>