News card

Introduction

A newcard is used to display a newsitem on another page.

When to use

A newscard is used in a group on an overview.

Alternatives and related components

• Images

Anatomy

A newscard consist of:

1. Card
2. Image
3. Title
4. Intro
5. Icon

(Interactive) states

The newscard contains the states normal, hover and focus.

Design properties

Desktop

Typography big card

• Title: Mix/2xl/700
• Intro: Sans/md/400

Typography small card

• Title: Mix/lg/700
• Intro: Sans/md/400

Mobile

Typography big card

• Title: Mix/2xl/700
• Intro: Sans/md/400

Colors

• Title: Green/3
• Controls: see the icon-only button
• Border: 1px grey/2

Interactive states

• Hoverstate: box shadow 0px 4px 16px 0px black 16%
• Focus state: container border color Ocher/5

Structure

Desktop big card

• Card: margin 16px
• Image: padding-right: 64px
• Texts: align-center
• Padding: 8px
• Icon: Padding-left 8px
• Image aspect ratio 4:3

Desktop small card

• Card: margin 16px
• Text: margin 12px
• Padding-bottom 8px
• Image aspect ratio 16:9

Mobile big card

• Image: padding-bottom 8px
• Texts: padding 16px
• Image aspect ratio 4:3

Mobile small card

• Card: margin 16px
• Text: margin 12px
• Padding-bottom 8px
• Image aspect ratio 4:3

Mobile

• Image: padding-bottom 16px
• Controls: button padding-left and padding-right 12px
• Indicator: width 32px, height 3px, padding-right 4px, padding-bottom 16px

Accessibility

Content Guidelines

Be concise in the title and intro lenght. The intro should be no longer than 1 sentence.

Best practices

Do's

News card should:

• ave an appealing image that refers or conlude the message of the news item
• ave a clear and consice title
• ave short and readable intro

Don'ts

News cards should not

• Have more than 2 sentences intro.
• Be inserted seperatly on a page, but always be showed in a group. At the end of a page to support referral reading, or the main page has the main purpose to show news items.

References