@gemeente-denhaag/card-news NPM

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:

Card
Image
Title
Intro
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

@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

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

8 months ago

8 months ago

8 months ago

7 months ago

7 months ago

8 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

9 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

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

12 months ago

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

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago