HTML
Lisätietoa HTML-rakenteen ja tyylien hyödyntämisestä löydät sivulta
Käyttö ilman Reactia.
Esikatselu
<div class="kds-chat">
<div class="kds-chat__message kds-chat__message--left">
<div class="kds-chat__bubble"><p class="kds-text">Lorem ipsum</p></div>
</div>
</div>
Esimerkit
<div class="kds-chat">
<div class="kds-chat__message kds-chat__message--left">
<small class="kds-chat__message-name">Chattirobotti 14.35</small>
<div class="kds-chat__bubble">
<p class="kds-text">
Hei! Olen Kelan chattirobotti. Neuvon sinua kysymyksissä, jotka liittyvät lastenhoidon tukiin,
vanhempainpäivärahoihin, äitiysavustukseen, lapsilisään ja elatustukeen. Opettelen näitä asioita vasta, joten en
välttämättä osaa vastata ihan kaikkeen.
</p>
<p class="kds-text">Ethän kirjoita chattiin henkilötietojasi tietoturvasyistä.</p>
<p class="kds-text">
Miten voin auttaa? Ymmärrän parhaiten lyhyitä ja selkeitä kysymyksiä, esimerkiksi "Milloin isyysrahahakemus on
tehtävä?"
</p>
</div>
</div>
<div class="kds-chat__message kds-chat__message--right">
<small class="kds-chat__message-name">Minä 14.36</small>
<div class="kds-chat__bubble"><p class="kds-text">Milloin isyysrahahakemus on tehtävä?</p></div>
</div>
<div class="kds-chat__message kds-chat__message--left">
<small class="kds-chat__message-name">Chattirobotti miettii...</small>
<div class="kds-chat__bubble kds-chat__bubble--loading"><span class="kds-skeleton"></span></div>
</div>
</div>
CSS-luokat