Panel
Du använder Panel när du vill samla relaterat innehåll på en sida, för att ge en tydlig separation och förståelse för vad på sidan som relateras tillvarandra.
Design och språk
När du ska använda panel
Panelkomponenten används för att samla relaterade komponenter – kort, tabeller, namnvärdelistor och text som delar liknande innehåll. Detta gör att vi kan få en tydligare seperation på vårt innehåll. (Kom ihåg: en panel kan ha flera kort som underordnade. Ett kort kan bör inte ha en panel som underordnad.)
När du inte ska använda panel
Använd inte panel:
- i ett kort.
Komponent och kod
Komponenten driftsattes första gången i version 22.0.71.
Styleguide
Du kan använda styleguiden både om du startar ett nytt utvecklingsprojekt och om du redan har ett befintligt. Vissa standardsystem är inte kompatibla med styleguidens CSS och då kan du i stället efterlikna designen på styleguidens komponenter. Behöver du en komponent som inte finns i styleguiden så hör av dig till styleguide-teamet.
<div class="l-grid-col md:l-grid-col-2 lg:l-grid-col-2">
<!-- komponenten börjar här -->
<jv-panel extra-class="" style="--jv-panel-backgroud:">
<section aria-labelledBy="myHeader">
<h3 class="m-0" id="myHeader">Styleguide</h3>
<p>Du kan använda styleguiden både om du startar ett nytt utvecklingsprojekt och om du redan har ett
befintligt. Vissa standardsystem är inte kompatibla med styleguidens CSS och då kan du i stället
efterlikna designen på styleguidens komponenter. Behöver du en komponent som inte finns i
styleguiden så hör av dig till styleguide-teamet.</p>
</section>
</jv-panel>
</div>Vit bakgrund
Styleguide
Du kan använda styleguiden både om du startar ett nytt utvecklingsprojekt och om du redan har ett befintligt. Vissa standardsystem är inte kompatibla med styleguidens CSS och då kan du i stället efterlikna designen på styleguidens komponenter. Behöver du en komponent som inte finns i styleguiden så hör av dig till styleguide-teamet.
<div class="l-grid-col md:l-grid-col-2 lg:l-grid-col-2">
<!-- komponenten börjar här -->
<jv-panel extra-class="" style="--jv-panel-backgroud:#fff">
<section aria-labelledBy="myHeader">
<h3 class="m-0" id="myHeader">Styleguide</h3>
<p>Du kan använda styleguiden både om du startar ett nytt utvecklingsprojekt och om du redan har ett
befintligt. Vissa standardsystem är inte kompatibla med styleguidens CSS och då kan du i stället
efterlikna designen på styleguidens komponenter. Behöver du en komponent som inte finns i
styleguiden så hör av dig till styleguide-teamet.</p>
</section>
</jv-panel>
</div>Senast publicerad
Sidansvarig för sidan är Styleguide