@gemeente-denhaag/cta-image-content

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