<c-login-card>
Examples
<template>
<div>
<c-login-card>
<c-login-card-title>Sign in to My CSC</c-login-card-title>
<c-login-card-content>
<p>Access your projects and services with your CSC account.</p>
<c-text-field label="Username" name="username" />
<c-text-field label="Password" name="password" type="password" />
</c-login-card-content>
<c-login-card-actions justify="space-between">
<c-button size="large">Sign in</c-button>
<c-link href="https://csc.fi" underline>Forgot password?</c-link>
</c-login-card-actions>
</c-login-card>
</div>
</template>
<template>
<div>
<c-login-card>
<c-login-card-title>Sign in to My CSC</c-login-card-title>
<c-login-card-content>
<p>Access your projects and services with your CSC account.</p>
</c-login-card-content>
<c-login-card-actions>
<c-button>Sign in</c-button>
</c-login-card-actions>
</c-login-card>
</div>
</template>
<template>
<div>
<c-login-card>
<c-login-card-title>Sign in to My CSC</c-login-card-title>
<c-login-card-content>
<p>Access your projects and services with your CSC account.</p>
<c-text-field label="Username" name="username" />
<c-text-field label="Password" name="password" type="password" />
</c-login-card-content>
<c-login-card-actions>
<c-button>Sign in</c-button>
</c-login-card-actions>
</c-login-card>
</div>
</template>
<template>
<div>
<c-login-card>
<c-login-card-title>Sign in to My CSC</c-login-card-title>
<c-login-card-content>
<p>Access your projects and services with your CSC account.</p>
</c-login-card-content>
<c-login-card-actions justify="space-between">
<c-button size="large">Sign in</c-button>
<c-link href="https://csc.fi" underline>Forgot password?</c-link>
</c-login-card-actions>
</c-login-card>
</div>
</template>
API reference
<c-login-card>
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
backgroundPosition | background-position | string | 'bottom right' | Background position (css background-position) |
mobileBreakpoint | mobile-breakpoint | number | 600 | Mobile breakpoint in pixels |
overlay | overlay | boolean | false | Add colored overlay to the background image |
overlayBlendMode | overlay-blend-mode | CLoginCardBlendMode | 'multiply' | Add colored overlay to the background image |
src | src | string | '' | Background image |
Slots
| Slot | Description |
|---|---|
default | Login Card contents |
CSS parts
Style from outside with c-login-card::part(name) — parts are the library's only styling customization API.
| Part | Description |
|---|---|
root | The outer article carrying the card background and radius |
card | The shadowed, positioned container inside the root |
image | The clipped background-image layer of the card |
content | The padded column wrapping the slotted contents |
Types
Importable from the package root: import type { … } from '@cscfi/csc-ui'
CLoginCardBlendMode
CSS `mix-blend-mode` applied to the primary-coloured overlay drawn over the background image when `overlay` is set.
export type CLoginCardBlendMode =
| 'color-burn'
| 'color-dodge'
| 'color'
| 'darken'
| 'difference'
| 'exclusion'
| 'hard-light'
| 'hue'
| 'lighten'
| 'luminosity'
| 'multiply'
| 'normal'
| 'overlay'
| 'saturation'
| 'screen'
| 'soft-light';CLoginCardProps
export interface CLoginCardProps {
/**
* Background position (css background-position)
*
* @seeded from csc-ui — verify
* @freeform any CSS background-position value
*/
backgroundPosition?: string;
/**
* Mobile breakpoint in pixels
*
* @seeded from csc-ui — verify
*/
mobileBreakpoint?: number;
/**
* Add colored overlay to the background image
*
* @seeded from csc-ui — verify
*/
overlay?: boolean;
/**
* Add colored overlay to the background image
*
* @seeded from csc-ui — verify
*/
overlayBlendMode?: CLoginCardBlendMode;
/**
* Background image
*
* @seeded from csc-ui — verify
* @freeform any image URL
*/
src?: string;
}<c-login-card-title>
Slots
| Slot | Description |
|---|---|
default | Login card title text |
CSS parts
Style from outside with c-login-card-title::part(name) — parts are the library's only styling customization API.
| Part | Description |
|---|---|
root | The inner header element carrying the heading typography |
<c-login-card-content>
Slots
| Slot | Description |
|---|---|
default | Login card content |
CSS parts
Style from outside with c-login-card-content::part(name) — parts are the library's only styling customization API.
| Part | Description |
|---|---|
root | The inner article stacking the slotted content vertically |
<c-login-card-actions>
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
align | align | CLoginCardActionsAlign | 'center' | Align the actions |
justify | justify | CLoginCardActionsJustify | 'start' | Justify the actions |
Slots
| Slot | Description |
|---|---|
default | Login card actions |
CSS parts
Style from outside with c-login-card-actions::part(name) — parts are the library's only styling customization API.
| Part | Description |
|---|---|
root | The outer footer element |
actions | The flex menu row laying out the slotted actions |
Types
Importable from the package root: import type { … } from '@cscfi/csc-ui'
CLoginCardActionsAlign
Cross-axis alignment of the slotted actions within the row.
export type CLoginCardActionsAlign = 'center' | 'end' | 'start';CLoginCardActionsJustify
Main-axis distribution of the slotted actions. `stretch` makes every action grow to fill the row.
export type CLoginCardActionsJustify =
| 'center'
| 'end'
| 'space-around'
| 'space-between'
| 'start'
| 'stretch';CLoginCardActionsProps
export interface CLoginCardActionsProps {
/**
* Align the actions
*
* @seeded from csc-ui — verify
*/
align?: CLoginCardActionsAlign;
/**
* Justify the actions
*
* @seeded from csc-ui — verify
*/
justify?: CLoginCardActionsJustify;
}