@gemeente-denhaag/authentication-block v0.1.1-alpha.251
Authentication block
This authentication block adequately sends the user an authentication flow necessary to perform a task or action on the website or when logging in. He stands out and offers help if needed. By making the choice between authentication service already on the detail page where the task is listed, you can reduce the number of clicks and place the choice more in the context of the task.
When to use
Use the authentication block when users need to authenticate to perform a certain task or to log in. Think of logging in with DigiD to eventually fill in a form.
Also use it in combination with other login methods, when you don't necessarily have to log in. It sometimes happens that as a guest you have certain permissions to, for example, fill in a form. In this case you show the block with the option to continue.
Alternatives and related components
Alternative components:
- When there is no authentication required: Generic action button
- When there is a reference to another page, without authentication: CTA Link
- When there is a link to another page that should be highlighted: Image content link
Related components:
- Buttons
Anatomy
The authentication block consists of:
- Title: To introduce the action
- Paragraph (optional): To give more context to the action
- Logo: Shows the different resources and creates trust with the user
- Button: To link to the right page
- In only several cases there will be 2 buttons, but in preference there will be only 1 call to action.
- Caption with link: offers help by linking to an external website
- Container
(Interactive) states
The authentication block itself does not have interactive states. The buttons in this components have. Described in: Buttons
Design properties
Typography
- Title: TheMix/xl/700
- Paragraph: TheSans/md/400
- Caption: TheSans/md/400
Colors
- Title: text color Grey/5
- Paragraph: text color Grey/4
- Caption with link: text color Grey/4
- Container: border line color Grey/2
Interactive states
- None.
Structure
Task variant
Desktop
- Paragraph: padding-bottom 16px
- Icon: size 56px, padding-left 16px
- Caption with link: padding-top 32px
- Container: padding 32px
Mobile
- Paragraph: padding-bottom 16px
- Icon: size 56px, padding-bottom 24px
- Caption with link: padding-top 24px
- Container: padding 24px
Login variant
Desktop
- Paragraph: padding-bottom 24px
- Icon: size 80px, padding-bottom 24px
- Caption with link: padding-top 32px
- Container: padding 32px
Mobile
- Paragraph: padding-bottom 16px
- Icon: size 56px, padding-left 16px
- Caption with link: padding-top 24px
- Container: padding 24px
9 days ago
16 days ago
16 days ago
22 days ago
29 days ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
6 months ago
6 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
6 months ago
6 months ago
6 months ago
6 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago