Utforming og Tilpasning av Kort

Kort er allsidige UI-komponenter som kan vise ulike typer innhold, slik som bilder, tekst og interaktive elementer som knapper. Tailwind CSS tilbyr et utvalg av verktøy som gjør det enkelt å lage og style kortkomponenter.

Kortstruktur

En grunnleggende kortkomponent inkluderer vanligvis følgende elementer: et bilde, en tittel, beskrivende tekst og handlingsknapper.

Vi kjenner allerede til de enkelte elementene i denne komponenten, så la oss samle all kunnskapen vår i ett komplett kort.

index.html

Forklaring

max-w-sm: Angir maksimal bredde på elementet til liten størrelse (24rem eller 384px);
rounded: Legger til små avrundede hjørner på elementet;
overflow-hidden: Sikrer at alt innhold som går utenfor elementets grenser blir skjult;
shadow-lg: Legger til en stor skygge rundt elementet.

w-full: Angir at bildet skal ha 100% bredde av sin beholder;
px-6: Legger til horisontal polstring på 1.5rem (24px) på både venstre og høyre side;
py-4: Legger til vertikal polstring på 1rem (16px) på både topp og bunn;
font-bold: Bruker fet skriftvekt;
text-xl: Angir skriftstørrelse til xl (1.25rem eller 20px);
mb-2: Legger til bunnmarg på 0.5rem (8px);
text-gray-700: Angir tekstfargen til en middels grå;
text-base: Angir skriftstørrelse til base (1rem eller 16px).

px-6: Legger til horisontal polstring på 1.5rem (24px) på både venstre og høyre side;
pt-4: Legger til topp-polstring på 1rem (16px);
pb-2: Legger til bunn-polstring på 0.5rem (8px);
bg-blue-500: Angir bakgrunnsfargen til en blånyanse;
hover:bg-blue-700: Endrer bakgrunnsfargen til en mørkere blånyanse ved hover;
text-white: Angir tekstfargen til hvit;
font-bold: Bruker fet skriftvekt;
py-2: Legger til vertikal polstring på 0.5rem (8px);
px-4: Legger til horisontal polstring på 1rem (16px);
rounded: Bruker små avrundede hjørner på knappen;
bg-gray-500: Angir bakgrunnsfargen til en grånyanse;
hover:bg-gray-700: Endrer bakgrunnsfargen til en mørkere grånyanse ved hover;
text-white: Angir tekstfargen til hvit;
font-bold: Bruker fet skriftvekt;
py-2: Legger til vertikal polstring på 0.5rem (8px);
px-4: Legger til horisontal polstring på 1rem (16px);
rounded: Bruker små avrundede hjørner på knappen;
ml-2: Legger til venstre marg på 0.5rem (8px).

Som du ser, er alle hjelpeklasser allerede tatt i betraktning. Nå kombinerer vi alt i én kortkomponent.

Vi legger til én seksjon til i det forrige eksempelet, som vil være merker.

index.html

Forklaring - Merker

px-6: Legger til horisontal polstring på 1.5rem (24px) på både venstre og høyre side;
pt-4: Legger til toppolstring på 1rem (16px);
pb-2: Legger til bunnpolstring på 0.5rem (8px);
inline-block: Viser elementet som en inline-nivå blokkbeholder;
bg-gray-200: Setter bakgrunnsfargen til lys grå;
rounded-full: Gir elementet helt avrundede hjørner;
px-3: Legger til horisontal polstring på 0.75rem (12px) på både venstre og høyre side;
py-1: Legger til vertikal polstring på 0.25rem (4px) på både topp og bunn;
text-sm: Setter skriftstørrelsen til liten (0.875rem eller 14px);
font-semibold: Bruker halvfet skriftvekt;
text-gray-700: Setter tekstfargen til middels grå;
mr-2: Legger til høyremarg på 0.5rem (8px);
mb-2: Legger til bunnmarg på 0.5rem (8px).

Merk

All inngående informasjon om Card-komponenten finnes her.

1. Hvilken hjelpeklasse bruker du for å få et bilde til å fylle hele bredden av beholderen?

2. Hvilken hjelpeklasse bruker du for å legge til avrundede hjørner på en kortkomponent?

3. Hva gjør hjelpeklassen `shadow-lg`?

4. Hvilken hjelpeklasse bruker du for å sette en stor skriftstørrelse på en overskrift?

Hvilken hjelpeklasse bruker du for å få et bilde til å fylle hele bredden av beholderen?

Select the correct answer

h-full

w-full

max-w

Hvilken hjelpeklasse bruker du for å legge til avrundede hjørner på en kortkomponent?

Select the correct answer

rounded

border

p-4

shadow

Hva gjør hjelpeklassen shadow-lg?

Select the correct answer

Setter maksimal bredde for et element.

Legger til polstring rundt et element.

Endrer bakgrunnsfargen til et element.

Legger til en stor skygge på et element.

Hvilken hjelpeklasse bruker du for å sette en stor skriftstørrelse på en overskrift?

Select the correct answer

text-sm

text-base

text-xl

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 3. Kapittel 3

Spør AI

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Suggested prompts:

Can you show me the complete code for the card component with badges?

Can you explain how to customize the card's appearance using Tailwind classes?

What are some common use cases for cards in web design?

Awesome!

Completion rate improved to 3.57

Utforming og Tilpasning av Kort

Sveip for å vise menyen

Kortstruktur

En grunnleggende kortkomponent inkluderer vanligvis følgende elementer: et bilde, en tittel, beskrivende tekst og handlingsknapper.

Vi kjenner allerede til de enkelte elementene i denne komponenten, så la oss samle all kunnskapen vår i ett komplett kort.

