Vebego Component Library

Login Block 

<section class="org-login-block">
    <div class="vebego-container">
        <div class="wrapper">
            <div class="column-1">
                <div class="mol-title ">
                    <span class="atm-heading h-subtitle">Het kennis- en netwerkplatform van Assist Zorg</span>

                    <h1 class="atm-heading ">Inloggen bij De Praktijk</h1>

                </div>

                <div class="wrapper-login">
                    <div class="atm-form-input  ">
                        <input class="form-input" type="text" id="input" name="input">
                        <label class="atm-form-label form-label " for="input">Gebruikersnaam</label>

                        <span class="atm-icon form-input-error-icon far fa-times   "></span>
                        <span class="atm-icon form-input-valid-icon far fa-check   "></span>
                    </div>

                    <div class="atm-form-input  ">
                        <input class="form-input" type="text" id="input" name="input">
                        <label class="atm-form-label form-label " for="input">Wachtwoord</label>

                        <span class="atm-icon form-input-error-icon far fa-times   "></span>
                        <span class="atm-icon form-input-valid-icon far fa-check   "></span>
                    </div>

                    <div>
                        <a class="atm-button atm-button-primary button-md  ">
                            <span class="button-content">
                                <span>Inloggen</span>

                            </span>
                            <span class="button-triangle"></span>
                        </a>

                    </div>
                </div>
                <div class="atm-paragraph text-md">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
                </div>

            </div>
            <div class="column-2">
                <picture class="atm-image ">
                    <source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
                    <source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
                    <img class="" src="https://picsum.photos/id/250/768/768" alt="" loading="lazy">
                </picture>
            </div>
        </div>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 300" preserveAspectRatio="none">
        <polygon fill="white" points="500,300 0,300 250,0 500,0 " />
    </svg>
    </div>
 
<section class="org-login-block">
    <div class="vebego-container">
        <div class="wrapper">
            <div class="column-1">
                {{render '@title' title}}
                <div class="wrapper-login">
                    {{render '@input' input-gebruikersnaam merge=true}}
                    {{render '@input' input-wachtwoord merge=true}}
                    <div>
                        {{render '@button-primary' btn-inloggen merge=true}}
                    </div>
                </div>
                {{render '@paragraph'}}
            </div>
            <div class="column-2">
                {{render '@image'}}
            </div>
        </div>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 300" preserveAspectRatio="none">
        <polygon fill="white" points="500,300 0,300 250,0 500,0 "/>
    </svg>
</div>
 
{
  "title": {
    "heading": {
      "text": "Inloggen bij De Praktijk"
    },
    "subtitle": {
      "text": "Het kennis- en netwerkplatform van Assist Zorg"
    },
    "underline": false
  },
  "input-gebruikersnaam": {
    "label": {
      "text": "Gebruikersnaam"
    }
  },
  "input-wachtwoord": {
    "label": {
      "text": "Wachtwoord"
    }
  },
  "btn-inloggen": {
    "text": "Inloggen"
  }
}
  • Content: 
    .org-login-block {
    @apply bg-primary-100;
    @apply relative;

    .vebego-container {
        @apply relative;
        z-index: 1;

        .wrapper {
            @apply lg:grid lg:grid-cols-12 gap-8;

            .column-1 {
                @apply lg:col-span-5 px-8 py-16 md:px-16 lg:pr-0;
            }

            .column-2 {
                @apply lg:col-start-7 lg:col-end-13 lg:py-16;
            }
        }
    }

    .mol-title {
        @apply mb-8;
        @apply lg:my-8;
    }

    .atm-button {
        @apply my-6;
    }

    .wrapper-login {
        @apply flex;
        @apply flex-col;
        @apply gap-3;
    }

    svg {
        @apply hidden;
    }

    @screen lg {
        svg {
            @apply block;
            position: absolute;
            top: 0;
            right: 0;
            width: 25vw;
            height: 100%;
            z-index: 0;
        }
    }
}
  • URL: /components/raw/login-block/login-block.css
  • Filesystem Path: src\components\04-organisms\login-block\login-block.css
  • Size: 957 Bytes

No notes defined.