KAUI CSS KitComponent Showcase

Card Containers (.k-card)

Structured surfaces with headers, titles, bodies, and footers. Includes bordered modifiers, equal-height cards, and a scrollable country list.

System Metrics Online

Standard Structured Card

Composed with standard BEM elements: .k-card__header, .k-card__title, .k-card__body, and .k-card__footer.

Uptime: 99.98%

Bordered Modifier

The .k-card--bordered modifier explicitly enforces a crisp perimeter border, ideal for dashboards and data tables.

Nested surface content
Countries 195 records

Countries & Time Zones

Scrollable body with evenly distributed columns: number, calling code, country name, and time zone.

No. Code Country Time Zone
1+93AfghanistanUTC+4:30
2+355AlbaniaUTC+1
3+213AlgeriaUTC+1
4+376AndorraUTC+1
5+244AngolaUTC+1
6+1-268Antigua and BarbudaUTC-4
7+54ArgentinaUTC-3
8+374ArmeniaUTC+4
9+61AustraliaUTC+8 to +11
10+43AustriaUTC+1
11+994AzerbaijanUTC+4
12+1-242BahamasUTC-5
13+973BahrainUTC+3
14+880BangladeshUTC+6
15+1-246BarbadosUTC-4
16+375BelarusUTC+3
17+32BelgiumUTC+1
18+501BelizeUTC-6
19+229BeninUTC+1
20+975BhutanUTC+6
21+591BoliviaUTC-4
22+387Bosnia and HerzegovinaUTC+1
23+267BotswanaUTC+2
24+55BrazilUTC-5 to -2
25+673BruneiUTC+8
26+359BulgariaUTC+2
27+226Burkina FasoUTC+0
28+257BurundiUTC+2
29+238Cabo VerdeUTC-1
30+855CambodiaUTC+7
31+237CameroonUTC+1
32+1CanadaUTC-8 to -3:30
33+236Central African RepublicUTC+1
34+235ChadUTC+1
35+56ChileUTC-6 to -3
36+86ChinaUTC+8
37+57ColombiaUTC-5
38+269ComorosUTC+3
39+242Congo (Brazzaville)UTC+1
40+243Congo (Kinshasa)UTC+1 to +2
41+506Costa RicaUTC-6
42+225Cote d'IvoireUTC+0
43+385CroatiaUTC+1
44+53CubaUTC-5
45+357CyprusUTC+2
46+420Czech RepublicUTC+1
47+45DenmarkUTC+1
48+253DjiboutiUTC+3
49+1-767DominicaUTC-4
50+1-809Dominican RepublicUTC-4
51+593EcuadorUTC-6 to -5
52+20EgyptUTC+2
53+503El SalvadorUTC-6
54+240Equatorial GuineaUTC+1
55+291EritreaUTC+3
56+372EstoniaUTC+2
57+268EswatiniUTC+2
58+251EthiopiaUTC+3
59+679FijiUTC+12
60+358FinlandUTC+2
61+33FranceUTC+1
62+241GabonUTC+1
63+220GambiaUTC+0
64+995GeorgiaUTC+4
65+49GermanyUTC+1
66+233GhanaUTC+0
67+30GreeceUTC+2
68+1-473GrenadaUTC-4
69+502GuatemalaUTC-6
70+224GuineaUTC+0
71+245Guinea-BissauUTC+0
72+592GuyanaUTC-4
73+509HaitiUTC-5
74+504HondurasUTC-6
75+36HungaryUTC+1
76+354IcelandUTC+0
77+91IndiaUTC+5:30
78+62IndonesiaUTC+7 to +9
79+98IranUTC+3:30
80+964IraqUTC+3
81+353IrelandUTC+0
82+972IsraelUTC+2
83+39ItalyUTC+1
84+1-876JamaicaUTC-5
85+81JapanUTC+9
86+962JordanUTC+3
87+7KazakhstanUTC+5
88+254KenyaUTC+3
89+686KiribatiUTC+12 to +14
90+965KuwaitUTC+3
91+996KyrgyzstanUTC+6
92+856LaosUTC+7
93+371LatviaUTC+2
94+961LebanonUTC+2
95+266LesothoUTC+2
96+231LiberiaUTC+0
97+218LibyaUTC+2
98+423LiechtensteinUTC+1
99+370LithuaniaUTC+2
100+352LuxembourgUTC+1
101+261MadagascarUTC+3
102+265MalawiUTC+2
103+60MalaysiaUTC+8
104+960MaldivesUTC+5
105+223MaliUTC+0
106+356MaltaUTC+1
107+692Marshall IslandsUTC+12
108+222MauritaniaUTC+0
109+230MauritiusUTC+4
110+52MexicoUTC-8 to -5
111+691MicronesiaUTC+10 to +11
112+373MoldovaUTC+2
113+377MonacoUTC+1
114+976MongoliaUTC+8
115+382MontenegroUTC+1
116+212MoroccoUTC+1
117+258MozambiqueUTC+2
118+95MyanmarUTC+6:30
119+264NamibiaUTC+2
120+674NauruUTC+12
121+977NepalUTC+5:45
122+31NetherlandsUTC+1
123+64New ZealandUTC+12 to +13
124+505NicaraguaUTC-6
125+227NigerUTC+1
126+234NigeriaUTC+1
127+850North KoreaUTC+9
128+389North MacedoniaUTC+1
129+47NorwayUTC+1
130+968OmanUTC+4
131+92PakistanUTC+5
132+680PalauUTC+9
133+970PalestineUTC+2
134+507PanamaUTC-5
135+675Papua New GuineaUTC+10 to +11
136+595ParaguayUTC-4
137+51PeruUTC-5
138+63PhilippinesUTC+8
139+48PolandUTC+1
140+351PortugalUTC+0
141+974QatarUTC+3
142+40RomaniaUTC+2
143+7RussiaUTC+2 to +12
144+250RwandaUTC+2
145+1-869Saint Kitts and NevisUTC-4
146+1-758Saint LuciaUTC-4
147+1-784Saint Vincent and the GrenadinesUTC-4
148+685SamoaUTC+13
149+378San MarinoUTC+1
150+239Sao Tome and PrincipeUTC+0
151+966Saudi ArabiaUTC+3
152+221SenegalUTC+0
153+381SerbiaUTC+1
154+248SeychellesUTC+4
155+232Sierra LeoneUTC+0
156+65SingaporeUTC+8
157+421SlovakiaUTC+1
158+386SloveniaUTC+1
159+677Solomon IslandsUTC+11
160+252SomaliaUTC+3
161+27South AfricaUTC+2
162+82South KoreaUTC+9
163+211South SudanUTC+2
164+34SpainUTC+1
165+94Sri LankaUTC+5:30
166+249SudanUTC+2
167+597SurinameUTC-3
168+46SwedenUTC+1
169+41SwitzerlandUTC+1
170+963SyriaUTC+3
171+992TajikistanUTC+5
172+255TanzaniaUTC+3
173+66ThailandUTC+7
174+670Timor-LesteUTC+9
175+228TogoUTC+0
176+676TongaUTC+13
177+1-868Trinidad and TobagoUTC-4
178+216TunisiaUTC+1
179+90TürkiyeUTC+3
180+993TurkmenistanUTC+5
181+688TuvaluUTC+12
182+256UgandaUTC+3
183+380UkraineUTC+2
184+971United Arab EmiratesUTC+4
185+44United KingdomUTC+0
186+1United StatesUTC-5 to -10
187+598UruguayUTC-3
188+998UzbekistanUTC+5
189+678VanuatuUTC+11
190+379Vatican CityUTC+1
191+58VenezuelaUTC-4
192+84VietnamUTC+7
193+967YemenUTC+3
194+260ZambiaUTC+2
195+263ZimbabweUTC+2

Usage guide & code sample

Compose cards from header, title, body, and footer regions. Add .k-card--bordered for a defined surface.

<article class="k-card k-card--bordered">
  <div class="k-card__header">Account</div>
  <div class="k-card__body">Plan details</div>
  <div class="k-card__footer">Updated today</div>
</article>