Esikatselu
<>
<Card style={{ maxWidth: "22rem" }}>
<CardBody>
<CardTitle>Lorem ipsum</CardTitle>
<p>Dolor sit amet, consectetur adipiscing elit</p>
</CardBody>
<KantaSquares placement="top-end" shape="corner" size="sm" />
</Card>
</> Käyttötarkoitus
Hyödynnä KantaSquares-komponenttia Kanta-palveluiden brändi-ilmeen mukaisten neliöelementtien toteuttamiseen. Tarkemmat ohjeet neliöelementtien soveltamiseen käyttöliittymissä löydät Neliöelementit
Toimintaperiaate
Komponentti sijoittaa neliöt svg-elementtinä minkä tahansa relatiivisesti asemoidun parent-elementin kulmaan.
Huom! Neliöelementit asemoituvat CSS:llä absoluuttisesti, eivätkä saa ympärilleen marginaalia. Sovelluksen
kehittäjän vastuulla on varmistaa, että elementit eivät eri näyttöleveyksillä asetu liian lähelle tekstiä tai muuta
sisältöä.
Tutustu ohjeeseen neliöelementtien soveltamisesta
Saavutettavuus
Neliöelementti on dekoratiivinen elementti, joka oletuksena piilotetaan ruudunlukijoilta.
Kognitiivisen saavutettavuuden varmistamiseksi neliöelementti kannattaa asetella riittävän etäälle muista visuaalisesti samankaltaisista tai -arvoisista elementeistä (esim. painikkeista).
Esimerkit
Muoto
Neliöelementeistä on tarjolla kolme muotoa: corner, diagonal ja bar.
<>
<Card style={{ maxWidth: "22rem" }} className="kds-mb-4 kds-py-4">
<CardBody>
<p>Corner</p>
</CardBody>
<KantaSquares shape="corner" size="sm" />
</Card>
<Card style={{ maxWidth: "22rem" }} className="kds-mb-4 kds-py-4">
<CardBody>
<p>Bar (horisontaalinen asettelu)</p>
</CardBody>
<KantaSquares shape="bar" size="sm" />
</Card>
<Card style={{ maxWidth: "22rem" }} className="kds-mb-4 kds-py-4">
<CardBody>
<p>Bar (vertikaalinen asettelu)</p>
</CardBody>
<KantaSquares shape="bar" size="sm" rotation="90" flip />
</Card>
<Card style={{ maxWidth: "22rem" }} className="kds-mb-4 kds-py-4">
<CardBody>
<p>Diagonal</p>
</CardBody>
<KantaSquares shape="diagonal" size="sm" />
</Card>
</> Koko
<>
<Card style={{ maxWidth: "22rem" }} className="kds-mb-4 kds-py-4">
<CardBody>
<p>Small (sm)</p>
</CardBody>
<KantaSquares shape="diagonal" size="sm" />
</Card>
<Card style={{ maxWidth: "22rem" }} className="kds-mb-4 kds-py-6">
<CardBody>
<p>Medium (md)</p>
</CardBody>
<KantaSquares shape="diagonal" size="md" />
</Card>
<Card style={{ maxWidth: "22rem" }} className="kds-mb-4 kds-py-8">
<CardBody>
<p>Large (lg)</p>
</CardBody>
<KantaSquares shape="diagonal" size="lg" />
</Card>
</> Värit
Neliöelementti on saatavilla kahtena eri vaihtoehtona: kaksivärinen multicolor ja yksivärinen monocolor.
<>
<Card style={{ maxWidth: "22rem" }} className="kds-mb-4 kds-py-4">
<CardBody>
<p>Multicolor</p>
</CardBody>
<KantaSquares shape="corner" size="sm" />
</Card>
<Card style={{ maxWidth: "22rem" }} className="kds-mb-4 kds-py-4">
<CardBody>
<p>Monocolor</p>
</CardBody>
<KantaSquares variant="monocolor" shape="corner" size="sm" />
</Card>
</> Asettelu
Elementit tulee asetella aina siten, että tummin neliö on kiinni kulmassa.
Komponentin saa asetettua haluttuun kulmaan placement-propin avulla. Hyödynnä asettelussa tarpeen mukaan rotation ja flip -proppeja.
Corner
<>
<Card style={{ maxWidth: "22rem" }} className="kds-mb-4 kds-py-4">
<CardBody>
<p className="kds-text-center">top-start</p>
</CardBody>
<KantaSquares placement="top-start" shape="corner" size="sm" rotation="-90" />
</Card>
<Card style={{ maxWidth: "22rem" }} className="kds-mb-4 kds-py-4">
<CardBody>
<p className="kds-text-center">top-end</p>
</CardBody>
<KantaSquares placement="top-end" shape="corner" size="sm" />
</Card>
<Card style={{ maxWidth: "22rem" }} className="kds-mb-4 kds-py-4">
<CardBody>
<p className="kds-text-center">bottom-start</p>
</CardBody>
<KantaSquares placement="bottom-start" shape="corner" size="sm" rotation="180" />
</Card>
<Card style={{ maxWidth: "22rem" }} className="kds-mb-4 kds-py-4">
<CardBody>
<p className="kds-text-center">bottom-end</p>
</CardBody>
<KantaSquares placement="bottom-end" shape="corner" size="sm" rotation="90" />
</Card>
</> Diagonal
<>
<Card style={{ maxWidth: "22rem" }} className="kds-mb-4 kds-py-4">
<CardBody>
<p className="kds-text-center">top-start</p>
</CardBody>
<KantaSquares placement="top-start" shape="diagonal" size="sm" flip />
</Card>
<Card style={{ maxWidth: "22rem" }} className="kds-mb-4 kds-py-4">
<CardBody>
<p className="kds-text-center">top-end</p>
</CardBody>
<KantaSquares placement="top-end" shape="diagonal" size="sm" />
</Card>
<Card style={{ maxWidth: "22rem" }} className="kds-mb-4 kds-py-4">
<CardBody>
<p className="kds-text-center">bottom-start</p>
</CardBody>
<KantaSquares placement="bottom-start" shape="diagonal" size="sm" rotation="180" />
</Card>
<Card style={{ maxWidth: "22rem" }} className="kds-mb-4 kds-py-4">
<CardBody>
<p className="kds-text-center">bottom-end</p>
</CardBody>
<KantaSquares placement="bottom-end" shape="diagonal" size="sm" rotation="90" />
</Card>
</> Bar (horisontaalinen)
<>
<Card style={{ maxWidth: "22rem" }} className="kds-mb-4 kds-py-4">
<CardBody>
<p className="kds-text-center">top-start</p>
</CardBody>
<KantaSquares placement="top-start" shape="bar" size="sm" flip />
</Card>
<Card style={{ maxWidth: "22rem" }} className="kds-mb-4 kds-py-4">
<CardBody>
<p className="kds-text-center">top-end</p>
</CardBody>
<KantaSquares placement="top-end" shape="bar" size="sm" />
</Card>
<Card style={{ maxWidth: "22rem" }} className="kds-mb-4 kds-py-4">
<CardBody>
<p className="kds-text-center">bottom-start</p>
</CardBody>
<KantaSquares placement="bottom-start" shape="bar" size="sm" flip />
</Card>
<Card style={{ maxWidth: "22rem" }} className="kds-mb-4 kds-py-4">
<CardBody>
<p className="kds-text-center">bottom-end</p>
</CardBody>
<KantaSquares placement="bottom-end" shape="bar" size="sm" />
</Card>
</> Bar (vertikaalinen)
<>
<Card style={{ maxWidth: "22rem" }} className="kds-mb-4 kds-py-4">
<CardBody>
<p className="kds-text-center">top-start</p>
</CardBody>
<KantaSquares placement="top-start" shape="bar" size="sm" rotation="-90" />
</Card>
<Card style={{ maxWidth: "22rem" }} className="kds-mb-4 kds-py-4">
<CardBody>
<p className="kds-text-center">top-end</p>
</CardBody>
<KantaSquares placement="top-end" shape="bar" size="sm" rotation="90" flip />
</Card>
<Card style={{ maxWidth: "22rem" }} className="kds-mb-4 kds-py-4">
<CardBody>
<p className="kds-text-center">bottom-start</p>
</CardBody>
<KantaSquares placement="bottom-start" shape="bar" size="sm" rotation="90" />
</Card>
<Card style={{ maxWidth: "22rem" }} className="kds-mb-4 kds-py-4">
<CardBody>
<p className="kds-text-center">bottom-end</p>
</CardBody>
<KantaSquares placement="bottom-end" shape="bar" size="sm" rotation="-90" flip />
</Card>
</>