gitea_admin/Styleguide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use content cards group per tab in card group navigation pattern

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-18 18:39:44 +02:00
parent 5652b2dad6
commit ecc982a2b3
1 changed files with 78 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/card-gruppe-mit-tastennavigation.html
+78 -24
View File
@@ -21,36 +21,90 @@
<div class="sg-content-block-card-group__panels"> <div class="sg-content-block-card-group__panels">
<div class="sg-content-block-card-group__panel" id="content-block-card-1" role="tabpanel" aria-labelledby="content-block-tab-1"> <div class="sg-content-block-card-group__panel" id="content-block-card-1" role="tabpanel" aria-labelledby="content-block-tab-1">
<article class="sg-card sg-content-block-card-group__card" data-component="card"> <div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Card Gruppe Taste 1">
<div class="sg-card-segment sg-card-segment--body sg-content-block-card-group__title" data-pattern-part="content-block-card-title"> <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 1.1">
<div class="sg-strong">Card 1</div> <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
</div> <div class="sg-strong">Card 1.1</div>
<div class="sg-card-segment sg-card-segment--body sg-content-block-card-group__content" data-pattern-part="content-block-card-content"> </div>
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Nunc sed velit dignissim sodales ut eu sem integer. Vitae congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar.</p> <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
</div> <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</article> </div>
</article>
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 1.2">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
<div class="sg-strong">Card 1.2</div>
</div>
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
<p class="sg-body">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</article>
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 1.3">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
<div class="sg-strong">Card 1.3</div>
</div>
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
<p class="sg-body">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</article>
</div>
</div> </div>
<div class="sg-content-block-card-group__panel" id="content-block-card-2" role="tabpanel" aria-labelledby="content-block-tab-2" hidden> <div class="sg-content-block-card-group__panel" id="content-block-card-2" role="tabpanel" aria-labelledby="content-block-tab-2" hidden>
<article class="sg-card sg-content-block-card-group__card" data-component="card"> <div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Card Gruppe Taste 2">
<div class="sg-card-segment sg-card-segment--body sg-content-block-card-group__title" data-pattern-part="content-block-card-title"> <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 2.1">
<div class="sg-strong">Card 2</div> <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
</div> <div class="sg-strong">Card 2.1</div>
<div class="sg-card-segment sg-card-segment--body sg-content-block-card-group__content" data-pattern-part="content-block-card-content"> </div>
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis risus sed vulputate odio ut enim blandit volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Amet cursus sit amet dictum sit amet justo donec enim diam vulputate ut pharetra sit amet aliquam id diam maecenas ultricies mi eget mauris. Magna eget est lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam purus sit amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus non enim.</p> <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
</div> <p class="sg-body">Quis risus sed vulputate odio ut enim blandit volutpat maecenas volutpat blandit aliquam etiam erat velit.</p>
</article> </div>
</article>
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 2.2">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
<div class="sg-strong">Card 2.2</div>
</div>
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
<p class="sg-body">Amet cursus sit amet dictum sit amet justo donec enim diam vulputate ut pharetra sit amet aliquam id diam.</p>
</div>
</article>
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 2.3">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
<div class="sg-strong">Card 2.3</div>
</div>
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
<p class="sg-body">Magna eget est lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam purus sit amet luctus.</p>
</div>
</article>
</div>
</div> </div>
<div class="sg-content-block-card-group__panel" id="content-block-card-3" role="tabpanel" aria-labelledby="content-block-tab-3" hidden> <div class="sg-content-block-card-group__panel" id="content-block-card-3" role="tabpanel" aria-labelledby="content-block-tab-3" hidden>
<article class="sg-card sg-content-block-card-group__card" data-component="card"> <div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Card Gruppe Taste 3">
<div class="sg-card-segment sg-card-segment--body sg-content-block-card-group__title" data-pattern-part="content-block-card-title"> <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 3.1">
<div class="sg-strong">Card 3</div> <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
</div> <div class="sg-strong">Card 3.1</div>
<div class="sg-card-segment sg-card-segment--body sg-content-block-card-group__content" data-pattern-part="content-block-card-content"> </div>
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum etiam sit amet nisl purus in mollis nunc sed id semper risus in hendrerit gravida rutrum quisque non tellus orci ac auctor augue mauris augue neque gravida in fermentum et sollicitudin.</p> <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
</div> <p class="sg-body">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article> </div>
</article>
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 3.2">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
<div class="sg-strong">Card 3.2</div>
</div>
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
<p class="sg-body">Etiam sit amet nisl purus in mollis nunc sed id semper risus in hendrerit gravida rutrum quisque.</p>
</div>
</article>
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 3.3">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
<div class="sg-strong">Card 3.3</div>
</div>
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
<p class="sg-body">Non tellus orci ac auctor augue mauris augue neque gravida in fermentum et sollicitudin ac orci phasellus.</p>
</div>
</article>
</div>
</div> </div>
</div> </div>
</div> </div>