Om komponenten
Denne komponenten er avhengig av stylingen til .pkt-link. Linkcard i oslo.kommune.no blir brukt i en grid. Les mer om grid.
Varianter
<a href="#" class="pkt-linkcard pkt-linkcard--normal pkt-link">
<span class="pkt-icon pkt-link__icon">
<svg viewBox="0 0 32 32">
<use href="#user" />
</svg>
</span>
<div class="pkt-linkcard__content">
<div class="pkt-linkcard__title pkt-link pkt-link--external">
Overskrift her
</div>
<div class="pkt-linkcard__text">
Tekst som går over flere linjer og som forklarer innholdet på den siden
man kommer.
</div>
</div>
</a><pkt-linkcard href="#" title="Overskrift her" skin="normal" iconName="user">
Tekst som går over flere linjer og som forklarer innholdet på den siden man
kommer.
</pkt-linkcard><PktLinkCard href="#" title="Overskrift her" skin="normal" iconName="user">
Skriv en informerende tekst om ønskelig tema her. Legg til knapper bilder om
du ønsker
</PktLinkCard>CSS oversikt
Block:
- .pkt-linkcard .pkt-link
Elements:
- .pkt-linkcard__icon
- .pkt-linkcard__content
- .pkt-linkcard__title
- .pkt-linkcard__text
Modifiers:
- .pkt-alert
--normal (default) - .pkt-alert
--blue - .pkt-alert
--beige - .pkt-alert
--beige-outline - .pkt-alert
--grey-outline
Props, slots og events
| Props | Type | Validation | Default | Beskrivelse |
|---|---|---|---|---|
| skin | string | normal, blue, beige, beige-outline, grey-outline | normal | |
| title | string | |||
| href | string | |||
| iconName | string | |||
| openInNewTab | boolean | false | ||
| external | boolean | false |
| Slots | Type | Validation | Default | Beskrivelse |
|---|---|---|---|---|
| default | Tekstinnholdet i komponenten |
| Events | Type | Validation | Default | Beskrivelse |
|---|---|---|---|---|