7.2.2.1 Personenprofile

[gesichtete Version][gesichtete Version]
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
 
(3 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
Werden Lehrende oder andere Beteiligte an Kursen vorgestellt, wird diese Darstellung in Kartenform empfohlen:
Werden Lehrende oder andere Beteiligte an Kursen vorgestellt, wird diese Darstellung in Kartenform empfohlen (rows und cols jeweils anpassen):


== Snippet ==
Snippet
<syntaxhighlight lang="html" line>
<syntaxhighlight lang="html">
<div class="card-deck" style="text-align: center; margin: 0;" width="100%">
<div class="row row-cols-1 row-cols-md-2 g-4" style="text-align: center; margin: 0;" width="100%">
     <div class="card">
     <div class="col">
         <div><img src="$BildURL" alt="$AltText" role="presentation" class="img-responsive atto_image_button_text-bottom" style="padding-top: 30px" width="240" height="240"></div>
         <div class="card h-100">
        <div class="card-body">
            <div style="text-align: center;"><img src="$BildURL" alt="$AltText" width="240" height="240" role="presentation" style="padding-top: 30px;" class="img-fluid atto_image_button_middle"><br></div>
            <h4 class="card-title">$Name</h4>
            <div class="card-body">
            <p class="card-text" style="text-align: left;">$BeschreibungETC</p>
                <h5 class="card-title">$Name</h5>
                <p class="card-text" style="text-align: left;">$Beschreibung</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card h-100">
            <div style="text-align: center;"><img src="$BildURL" alt="$AltText" width="240" height="240" role="presentation" style="padding-top: 30px;" class="img-fluid atto_image_button_middle"><br></div>
            <div class="card-body">
                <h5 class="card-title">$Name</h5>
                <p class="card-text" style="text-align: left;">$Beschreibung</p>
            </div>
         </div>
         </div>
     </div>
     </div>
</div>
</div>
<p><br></p>
<p><br></p>
</syntaxhighlight>
== Alternative Darstellung als Liste ==
Ist die Darstellung in Cards nicht gewünscht, können auch Bildlisten genutzt werden:
<syntaxhighlight lang="html">
<div class="media">
    <img src="$BildURL" alt="$Name" width="240" height="240" class="img-fluid atto_image_button_text-bottom align-self-center mr-3" style="padding: 30px;">
    <div class="media-body">
        <h5 class="card-title">$Name</h5>
        <p class="card-text" style="text-align: left;">$BeschreibungETC</p>
    </div>
</div>
</syntaxhighlight>
</syntaxhighlight>

Aktuelle Version vom 18. Oktober 2023, 12:02 Uhr

Werden Lehrende oder andere Beteiligte an Kursen vorgestellt, wird diese Darstellung in Kartenform empfohlen (rows und cols jeweils anpassen):

Snippet

<div class="row row-cols-1 row-cols-md-2 g-4" style="text-align: center; margin: 0;" width="100%">
    <div class="col">
        <div class="card h-100">
            <div style="text-align: center;"><img src="$BildURL" alt="$AltText" width="240" height="240" role="presentation" style="padding-top: 30px;" class="img-fluid atto_image_button_middle"><br></div>
            <div class="card-body">
                <h5 class="card-title">$Name</h5>
                <p class="card-text" style="text-align: left;">$Beschreibung</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card h-100">
            <div style="text-align: center;"><img src="$BildURL" alt="$AltText" width="240" height="240" role="presentation" style="padding-top: 30px;" class="img-fluid atto_image_button_middle"><br></div>
            <div class="card-body">
                <h5 class="card-title">$Name</h5>
                <p class="card-text" style="text-align: left;">$Beschreibung</p>
            </div>
        </div>
    </div>
</div>
<p><br></p>

Alternative Darstellung als Liste

Ist die Darstellung in Cards nicht gewünscht, können auch Bildlisten genutzt werden:

<div class="media">
    <img src="$BildURL" alt="$Name" width="240" height="240" class="img-fluid atto_image_button_text-bottom align-self-center mr-3" style="padding: 30px;">
    <div class="media-body">
        <h5 class="card-title">$Name</h5>
        <p class="card-text" style="text-align: left;">$BeschreibungETC</p>
    </div>
</div>