Kortit ovat monipuolisia käyttöliittymäkomponentteja, jotka voivat esittää erilaisia sisältöjä, kuten kuvia, tekstiä ja vuorovaikutteisia elementtejä, kuten painikkeita. Tailwind CSS tarjoaa joukon apuluokkia, joiden avulla korttikomponenttien luominen ja muotoilu on helppoa.

Kortin rakenne

Peruskorttikomponentti sisältää tyypillisesti seuraavat elementit: kuvan, otsikon, kuvailevan tekstin ja toimintopainikkeet.

Tunnemme jo tämän komponentin yksittäiset osat, joten yhdistetään kaikki osaamisemme yhdeksi kokonaiseksi kortiksi.

Selitys

1. max-w-sm: Asettaa elementin enimmäisleveydeksi pienen koon (24rem tai 384px);
2. rounded: Lisää pienet pyöristetyt kulmat elementtiin;
3. overflow-hidden: Piilottaa kaiken sisällön, joka ylittää elementin rajat;
4. shadow-lg: Lisää suuren laatikkovarjon elementtiin.

1. w-full: Asettaa kuvan leveydeksi 100 % sen säiliöstä;
2. px-6: Lisää vaakasuoran täytteen 1,5rem (24px) vasemmalle ja oikealle;
3. py-4: Lisää pystysuoran täytteen 1rem (16px) ylös ja alas;
4. font-bold: Käyttää lihavoitua fonttipainoa;
5. text-xl: Asettaa fonttikooksi xl (1,25rem tai 20px);
6. mb-2: Lisää alareunaan 0,5rem (8px) marginaalin;
7. text-gray-700: Asettaa tekstin väriksi keskisävyn harmaan;
8. text-base: Asettaa fonttikooksi peruskoon (1rem tai 16px).

1. px-6: Lisää vaakasuoran täytteen 1,5rem (24px) vasemmalle ja oikealle;
2. pt-4: Lisää yläreunaan täytteen 1rem (16px);
3. pb-2: Lisää alareunaan täytteen 0,5rem (8px);
4. bg-blue-500: Asettaa taustaväriksi sinisen sävyn;
5. hover:bg-blue-700: Muuttaa taustavärin tummemmaksi siniseksi, kun hiiri on elementin päällä;
6. text-white: Asettaa tekstin väriksi valkoisen;
7. font-bold: Käyttää lihavoitua fonttia;
8. py-2: Lisää pystysuoran täytteen 0,5rem (8px);
9. px-4: Lisää vaakasuoran täytteen 1rem (16px);
10. rounded: Lisää pienet pyöristetyt kulmat painikkeeseen;
11. bg-gray-500: Asettaa taustaväriksi harmaan sävyn;
12. hover:bg-gray-700: Muuttaa taustavärin tummemmaksi harmaaksi, kun hiiri on elementin päällä;
13. text-white: Asettaa tekstin väriksi valkoisen;
14. font-bold: Käyttää lihavoitua fonttia;
15. py-2: Lisää pystysuoran täytteen 0,5rem (8px);
16. px-4: Lisää vaakasuoran täytteen 1rem (16px);
17. rounded: Lisää pienet pyöristetyt kulmat painikkeeseen;
18. ml-2: Lisää vasemmalle reunaan marginaalin 0,5rem (8px).

Kuten huomaat, kaikki apuluokat on jo huomioitu. Nyt yhdistämme kaiken yhteen korttikomponenttiin.

Lisätään vielä yksi osio aiempaan esimerkkiin, joka on tunnisteet.

Selitys - Tunnisteet

1. px-6: Lisää vaakasuoran täytteen 1.5rem (24px) vasemmalle ja oikealle;
2. pt-4: Lisää yläreunaan täytteen 1rem (16px);
3. pb-2: Lisää alareunaan täytteen 0.5rem (8px);
4. inline-block: Näyttää elementin rivin sisäisenä lohkotason säiliönä;
5. bg-gray-200: Asettaa taustavärin vaaleanharmaaksi;
6. rounded-full: Tekee elementin kulmista täysin pyöristetyt;
7. px-3: Lisää vaakasuoran täytteen 0.75rem (12px) vasemmalle ja oikealle;
8. py-1: Lisää pystysuoran täytteen 0.25rem (4px) ylös ja alas;
9. text-sm: Asettaa fonttikoon pieneksi (0.875rem tai 14px);
10. font-semibold: Käyttää puolilihavaa fonttipainoa;
11. text-gray-700: Asettaa tekstin värin keskisävyiseksi harmaaksi;
12. mr-2: Lisää oikeanpuoleisen marginaalin 0.5rem (8px);
13. mb-2: Lisää alareunan marginaalin 0.5rem (8px).

Huomio

Kaikki yksityiskohtaiset tiedot Card-komponentista löytyvät täältä.