Esikatselu
<Text>Lorem ipsum dolor sit amet.</Text>
Käyttötarkoitus
Komponenttia käytetään Kelan tai Kannan typografisen tyylin mukaisen tekstisisällön esittämiseen. Tarkemmat ohjeet löytyvät KDS:n typografiaohjeista.
- Käytä tekstin luomiseen esim. artikkeleissa.
- Älä käytä komponenttien lisätietona tai virheilmoituksena.
Esimerkit
<Text>
Kela Design System (KDS) on kokoelma ohjeita ja resursseja Kelan ja Kannan käyttöliittymien ja asiakaskokemuksen
suunnitteluun.
</Text>
Fonttikokoa voi muuttaa käyttämällä komponentin size-attribuuttia.
<>
<Text size="6xl">
(6xl) Kela Design System (KDS) on kokoelma ohjeita ja resursseja Kelan ja Kannan käyttöliittymien ja
asiakaskokemuksen suunnitteluun.
</Text>
<Text size="5xl">
(5xl) Kela Design System (KDS) on kokoelma ohjeita ja resursseja Kelan ja Kannan käyttöliittymien ja
asiakaskokemuksen suunnitteluun.
</Text>
<Text size="4xl">
(4xl) Kela Design System (KDS) on kokoelma ohjeita ja resursseja Kelan ja Kannan käyttöliittymien ja
asiakaskokemuksen suunnitteluun.
</Text>
<Text size="3xl">
(3xl) Kela Design System (KDS) on kokoelma ohjeita ja resursseja Kelan ja Kannan käyttöliittymien ja
asiakaskokemuksen suunnitteluun.
</Text>
<Text size="2xl">
(2xl) Kela Design System (KDS) on kokoelma ohjeita ja resursseja Kelan ja Kannan käyttöliittymien ja
asiakaskokemuksen suunnitteluun.
</Text>
<Text size="xl">
(xl) Kela Design System (KDS) on kokoelma ohjeita ja resursseja Kelan ja Kannan käyttöliittymien ja
asiakaskokemuksen suunnitteluun.
</Text>
<Text size="lg">
(lg) Kela Design System (KDS) on kokoelma ohjeita ja resursseja Kelan ja Kannan käyttöliittymien ja
asiakaskokemuksen suunnitteluun.
</Text>
<Text size="base">
(base) Kela Design System (KDS) on kokoelma ohjeita ja resursseja Kelan ja Kannan käyttöliittymien ja
asiakaskokemuksen suunnitteluun.
</Text>
<Text size="sm">
(sm) Kela Design System (KDS) on kokoelma ohjeita ja resursseja Kelan ja Kannan käyttöliittymien ja
asiakaskokemuksen suunnitteluun.
</Text>
</>
Tekstiä voi lyhentää TextTruncate-komponentilla. Ensisijaisesti lyhennetty teksti tulee olla mahdollista näyttää kokonaisuudessaan avattavana.
Katkaistu teksti on mahdollista näyttää myös tooltipin avulla.
const Example = () => {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<Text size="base">
<TextTruncate suffix={!isOpen ? "näytä lisää" : "näytä vähemmän"} onClick={() => setIsOpen(!isOpen)}>
Kela Design System (KDS) on kokoelma ohjeita ja resursseja Kelan ja Kannan käyttöliittymien ja
asiakaskokemuksen suunnitteluun.
</TextTruncate>
</Text>
<Text size="base">
<TextTruncate tooltip expandable={false}>
Kela Design System (KDS) on kokoelma ohjeita ja resursseja Kelan ja Kannan käyttöliittymien ja
asiakaskokemuksen suunnitteluun.
</TextTruncate>
</Text>
</>
);
};
render(<Example />);