index.html

Forklaring

max-w-sm: Angir maksimal bredde på elementet til liten størrelse (24rem eller 384px);
rounded: Legger til små avrundede hjørner på elementet;
overflow-hidden: Sikrer at alt innhold som går utenfor elementets grenser blir skjult;
shadow-lg: Legger til en stor skygge rundt elementet.

w-full: Angir at bildet skal ha 100% bredde av sin beholder;
px-6: Legger til horisontal polstring på 1.5rem (24px) på både venstre og høyre side;
py-4: Legger til vertikal polstring på 1rem (16px) på både topp og bunn;
font-bold: Bruker fet skriftvekt;
text-xl: Angir skriftstørrelse til xl (1.25rem eller 20px);
mb-2: Legger til bunnmarg på 0.5rem (8px);
text-gray-700: Angir tekstfargen til en middels grå;
text-base: Angir skriftstørrelse til base (1rem eller 16px).

px-6: Legger til horisontal polstring på 1.5rem (24px) på både venstre og høyre side;
pt-4: Legger til topp-polstring på 1rem (16px);
pb-2: Legger til bunn-polstring på 0.5rem (8px);
bg-blue-500: Angir bakgrunnsfargen til en blånyanse;
hover:bg-blue-700: Endrer bakgrunnsfargen til en mørkere blånyanse ved hover;
text-white: Angir tekstfargen til hvit;
font-bold: Bruker fet skriftvekt;
py-2: Legger til vertikal polstring på 0.5rem (8px);
px-4: Legger til horisontal polstring på 1rem (16px);
rounded: Bruker små avrundede hjørner på knappen;
bg-gray-500: Angir bakgrunnsfargen til en grånyanse;
hover:bg-gray-700: Endrer bakgrunnsfargen til en mørkere grånyanse ved hover;
text-white: Angir tekstfargen til hvit;
font-bold: Bruker fet skriftvekt;
py-2: Legger til vertikal polstring på 0.5rem (8px);
px-4: Legger til horisontal polstring på 1rem (16px);
rounded: Bruker små avrundede hjørner på knappen;
ml-2: Legger til venstre marg på 0.5rem (8px).

Som du ser, er alle hjelpeklasser allerede tatt i betraktning. Nå kombinerer vi alt i én kortkomponent.

Vi legger til én seksjon til i det forrige eksempelet, som vil være merker.

index.html

Forklaring - Merker

px-6: Legger til horisontal polstring på 1.5rem (24px) på både venstre og høyre side;
pt-4: Legger til toppolstring på 1rem (16px);
pb-2: Legger til bunnpolstring på 0.5rem (8px);
inline-block: Viser elementet som en inline-nivå blokkbeholder;
bg-gray-200: Setter bakgrunnsfargen til lys grå;
rounded-full: Gir elementet helt avrundede hjørner;
px-3: Legger til horisontal polstring på 0.75rem (12px) på både venstre og høyre side;
py-1: Legger til vertikal polstring på 0.25rem (4px) på både topp og bunn;
text-sm: Setter skriftstørrelsen til liten (0.875rem eller 14px);
font-semibold: Bruker halvfet skriftvekt;
text-gray-700: Setter tekstfargen til middels grå;
mr-2: Legger til høyremarg på 0.5rem (8px);
mb-2: Legger til bunnmarg på 0.5rem (8px).

Merk

All inngående informasjon om Card-komponenten finnes her.

1. Hvilken hjelpeklasse bruker du for å få et bilde til å fylle hele bredden av beholderen?

2. Hvilken hjelpeklasse bruker du for å legge til avrundede hjørner på en kortkomponent?

3. Hva gjør hjelpeklassen `shadow-lg`?

4. Hvilken hjelpeklasse bruker du for å sette en stor skriftstørrelse på en overskrift?

Hvilken hjelpeklasse bruker du for å få et bilde til å fylle hele bredden av beholderen?

Select the correct answer

h-full

w-full

max-w

Hvilken hjelpeklasse bruker du for å legge til avrundede hjørner på en kortkomponent?

Select the correct answer

rounded

border

p-4

shadow

Hva gjør hjelpeklassen shadow-lg?

Select the correct answer

Setter maksimal bredde for et element.

Legger til polstring rundt et element.

Endrer bakgrunnsfargen til et element.

Legger til en stor skygge på et element.

Hvilken hjelpeklasse bruker du for å sette en stor skriftstørrelse på en overskrift?

Select the correct answer

text-sm

text-base

text-xl

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 3. Kapittel 3

Utforming og Tilpasning av Kort

Kortstruktur

Forklaring

Forklaring - Merker

1. Hvilken hjelpeklasse bruker du for å få et bilde til å fylle hele bredden av beholderen?

2. Hvilken hjelpeklasse bruker du for å legge til avrundede hjørner på en kortkomponent?

3. Hva gjør hjelpeklassen shadow-lg?

4. Hvilken hjelpeklasse bruker du for å sette en stor skriftstørrelse på en overskrift?

Awesome!

Utforming og Tilpasning av Kort

Kortstruktur

Forklaring

Forklaring - Merker

1. Hvilken hjelpeklasse bruker du for å få et bilde til å fylle hele bredden av beholderen?

2. Hvilken hjelpeklasse bruker du for å legge til avrundede hjørner på en kortkomponent?

3. Hva gjør hjelpeklassen shadow-lg?

4. Hvilken hjelpeklasse bruker du for å sette en stor skriftstørrelse på en overskrift?

3. Hva gjør hjelpeklassen `shadow-lg`?

3. Hva gjør hjelpeklassen `shadow-lg`?