@gemeente-denhaag/cta-event NPM

Call To Action Event

A calendar event is a standalone link that shows what kind of event is on which date. It links to a content evenement page.

When to use

Use the event when you need to reference an event that contains a date.

Alternatives and related components

Use links for navigation actions that appear within or immediately after a sentence.
Use CTA links when you link to a page or website that also can be viewed or to a video
Use a download when there is a file being downloaded.
Use a image content link when there is a link in conjunction with an image.

Anatomy

The calendar event consists of:

Date icon: shows the day and abbreviated month of the event;
Header link: shows the name of the event;
Date: shows the full date;
Container;

(Interactive) states

The calendar event contains the states normal, hover and focus.

Design properties

Typography

Date icon

day TheSans/md/400,
month TheSans/sm/400

Header link

TheSans/lg/400

Date

TheSans/lg/700

Colors

Date icon: background-color Blue/3, text color white;
Header link: text color Blue/3;
Date: text color Grey/4;
Container: border-top and border-bottom line color Grey/2;

Interactive states

Hover

header link text color Blue/4, date icon background-color Blue/4;

Focus

header link text color Blue/4, date icon background-color Blue/4, container border color Ocher/5;

Structure

Date icon: background circle size 64px, padding-left 16px, padding-right 24px, day and month padding-top and padding-bottom 12px;
Header link: padding-bottom 4px;
Header link and date: padding right 16px;
Container: padding-top and padding-bottom 24px, border line 1px;

Accessibility

technical requirements

Content guidelines

Date icon

The date icon should:

Contain the digit of the event day. If the digit is <10, then use ‘0’ before for the number (e.g. ‘01’, ‘05’);
Contain only the first three letters of the month.

Heading link

The heading link should:

Show in one sentence what the event is all about;
Start the sentence with the event type (e.g. ‘Spreekuur’ or ‘Bijeenkomst’);
Use the hyphen to break the text.

Date

The date should:

Show the full date, so the day (e.g. ‘Maandag’), digit of the day (e.g. ‘1’), month (e.g. ‘Januari’) and year (e.g. ‘2022’);
Not use the hyphen when breaking the text. Let the text continue on the next line.

Best practices

Do's

Calendar events should:

Always link to a content event page;
Be grouped under each other when there is more than 1 event;
Be placed above, under or between a text (usually in a list);
Be full width (100%)

Don'ts

Calendar events should:

Not be used to link to another page other than a content evenement page.

References

Figma Design

@infinitebrahmanuniverse/nolb-_gem @everything-registry/sub-chunk-355 @gemeente-denhaag/storybook

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

7 months ago

7 months ago

7 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

6 months ago

6 months ago

6 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

7 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

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

8 months ago

8 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

12 months ago

12 months 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

1 year 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

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