Kies kaartstijlen die op de hele site terugkeren.

DXPR Builder lerenPagina’s bouwenElementen stylenOntwerpgidsen

Geef je kaarten een look die bij je site past: een kleurenschema uit de Type van de kaart, afgeronde hoeken en een schaduw uit het paneel Style. Aan het eind heb je een kaart die je in een rij kunt herhalen voor functies, teamleden of prijzen. Om eerst een kaart te plaatsen, zie Een kaart toevoegen.

De video volgt de stappen hieronder: hij geeft een kaart een lichte look, ronde hoeken en een zachte schaduw.

Een kaart stijlen

  1. Wijs de kaart aan, open More en kies Settings.
  2. Kies onder Type Light.
  3. Open het paneel Style.
  4. Zet Border radius op 8.
  5. Zet Drop shadow op 2.
  6. Klik op Save.

Wat je ziet

De kaart heeft een lichte achtergrond, afgeronde hoeken en een zachte schaduw. Zijn Header-balk staat bovenaan, zijn Title opent de body en de elementen die je erin hebt toegevoegd volgen eronder.

Een Type kleurt de hele kaart, niet alleen de header. Primary, Secondary, Success, Info, Warning, Danger en Dark vullen de kaart met die themakleur en maken de tekst wit. Light geeft een lichte achtergrond met normale tekst. Default laat de kaart aan je thema over.

Instellingen

Instelling Waar Wat het doet
Header General Tekst in een balk bovenaan de kaart; laat hem leeg voor geen balk
Title General Een kop bovenaan de body van de kaart
Type General Het kleurenschema van de hele kaart; standaard Default
Background, Font color Style Je eigen kleuren, bij Type Default
Border radius Style Afgeronde hoeken, in pixels
Drop shadow Style Diepte, van 1 tot 5
Border (box model), Border style, Border color Style Een kader aan één of meer zijden

Kaartpatronen

  • Flat card: Border style Solid, een lichte Border color, Border radius 4, geen schaduw.
  • Elevated card: Drop shadow 2, Border style None, Border radius 8.
  • Highlighted card: zet de linkerkant van Border in het boxmodel op 4, Border style Solid en een accent-Border color.
  • Card that lifts: Drop shadow 1 in Style en 4 in Hover style; zie Elementen laten reageren bij hover.

Kaarten in een rij

Voor een grid met functiekaarten, teamleden of prijzen:

  1. Voeg een rij toe en kies een lay-out met drie of vier gelijke kolommen.
  2. Voeg aan elke kolom een kaart toe en geef elke kaart dezelfde Type- en Style-waarden.
  3. Open het menu More van de rij, kies Settings en schakel Equal-height columns in.

De kolommen lijnen uit, maar elke kaart blijft zo hoog als zijn inhoud. Houd de tekst van elke kaart ongeveer even lang, zodat de kaarten op dezelfde hoogte eindigen. Voor een prijstabel licht je het aanbevolen abonnement uit met een andere Type of een diepere Drop shadow.

Als je de stijl niet ziet

  • Background of Font color in het Style-paneel heeft geen effect. Een Type anders dan Default stelt de kleuren van de kaart in met themaklassen die winnen van het paneel Style. Zet Type op Default en kies je eigen kleuren.
  • Witte tekst op een gekleurde kaart is moeilijk leesbaar. De Warning- en Info-kleuren van veel thema's zijn licht, en deze types zetten altijd witte tekst. Kies een donkerdere Type, of Light, die de normale tekstkleur behoudt.
  • De schaduw toont niet. Drop shadow is 0, wat geen schaduw betekent. Zet hem op 1 of hoger.

Wat nu?