@gemeente-denhaag/cta-image-content NPM

Cta Image Content

Introduction

An image content link is a link in combination with a photo that stands out more than a regular link.

When to use

Use an image content link on the overview page to draw attention to a link. A photo is also added that is additional to the link and the text.

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

Anatomy

The image content link consists of:

Label: shows the name of the page where it is being linked to
Text: additional information about the link
Image: a matching photo
Button: to highlight the call to action
Container: background of the link and text

(Interactive) states

The image content link contains the states normal, hover and focus.

Design properties

Typography

Link: TheMix/2xl/700
Text: TheSans/xl/400

In mediem

Link: TheMix/xl/700
Text: TheSans/lg/400

Colors

Label: text color Grey/5
Text: text color Grey/4
Container: background-color white*, stroke Grey/2

The color of the container may vary. If the background color is other than white, the container does not have a stroke.

Interactive states

Hover

Shadow: blur-16, Y=4, color: #000 16%

Structure

Desktop

Link: padding-bottom 16px
Spacing between text: 8px
Spacing between: 24px
Container: padding-left and padding-right 64px, padding-top and padding-bottom 32px, corner radius 0 3 3 0

Mobile

Link: padding-bottom 16px
Spacing between text: 8px
Spacing between 24px
Container: padding 24px, corner radius 0 0 3 3

Accessibility

Focus tab on header text. Accessiblity label of the link consist only of the header.

Content guidelines

Link The link should:

Must show a short and clear page name being linked to.

Text The text should:

Be supportive to the link.
Explain in a few words what the page being linked to is about.

Best practices

Do's Image content links should:

Grow vertically with the cotainer. The height of the image needs to be as big the container.
Be full width (100%)
Only be used once on a page.
Indicate that an external website is linked by means of the external link icon.
Occur on overview pages with a lot of information such as lists to get emphasis.
Make sure the photo says something about the link. You can have the photo appear on the page to ensure recognisability.

Don'ts Image content links should:

Not be used more than once on a page because it draws too much attention.

References

https://www.denhaag.nl/nl/in-de-stad/verkeer-en-vervoer/bereikbaarheid.htm

@gemeente-denhaag/button @gemeente-denhaag/icons @gemeente-denhaag/typography

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

1 year ago

11 months ago

10 months ago

10 months ago

11 months ago

7 months ago

8 months ago

8 months ago

9 months ago

9 months ago

1 year ago

1 year ago

12 months ago

12 months ago

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

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

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years 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

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago