Beispiel 2

Hier der HTML-Code im Dialog zur Portlet-Bearbeitung mit den im Beispiel 1 dargelegten Anforderungen:
Hier die Kachel, wie sie im Browser aussieht:
Zum Kopieren hier der komplette Beispielcode:
<div class="card" style="width:400px;align:center">
  <div class="card-image">
    <p align="center">
       <span class="hs_logo"><img title="Universität Hildesheim" alt="Universität Hildesheim" src="/superx/images/St_Uni-Logo-9-2003-300dpi-CMYK-o-Kreis-frei-Pfad.jpg" style="width: 5.0rem; height:5.0rem; margin-bottom: 0.5rem;"></span> 
       <span class="hs_logo"><img title="SuperX" alt="SuperX" src="/superx/images/superx_logo.svg" style="width: 5.0rem; height:5.0rem; margin-bottom: 0.5rem;"></span>
   </p>
  </div> <!--Ende card-image-->

  <div class="card-content" style="font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #4d4d4d; line-height: 1.625;" >
 
    <FORM id="login" ACTION="/superx/servlet/SuperXmlAnmeldung" METHOD="post">
      <div class="field">
         <label for="kennung">Ihre Kennung</label>
         <input class="input is-small is-focused" type="text" autofocus="" NAME="kennung" id="kennung" style="background: #ebebed;"/>
       </div> <!--placeholder="Ihre Kennung"-->

       <div class="field">
          <label for="password">Ihr Passwort</label>
          <input class="input is-small" type="password" NAME="passwort" style="background: #ebebed;"/>
       </div> <!--placeholder="Ihr Passwort"-->
	    
       <INPUT TYPE="hidden" NAME="MandantenID" value="default"> 
       <input type="hidden" Name="requestedServlet" value="../index.jsp"/>
       <input type="hidden" Name="alt_redirect_url" value="/superx/index.jsp"/> 

       <button class="button is-small is-fullwidth is-hovered" style="margin-top: 1.8rem; font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #4d4d4d; line-height: 1.625; background: rgba(227, 0, 27, 0.5);"> <!--is-outlined -->
          <span class="icon is-small">Anmeldung  
	    <img src="/superx/images/login_grey_small.svg" alt="Login Icon" aria-hidden="true" />
          </span>
       </button>
     </FORM>

     <div class="content">
        <a href="/superx/servlet/SuperXmlMaske?tid=9800160&kennung=gastform&login=superx" class="button is-small is-outlined" style="margin-top: 1.8rem; font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #4d4d4d; line-height: 1.2; background: #ebebed;">Benutzerantrag</a>     
        
        <a href="https://www.superx-projekt.de/doku/kern_modul/datenschutz/index.htm" class="button is-small is-outlined" style="margin-top: 1.8rem; font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #4d4d4d; line-height: 1.2; background: #ebebed;">Datenschutz</a>
        <span class="separator"> </span>
     </div><!--Ende content-->
   </div>  <!--Ende card-content-->
</div>     <!--Ende card-->