Esikatselu
<Box variant="primary">
<Text>Lorem ipsum</Text>
</Box>
Käyttötarkoitus
Box-komponenttia käytetään erilaisten sisältöjen ryhmittelyyn ja kehystykseen. Komponentti helpottaa teeman mukaisten tyylien käyttöä.
- Käytä silloin, kun esim. Alert-, Card- tai Tile-komponentti ei vastaa käyttöliittymän tarpeisiin.
- Käytä reunustamaan asiakokonaisuuksia silloin, kun se on asian hahmottamisen kannalta oleellista.
- Älä käytä korvaamaan esim. Alert-, Card- tai Tile-komponenttia.
- Älä käytä kehyksiä tarpeettomasti silloin, kun asiakokonaisuudet hahmottuvat riittävästi esimerkiksi selkeän otsikoinnin ja välistysten ansioista.
Esimerkit
<>
<Box>
<Text>Box-komponentti läpinäkyvällä taustavärillä</Text>
</Box>
<Box variant="primary">
<Text>Box-komponentti primary-variantilla</Text>
<Box variant="primary" bgColor="white">
<Text>Box-komponentti valkoisella taustavärillä</Text>
</Box>
</Box>
<Box appearance="solid" className="kds-p-12 kds-mb-0 kds-bg-brand-primary">
<Text color="white" size="2xl">
Sovellettu box-komponentti ilman kehyksiä
</Text>
</Box>
</>
Pyöristys
Pyöristettyjä reunoja voi hyödyntää visuaalisena tyylikeinona esimerkiksi korttimaisissa esitystavoissa.
Toisen elementin sisällä esiintyvän elementin reunapyöristykset määritetään aina yhtä kokoa pienemmän muuttujan avulla: jos ulomman elementin reunoihin sovelletaan muuttujaa border-radius-md, sisemmässä elementissä käytetään muuttujaa border-radius-sm.
<Box variant="success" rounded>
<Box className="kds-rounded-sm" variant="success" bgColor="white" rounded>
<Text>Sisäkkäiset Box-komponentit pyöristyksellä</Text>
</Box>
</Box>