Esikatselu
function ExampleAccordion() {
const { isToggleOn: isOpen, flipToggle: toggleAccordion } = useToggle({ multiple: true });
return (
<>
<Accordion id="accordion1" isOpen={isOpen("accordion1")}>
<AccordionToggle onClick={() => toggleAccordion("accordion1")}>
<AccordionTitle>Lorem ipsum</AccordionTitle>
</AccordionToggle>
<AccordionBody>
<Text> Dolor sit amet</Text>
</AccordionBody>
</Accordion>
<Accordion id="accordion2" isOpen={isOpen("accordion2")}>
<AccordionToggle onClick={() => toggleAccordion("accordion2")}>
<AccordionTitle>Consectetur adipiscing elit</AccordionTitle>
</AccordionToggle>
<AccordionBody>
<Text>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</Text>
</AccordionBody>
</Accordion>
</>
);
}
Käyttötarkoitus
Käytä haitarielementtiä laajojen tietosisältöjen jäsentelyyn ja käyttöliittymän silmäiltävyyden parantamiseen. Haitarissa voidaan piilotetusti esittää sisältöä, jonka ei ole pakollista heti näkyä asiakkaalle. Asiakas voi itse valita, mitä sisältöä haluaa tarkastella.
Oikein käytettynä haitarielementti auttaa asiakasta suorittamaan tehtävänsä tehokkaammin. Tarpeettomasti käytettynä se puolestaan lisää ylimääräisiä klikkauksia.
Otsikoi haitari aina mahdollisimman selkeästi ja kuvaavasti. Näin olennaiset sisällöt eivät jää asiakkaalta vahingossa huomaamatta.
Anna asiakkaan lähtökohtaisesti itse valita kuinka monta haitaria hän haluaa avata. Avattavien osioiden määrää ei kannata rajoittaa ilman perusteltua syytä.
- Käytä piilottamaan sisältöä, joka ei ole pakollista olla asiakkaalle heti näkyvillä.
- Käytä piilottamaan sisältöä, joka koskee vain osaa asiakkaista.
- Käytä tiivistämään sisältöä.
- Ryhmittele sisältö selkeisiin kokonaisuuksiin.
- Muotoile otsikko siten, että se kuvaa haitariin piilotettua sisältöä.
- Älä piilota haitariin tietoa, joka ei saa jäädä asiakkaalta huomaamatta.
- Älä käytä piilottamaan hyvin lyhyttä sisältöä.
- Älä käytä haitaria, jos sivulla on niin vähän sisältöä, ettei haitarin käyttö ole perusteltua.
- Älä käytä haitaria, mikäli asiakas todennäköisesti lukee koko sivun sisällön. Jaa sisältö sen sijaan otsikoiden alle.
Saavutettavuus
Komponentti lisää automaattisesti tarvittavat ARIA-attribuutit ruudunlukijoille, kun komponentille välitetään id-attribuutti.
Haitarikomponentin oletusotsikko AccordionTitle on oletuksena leipätekstiä. Joissakin tilanteissa se on
hyvä toteuttaa HTML:n otsikkoelementillä, jolloin haitarikomponentti ja sen sisältö on helpommin löydettävissä ruudunlukijalla.
Aseta näissä tapauksissa otsikkoelementille sisällön rakenteeseen sopiva otsikkotaso.
<AccordionTitle as="h3">Otsikko</AccordionTitle>
Haitarielementti
Haitarielementti otsikkotyylillä
Haitarin otsikon voi toteuttaa tavanomaisella otsikkotyylillä, jolloin haitari erottuu sivun muusta sisällöstä.
Muotoile otsikko napakasti. Valitse otsikko, joka kuvaa haitariin sisältyvää tietoa.
function ExampleAccordion() {
const { isToggleOn: isOpen, flipToggle: toggleAccordion } = useToggle({ multiple: true });
return (
<Spacing base={4} sm={0} side="x" negative>
<Accordion id="valtakirjat-1" isOpen={isOpen("valtakirjat-1")}>
<AccordionToggle onClick={() => toggleAccordion("valtakirjat-1")}>
<span className="kds-flex">
<Heading as="span" size={5} mb={1} className="kds-block kds-mr-2">
Apteekkarin vaihdos
</Heading>
<Badge variant="light" className="kds-self-center">
1
</Badge>
</span>
</AccordionToggle>
<AccordionBody>
<Text>
Ilmoita haltuunottopäivä Fimean Apteekkirekisteriin. Hakemuksen tekeminen Kanta Ekstranetissä edellyttää,
että haltuunottopäivä on merkitty Apteekkirekisteriin.
</Text>
</AccordionBody>
</Accordion>
<Accordion id="valtakirjat-2" isOpen={isOpen("valtakirjat-2")}>
<AccordionToggle onClick={() => toggleAccordion("valtakirjat-2")}>
<span className="kds-flex">
<Heading as="span" size={5} mb={1} className="kds-block kds-mr-2">
Apteekin teknisten tietojen muutos
</Heading>
<Badge variant="light" className="kds-self-center">
2
</Badge>
</span>
</AccordionToggle>
<AccordionBody>
<Text>Teknisten tietojen muutoksia ovat esimerkiksi:</Text>
<List>
<ListItem>Tietoliikenneyhteyden ip-osoitteen muutos</ListItem>
<ListItem>Uuden liityntäpisteen lisääminen (esim. uusi sivuapteekki)</ListItem>
<ListItem>Liityntäpisteen poisto (esim. sivuapteekin toiminnan päättyminen)</ListItem>
<ListItem>Apteekkijärjestelmän vaihto</ListItem>
</List>
</AccordionBody>
</Accordion>
</Spacing>
);
}
Haitarielementti leipätekstityylillä
Haitarin otsikoinnin voi toteuttaa myös leipätekstiä mukailevalla tyylillä. Kevyempää otsikkotyyli sopii esimerkiksi sisältöihin, joissa otsikot ovat pitkiä tai haitaria ei haluta erityisesti korostaa muusta sisällöstä.
Leipätekstiin perustuvaa otsikkotyyliä voi soveltaa esimerkiksi usein kysyttyjen kysymysten listaamiseen.
function ExampleAccordion() {
const { isToggleOn: isOpen, flipToggle: toggleAccordion } = useToggle({ multiple: true });
return (
<Spacing base={4} sm={0} side="x" negative>
<Accordion id="totu-accordion1" isOpen={isOpen("totu-accordion1")}>
<AccordionToggle onClick={() => toggleAccordion("totu-accordion1")}>
<AccordionTitle>Mikä toimeentulotuki on?</AccordionTitle>
</AccordionToggle>
<AccordionBody>
<Text>
Toimeentulotuki on henkilön tai perheen viimesijainen taloudellinen tuki, joka kattaa elämän perusmenoja.
</Text>
<List text="Toimeentulotuessa on kolme osaa:">
<ListItem>perustoimeentulotuki</ListItem>
<ListItem>täydentävä toimeentulotuki</ListItem>
<ListItem>ehkäisevä toimeentulotuki</ListItem>
</List>
<Text>
Sinulla voi olla oikeus saada perustoimeentulotukea, jos tulosi ja varasi eivät riitä välttämättömiin
jokapäiväisiin menoihisi, kuten asumiseen, ruokaan, terveydenhoitoon ja vaatteisiin. Perustoimeentulotukea
haetaan Kelasta. Toimeentulotuki on veroton etuus.
</Text>
<Text>
Kunnan sosiaalitoimisto voi harkintansa mukaan myöntää lisäksi täydentävää ja ehkäisevää toimeentulotukea.
</Text>
</AccordionBody>
</Accordion>
<Accordion id="totu-accordion2" isOpen={isOpen("totu-accordion2")}>
<AccordionToggle onClick={() => toggleAccordion("totu-accordion2")}>
<AccordionTitle>Miten muut tuet vaikuttavat toimeentulotukeen?</AccordionTitle>
</AccordionToggle>
<AccordionBody>
<Text>
Toimeentulotuki on viimesijainen tuki ja sen määrään vaikuttavat kaikki käytettävissäsi olevat tulot ja
varat, mukaan lukien sosiaalietuudet (esimerkiksi Kelasta, työeläkevakuutuksesta tai työttömyyskassasta).
</Text>
<Text>
Toimeentulotuen viimesijaisuus tarkoittaa sitä, että sinun pitää hakea ensin muut tuet, joihin sinulla on
oikeus. Ensisijaisia Kelan tukia ovat esimerkiksi työttömyysturva, asumistuet, eläkkeet, opintotuki,
vanhempainpäiväraha, sairauspäiväraha, kotihoidontuki ja elatustuki.
</Text>
</AccordionBody>
</Accordion>
<Accordion id="totu-accordion3" isOpen={isOpen("totu-accordion3")}>
<AccordionToggle onClick={() => toggleAccordion("totu-accordion3")}>
<AccordionTitle>Miten voin arvioida, voisinko saada perustoimeentulotukea?</AccordionTitle>
</AccordionToggle>
<AccordionBody>
<Text>Voit arvioida mahdollisuutesi perustoimeentulotukeen laskurilla.</Text>
</AccordionBody>
</Accordion>
</Spacing>
);
}
Lisätietoteksti otsikon alla
Haitarielementin otsikon alle voi tarvittaessa lisätä lyhyen lisätietotekstin, joka kuvaa haitarin sisältöä.
function ExampleAccordion() {
const { isToggleOn: isOpen, flipToggle: toggleAccordion } = useToggle({ multiple: true });
return (
<Spacing base={4} sm={0} side="x" negative>
<Accordion id="etuusohje-1" isOpen={isOpen("etuusohje-1")}>
<AccordionToggle onClick={() => toggleAccordion("etuusohje-1")}>
<Heading as="span" size={5} mb={1} className="kds-block">
Hae ensin muut tuet
</Heading>
<Text as="span" className="kds-mt-1">
Ennen perustoimeentulotuen hakemista sinun pitää selvittää, voitko saada muita etuuksia tai tuloja.
</Text>
</AccordionToggle>
<AccordionBody>
<Text>
Non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Duis aute
irure dolor in reprehenderit in voluptate velit. Facere possimus, omnis voluptas assumenda est, omnis dolor
repellendus.
</Text>
<Text>
Nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit
esse quam. Non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
</Text>
</AccordionBody>
</Accordion>
<Accordion id="etuusohje-2" isOpen={isOpen("etuusohje-2")}>
<AccordionToggle onClick={() => toggleAccordion("etuusohje-2")}>
<Heading as="span" size={5} mb={1} className="kds-block">
Arvioi tuen määrä laskurilla
</Heading>
<Text as="span" className="kds-mt-1">
Arvioi mahdollisuutesi tukeen ennen kuin teet hakemuksen. Arvion voi tehdä helposti toimeentulotuen
laskurilla.
</Text>
</AccordionToggle>
<AccordionBody>
<Text>
Non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Duis aute
irure dolor in reprehenderit in voluptate velit. Facere possimus, omnis voluptas assumenda est, omnis dolor
repellendus.
</Text>
</AccordionBody>
</Accordion>
<Accordion id="etuusohje-3" isOpen={isOpen("etuusohje-3")}>
<AccordionToggle onClick={() => toggleAccordion("etuusohje-3")}>
<Heading as="span" size={5} mb={1} className="kds-block">
Tuloista ja menoista laskelma
</Heading>
<Text as="span" className="kds-mt-1">
Oikeus perustoimeentulotukeen harkitaan toimeentulotukilain mukaan ja tekemällä laskelma tuloista ja
menoista.
</Text>
</AccordionToggle>
<AccordionBody>
<Text>
Nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit
esse quam. Non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
</Text>
<Text>
Non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Duis aute
irure dolor in reprehenderit in voluptate velit. Facere possimus, omnis voluptas assumenda est, omnis dolor
repellendus.
</Text>
</AccordionBody>
</Accordion>
</Spacing>
);
}
Kevyt haitarielementti
Kevyt haitarielementti otsikkotyylillä
Haitarin toteutuksessa voi soveltaa myös ilman taustaväriä olevaa, kevyempää visuaalista tyyliä, etenkin jos haitarielementtiä käytetään muiden
komponenttien, kuten paneeleiden, sisällä. Kevyempiä haitareita voi muista haitarityyleistä poiketen käyttää myös sisäkkäin.
Tällöin hierarkiassa alemman haitarin otsikkotaso on aina pienempi ja sisennetty.
function ExampleAccordion() {
const { isToggleOn: isOpen, flipToggle: toggleAccordion, flipAll: isAllOpen } = useToggle({ multiple: true });
return (
<Panel
aria-labelledby="example-panel-accordion-heading"
as="section"
heading="Asiakkaan tiedot"
headingId="example-panel-accordion-heading"
>
<PanelBody>
<div className="kds-mb-4">
<Row className="kds-mb-2">
<Column col="12" md="3">
<strong>Osoite</strong>
</Column>
<Column col="12" md="9">
Katuosoite 6 B 66, 00980 HELSINKI
</Column>
</Row>
<Row className="kds-mb-2">
<Column col="12" md="3">
<strong>Puhelinnumero</strong>
</Column>
<Column col="12" md="9">
-
</Column>
</Row>
<Row className="kds-mb-2">
<Column col="12" md="3">
<strong>Sähköpostiosoite</strong>
</Column>
<Column col="12" md="9">
etunimi.sukunimi@example.fi
</Column>
</Row>
</div>
<Accordion id="panel-month-1" isOpen={isOpen("panel-month-1")} appearance="borderless">
<AccordionToggle onClick={() => toggleAccordion("panel-month-1")}>
<span className="kds-flex kds-flex-col">
<Heading as="span" size={5} mb={1} className="kds-mr-2 kds-block">
Lokakuu 2020 <small className="kds-text-muted">(1.10.2020 - 31.10.2020)</small>
</Heading>
</span>
</AccordionToggle>
<AccordionBody>
<Accordion id="panel-month-1-family" isOpen={isOpen("panel-month-1-family")} appearance="borderless">
<AccordionToggle onClick={() => toggleAccordion("panel-month-1-family")} className="kds-py-2">
<span className="kds-flex">
<Heading as="span" size={6} className="kds-mr-2 kds-mb-0">
Perhetilanne
</Heading>
<Badge variant="light" className="kds-self-center">
2
</Badge>
</span>
</AccordionToggle>
<AccordionBody className="kds--ml-8">
<Table size="sm">
<TableHead>
<TableRow>
<TableHeader>Suhde</TableHeader>
<TableHeader>Nimi ja henkilötunnus</TableHeader>
<TableHeader>Perusosarooli</TableHeader>
<TableHeader>Voimassa</TableHeader>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell>Hakija</TableCell>
<TableCell>
Möttönen, Amelia Alma <br /> 020344-999X
</TableCell>
<TableCell>Muu aikuinen/avio-/avopuoliso</TableCell>
<TableCell>1.10.2020 - 30.11.2020</TableCell>
</TableRow>
<TableRow>
<TableCell>Hakijan puoliso</TableCell>
<TableCell>
Möttönen, Frans <br /> 010233-900X
</TableCell>
<TableCell>Muu aikuinen/avio-/avopuoliso</TableCell>
<TableCell>1.10.2020 - 30.11.2020</TableCell>
</TableRow>
</TableBody>
</Table>
</AccordionBody>
</Accordion>
<Accordion id="panel-month-1-income" isOpen={isOpen("panel-month-1-income")} appearance="borderless">
<AccordionToggle onClick={() => toggleAccordion("panel-month-1-income")} className="kds-py-2">
<span className="kds-flex">
<Heading as="span" size={6} mb={1} className="kds-block kds-mr-2">
Tulot
</Heading>
<Badge variant="light" className="kds-self-center">
0
</Badge>
</span>
</AccordionToggle>
<AccordionBody className="kds--ml-8">
<p className="kds-text-muted kds-my-2">Ei tuloja.</p>
</AccordionBody>
</Accordion>
</AccordionBody>
</Accordion>
<Accordion id="panel-month-2" isOpen={isOpen("panel-month-2")} appearance="borderless">
<AccordionToggle onClick={() => toggleAccordion("panel-month-2")}>
<span className="kds-flex">
<Heading as="span" size={5} mb={1} className="kds-block">
Marraskuu 2020 <small className="kds-text-muted">(1.11.2020 - 30.11.2020)</small>
</Heading>
</span>
</AccordionToggle>
<AccordionBody>
<Accordion id="panel-month-2-family" isOpen={isOpen("panel-month-2-family")} appearance="borderless">
<AccordionToggle onClick={() => toggleAccordion("panel-month-2-family")} className="kds-py-2">
<span className="kds-flex">
<Heading as="span" size={6} mb={1} className="kds-block kds-mr-2">
Perhetilanne
</Heading>
<Badge variant="light" className="kds-self-center">
2
</Badge>
</span>
</AccordionToggle>
<AccordionBody className="kds--ml-8">
<Table size="sm">
<TableHead>
<TableRow>
<TableHeader>Suhde</TableHeader>
<TableHeader>Nimi ja henkilötunnus</TableHeader>
<TableHeader>Perusosarooli</TableHeader>
<TableHeader>Voimassa</TableHeader>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell>Hakija</TableCell>
<TableCell>
Möttönen, Amelia Alma <br /> 020344-999X
</TableCell>
<TableCell>Muu aikuinen/avio-/avopuoliso</TableCell>
<TableCell>1.10.2020 - 30.11.2020</TableCell>
</TableRow>
<TableRow>
<TableCell>Hakijan puoliso</TableCell>
<TableCell>
Möttönen, Frans <br /> 010233-900X
</TableCell>
<TableCell>Muu aikuinen/avio-/avopuoliso</TableCell>
<TableCell>1.10.2020 - 30.11.2020</TableCell>
</TableRow>
</TableBody>
</Table>
</AccordionBody>
</Accordion>
<Accordion id="panel-month-2-income" isOpen={isOpen("panel-month-2-income")} appearance="borderless">
<AccordionToggle onClick={() => toggleAccordion("panel-month-2-income")} className="kds-py-2">
<span className="kds-flex">
<Heading as="span" size={6} mb={1} className="kds-block kds-mr-2">
Tulot
</Heading>
<Badge variant="light" className="kds-self-center">
0
</Badge>
</span>
</AccordionToggle>
<AccordionBody className="kds--ml-8">
<p className="kds-text-muted kds-my-2">Ei tuloja.</p>
</AccordionBody>
</Accordion>
</AccordionBody>
</Accordion>
</PanelBody>
</Panel>
);
}
Kevyt haitarielementti linkkipainikkeen tyylillä
Esimerkiksi lomakekenttien laajennettavissa ohjeteksteissä tai chat-kuplissa kannattaa käyttää linkkipainikkeen tyyliä mukailevaa haitarielementtiä.
function ExampleAccordion() {
const [isOpen, setOpen] = useState(false);
return (
<Accordion id="asunnon-pinta-ala" isOpen={isOpen} appearance="link">
<AccordionToggle onClick={() => setOpen(!isOpen)}>Lue, miten asunnon pinta-ala tulee ilmoittaa</AccordionToggle>
<AccordionBody>
<Text>
Ilmoita pinta-alana kaikki asuinkäytössä olevat tilat, joita on mahdollista lämmittää. Ilmoita pinta-ala
täysinä neliömetreinä ja pyöristä desimaaliluvut seuraavaan kokonaislukuun.
</Text>
<Text>
Pinta-alaan ei lasketa parveketta, kuistia, kylmää eteistä, kellaria, pannuhuonetta, autotallia ja kylmää
varastotilaa, joten niitä ei tarvitse ilmoittaa.
</Text>
</AccordionBody>
</Accordion>
);
}
Useampi haitari linkkipainikkeen tyylillä:
function ExampleAccordion() {
const { isToggleOn: isOpen, flipToggle: toggleAccordion } = useToggle({ multiple: true });
return (
<>
<Accordion id="opintolaina-1" isOpen={isOpen("opintolaina-1")} appearance="link" className="kds-mb-2" reversed>
<AccordionToggle onClick={() => toggleAccordion("opintolaina-1")}>Miten opintolainan saa?</AccordionToggle>
<AccordionBody>
<Text>
Opintolainan valtiontakausta kannattaa hakea samalla kertaa, kun hakee opintotukea. Opintorahaa saavalle
korkeakouluopiskelijalle lainatakaus myönnetään automaattisesti. Lainatakauksen voi myös hakea muun
opintotuen jälkeen opintotuen muutosilmoituksella.
</Text>
</AccordionBody>
</Accordion>
<Accordion id="opintolaina-2" isOpen={isOpen("opintolaina-2")} appearance="link" className="kds-mb-2" reversed>
<AccordionToggle onClick={() => toggleAccordion("opintolaina-2")}>
Voinko saada opintolainan ilman opintorahaa?
</AccordionToggle>
<AccordionBody>
<Text>
Voit saada opintolainan valtiontakauksen, jos saat Kelasta opintorahaa tai Työllisyysrahastolta
aikuiskoulutustukea. On kuitenkin tilanteita, joissa lainatakaus voidaan myöntää, vaikka et saa opintorahaa.
Lue lisää: Kuka voi saada opintolainaa.
</Text>
</AccordionBody>
</Accordion>
<Accordion id="opintolaina-3" isOpen={isOpen("opintolaina-3")} appearance="link" reversed>
<AccordionToggle onClick={() => toggleAccordion("opintolaina-3")}>
Mitä jos opintolaina ja muu tuki eivät riitä? Voinko saada lisälainaa?
</AccordionToggle>
<AccordionBody>
<Text>
Kela myöntää opintolainan valtiontakauksen enimmäismääräisenä. Opintolaina ja muu opintotuki on tarkoitettu
opiskeluajan kaikille opiskelukuukausille. Harkitse, miten käytät opintolainasi.
</Text>
</AccordionBody>
</Accordion>
</>
);
}
Avaa kaikki -toiminto
Avaa kaikki -toiminto mahdollistaa kaikkien samaan ryhmään kuuluvien haitareiden avaamisen samanaikaisesti. Ryhmälle voi
tällöin antaa myös yhteisen otsikon.
Toiminnon soveltaminen haitariryhmässä sopii parhaiten käyttötapauksiin, jossa Avaa kaikki -valinnan tarjoaminen on
asiakkaan kannalta hyödyllistä. Haitareiden otsikoiden tulee tällaisessa tapauksessa olla mahdollisimman kuvaavia.
function ExampleAccordion() {
const { isToggleOn: isOpen, flipToggle: toggleAccordion, flipAll: isAllOpen } = useToggle({ multiple: true });
return (
<AccordionGroup
toggleAll={() => isAllOpen(["title-summary-example-1", "title-summary-example-2", "title-summary-example-3"])}
openLabel="Avaa kaikki"
closeLabel="Sulje kaikki"
>
<Spacing base={4} sm={0} side="x" negative>
<Accordion id="title-summary-example-1" isOpen={isOpen("title-summary-example-1")}>
<AccordionToggle onClick={() => toggleAccordion("title-summary-example-1")}>
<AccordionTitle>Miten opintolainan saa?</AccordionTitle>
</AccordionToggle>
<AccordionBody>
<Text>
Opintolainan valtiontakausta kannattaa hakea samalla kertaa, kun hakee opintotukea. Opintorahaa saavalle
korkeakouluopiskelijalle lainatakaus myönnetään automaattisesti. Lainatakauksen voi myös hakea muun
opintotuen jälkeen opintotuen muutosilmoituksella.
</Text>
<Text>
Jos saat Kelasta opintolainan valtiontakauksen, voit hakea opintolainaa valitsemastasi pankista. Tutustu
pankin opintolainaohjeisiin esimerkiksi pankin verkkosivuilla. Pankki päättää lainan myöntämisestä.
</Text>
<Text>
Opintolainasta kannattaa pyytää tarjous eri pankeilta, sillä lainaehdot voivat vaihdella pankeittain. On
tärkeää tutustua lainaehtoihin. Sovit pankin kanssa muun muassa lainan korosta ja takaisinmaksun
alkamisesta.
</Text>
<Text>
Opintotukipäätöksessä, jolla lainatakaus on myönnetty, kerrotaan, milloin ja kuinka paljon opintolainaa
voi nostaa. Voit itse päättää, nostatko kaiken mahdollisen opintolainan vai riittääkö pienempi määrä.
Lukuvuodelle myönnetty opintolaina on nostettava sen aikana, yleensä heinäkuun loppuun mennessä.
</Text>
<Text>
Näet opintotukipäätöksesi OmaKelasta. OmaKelassa on myös lainatietosi, esimerkiksi tieto nostettavissa
olevista opintolainoista.
</Text>
</AccordionBody>
</Accordion>
<Accordion id="title-summary-example-2" isOpen={isOpen("title-summary-example-2")}>
<AccordionToggle onClick={() => toggleAccordion("title-summary-example-2")}>
<AccordionTitle>Voinko saada opintolainan ilman opintorahaa?</AccordionTitle>
</AccordionToggle>
<AccordionBody>
<Text>
Voit saada opintolainan valtiontakauksen, jos saat Kelasta opintorahaa tai Työllisyysrahastolta
aikuiskoulutustukea. On kuitenkin tilanteita, joissa lainatakaus voidaan myöntää, vaikka et saa
opintorahaa. Lue lisää: Kuka voi saada opintolainaa.
</Text>
<Text>
Jos et voi saada lainatakausta ilman opintorahaa, voit kuitenkin halutessasi perua ja palauttaa
opintorahat (ja mahdolliset opintotuen asumislisät) sen jälkeen, kun olet nostanut opintolainan. Voit siis
hakea opintotuen, nostaa opintolainat ja sen jälkeen perua ja palauttaa opintorahat (ja mahdolliset
opintotuen asumislisät).
</Text>
<Text>
Et kuitenkaan voi nostaa opintolainaa enää sen jälkeen, kun olet valmistunut tai keskeyttänyt opintosi.
Aiemmin nostamiesi opintolainojen valtiontakaus on kuitenkin voimassa normaalisti.
</Text>
</AccordionBody>
</Accordion>
<Accordion id="title-summary-example-3" isOpen={isOpen("title-summary-example-3")}>
<AccordionToggle onClick={() => toggleAccordion("title-summary-example-3")}>
<AccordionTitle>Mitä jos opintolaina ja muu tuki eivät riitä? Voinko saada lisälainaa?</AccordionTitle>
</AccordionToggle>
<AccordionBody>
<Text>
Kela myöntää opintolainan valtiontakauksen enimmäismääräisenä. Opintolaina ja muu opintotuki on
tarkoitettu opiskeluajan kaikille opiskelukuukausille. Harkitse, miten käytät opintolainasi.
</Text>
<Text>
Kela ei voi myöntää suurempaa lainatakausta. Voit saada lisää opintotukea, jos opiskeluaikasi pitenee
esimerkiksi kesäkuukausille tai opintojen lisäajalle. Suuremman lainatakauksen voit saada ulkomaan
opiskelujakson ajalle.
</Text>
</AccordionBody>
</Accordion>
</Spacing>
</AccordionGroup>
);
}