1.0.0 • Published 11 months ago

@gemeente-denhaag/card-news v1.0.0

Weekly downloads
-
License
EUPL-1.2
Repository
github
Last release
11 months ago

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

-

@infinitebrahmanuniverse/nolb-_gem@everything-registry/sub-chunk-355@gemeente-denhaag/storybook
0.1.1-alpha.275

1 year ago

1.0.0

11 months ago

0.1.1

11 months ago

0.1.1-alpha.274

1 year ago

0.1.1-alpha.273

1 year ago

0.1.1-alpha.272

1 year ago

0.1.1-alpha.271

1 year ago

0.1.1-alpha.270

1 year ago

0.1.1-alpha.269

1 year ago

0.1.1-alpha.268

1 year ago

0.1.1-alpha.267

1 year ago

0.1.1-alpha.266

1 year ago

0.1.1-alpha.265

1 year ago

0.1.1-alpha.264

1 year ago

0.1.1-alpha.263

1 year ago

0.1.1-alpha.262

1 year ago

0.1.1-alpha.261

1 year ago

0.1.1-alpha.260

1 year ago

0.1.1-alpha.259

1 year ago

0.1.1-alpha.258

1 year ago

0.1.1-alpha.248

2 years ago

0.1.1-alpha.247

2 years ago

0.1.1-alpha.246

2 years ago

0.1.1-alpha.245

2 years ago

0.1.1-alpha.244

2 years ago

0.1.1-alpha.249

2 years ago

0.1.1-alpha.251

2 years ago

0.1.1-alpha.250

2 years ago

0.1.1-alpha.257

1 year ago

0.1.1-alpha.256

1 year ago

0.1.1-alpha.255

1 year ago

0.1.1-alpha.254

1 year ago

0.1.1-alpha.253

1 year ago

0.1.1-alpha.252

1 year ago

0.1.1-alpha.243

2 years ago

0.1.1-alpha.242

2 years ago

0.1.1-alpha.241

2 years ago

0.1.1-alpha.240

2 years ago

0.1.1-alpha.239

2 years ago

0.1.1-alpha.238

2 years ago

0.1.1-alpha.237

2 years ago

0.1.1-alpha.236

2 years ago

0.1.1-alpha.235

2 years ago

0.1.1-alpha.234

2 years ago

0.1.1-alpha.233

2 years ago

0.1.1-alpha.232

2 years ago

0.1.1-alpha.231

2 years ago

0.1.1-alpha.230

2 years ago

0.1.1-alpha.229

2 years ago

0.1.1-alpha.228

2 years ago

0.1.1-alpha.227

2 years ago

0.1.1-alpha.226

2 years ago

0.1.1-alpha.225

2 years ago

0.1.1-alpha.224

2 years ago

0.1.1-alpha.223

2 years ago

0.1.1-alpha.222

2 years ago

0.1.1-alpha.221

2 years ago

0.1.1-alpha.220

2 years ago

0.1.1-alpha.219

2 years ago

0.1.1-alpha.218

2 years ago

0.1.1-alpha.217

2 years ago

0.1.1-alpha.216

2 years ago

0.1.1-alpha.215

2 years ago

0.1.1-alpha.214

2 years ago

0.1.1-alpha.213

2 years ago

0.1.1-alpha.212

2 years ago

0.1.1-alpha.185

2 years ago

0.1.1-alpha.184

2 years ago

0.1.1-alpha.183

2 years ago

0.1.1-alpha.182

2 years ago

0.1.1-alpha.181

2 years ago

0.1.1-alpha.180

2 years ago

0.1.1-alpha.189

2 years ago

0.1.1-alpha.188

2 years ago

0.1.1-alpha.187

2 years ago

0.1.1-alpha.186

2 years ago

0.1.1-alpha.196

2 years ago

0.1.1-alpha.195

2 years ago

0.1.1-alpha.194

2 years ago

0.1.1-alpha.193

2 years ago

0.1.1-alpha.192

2 years ago

0.1.1-alpha.191

2 years ago

0.1.1-alpha.190

2 years ago

0.1.1-alpha.199

2 years ago

0.1.1-alpha.198

2 years ago

0.1.1-alpha.197

2 years ago

0.1.1-alpha.174

3 years ago

0.1.1-alpha.173

3 years ago

0.1.1-alpha.172

3 years ago

0.1.1-alpha.171

3 years ago

0.1.1-alpha.179

2 years ago

0.1.1-alpha.178

2 years ago

0.1.1-alpha.177

2 years ago

0.1.1-alpha.176

2 years ago

0.1.1-alpha.175

2 years ago

0.1.1-alpha.204

2 years ago

0.1.1-alpha.203

2 years ago

0.1.1-alpha.202

2 years ago

0.1.1-alpha.201

2 years ago

0.1.1-alpha.200

2 years ago

0.1.1-alpha.209

2 years ago

0.1.1-alpha.208

2 years ago

0.1.1-alpha.207

2 years ago

0.1.1-alpha.206

2 years ago

0.1.1-alpha.205

2 years ago

0.1.1-alpha.211

2 years ago

0.1.1-alpha.210

2 years ago

0.1.1-alpha.170

3 years ago

0.1.1-alpha.169

3 years ago

0.1.1-alpha.159

3 years ago

0.1.1-alpha.158

3 years ago

0.1.1-alpha.157

3 years ago

0.1.1-alpha.156

3 years ago

0.1.1-alpha.155

3 years ago

0.1.1-alpha.163

3 years ago

0.1.1-alpha.162

3 years ago

0.1.1-alpha.161

3 years ago

0.1.1-alpha.160

3 years ago

0.1.1-alpha.168

3 years ago

0.1.1-alpha.167

3 years ago

0.1.1-alpha.166

3 years ago

0.1.1-alpha.165

3 years ago

0.1.1-alpha.164

3 years ago

0.1.1-alpha.149

3 years ago

0.1.1-alpha.148

3 years ago

0.1.1-alpha.147

3 years ago

0.1.1-alpha.146

3 years ago

0.1.1-alpha.152

3 years ago

0.1.1-alpha.151

3 years ago

0.1.1-alpha.150

3 years ago

0.1.1-alpha.154

3 years ago

0.1.1-alpha.153

3 years ago

0.1.1-alpha.141

3 years ago

0.1.1-alpha.140

3 years ago

0.1.1-alpha.145

3 years ago

0.1.1-alpha.144

3 years ago

0.1.1-alpha.143

3 years ago

0.1.1-alpha.142

3 years ago

0.1.1-alpha.139

3 years ago

0.1.1-alpha.127

3 years ago

0.1.1-alpha.126

3 years ago

0.1.1-alpha.125

3 years ago

0.1.1-alpha.124

3 years ago

0.1.1-alpha.123

3 years ago

0.1.1-alpha.122

3 years ago

0.1.1-alpha.121

3 years ago

0.1.1-alpha.120

3 years ago

0.1.1-alpha.129

3 years ago

0.1.1-alpha.128

3 years ago

0.1.1-alpha.130

3 years ago

0.1.1-alpha.138

3 years ago

0.1.1-alpha.137

3 years ago

0.1.1-alpha.136

3 years ago

0.1.1-alpha.135

3 years ago

0.1.1-alpha.134

3 years ago

0.1.1-alpha.133

3 years ago

0.1.1-alpha.132

3 years ago

0.1.1-alpha.131

3 years ago

0.1.1-alpha.116

3 years ago

0.1.1-alpha.115

3 years ago

0.1.1-alpha.114

3 years ago

0.1.1-alpha.113

3 years ago

0.1.1-alpha.112

3 years ago

0.1.1-alpha.111

3 years ago

0.1.1-alpha.119

3 years ago

0.1.1-alpha.118

3 years ago

0.1.1-alpha.117

3 years ago

0.1.1-alpha.59

4 years ago

0.1.1-alpha.80

4 years ago

0.1.1-alpha.77

4 years ago

0.1.1-alpha.76

4 years ago

0.1.1-alpha.75

4 years ago

0.1.1-alpha.74

4 years ago

0.1.1-alpha.73

4 years ago

0.1.1-alpha.72

4 years ago

0.1.1-alpha.71

4 years ago

0.1.1-alpha.70

4 years ago

0.1.1-alpha.79

4 years ago

0.1.1-alpha.78

4 years ago

0.1.1-alpha.66

4 years ago

0.1.1-alpha.65

4 years ago

0.1.1-alpha.64

4 years ago

0.1.1-alpha.63

4 years ago

0.1.1-alpha.62

4 years ago

0.1.1-alpha.61

4 years ago

0.1.1-alpha.60

4 years ago

0.1.1-alpha.69

4 years ago

0.1.1-alpha.68

4 years ago

0.1.1-alpha.67

4 years ago

0.1.1-alpha.105

3 years ago

0.1.1-alpha.104

3 years ago

0.1.1-alpha.103

3 years ago

0.1.1-alpha.102

3 years ago

0.1.1-alpha.101

3 years ago

0.1.1-alpha.100

3 years ago

0.1.1-alpha.99

3 years ago

0.1.1-alpha.98

3 years ago

0.1.1-alpha.97

3 years ago

0.1.1-alpha.96

3 years ago

0.1.1-alpha.109

3 years ago

0.1.1-alpha.95

3 years ago

0.1.1-alpha.108

3 years ago

0.1.1-alpha.94

3 years ago

0.1.1-alpha.107

3 years ago

0.1.1-alpha.93

3 years ago

0.1.1-alpha.106

3 years ago

0.1.1-alpha.92

4 years ago

0.1.1-alpha.91

4 years ago

0.1.1-alpha.90

4 years ago

0.1.1-alpha.110

3 years ago

0.1.1-alpha.88

4 years ago

0.1.1-alpha.87

4 years ago

0.1.1-alpha.86

4 years ago

0.1.1-alpha.85

4 years ago

0.1.1-alpha.84

4 years ago

0.1.1-alpha.83

4 years ago

0.1.1-alpha.82

4 years ago

0.1.1-alpha.81

4 years ago

0.1.1-alpha.89

4 years ago

0.1.1-alpha.55

4 years ago

0.1.1-alpha.54

4 years ago

0.1.1-alpha.53

4 years ago

0.1.1-alpha.52

4 years ago

0.1.1-alpha.51

4 years ago

0.1.1-alpha.50

4 years ago

0.1.1-alpha.58

4 years ago

0.1.1-alpha.57

4 years ago

0.1.1-alpha.56

4 years ago

0.1.1-alpha.49

4 years ago

0.1.1-alpha.48

4 years ago

0.1.1-alpha.47

4 years ago

0.1.1-alpha.46

4 years ago

0.1.1-alpha.45

4 years ago

0.1.1-alpha.33

4 years ago

0.1.1-alpha.32

4 years ago

0.1.1-alpha.31

4 years ago

0.1.1-alpha.30

4 years ago

0.1.1-alpha.39

4 years ago

0.1.1-alpha.38

4 years ago

0.1.1-alpha.37

4 years ago

0.1.1-alpha.36

4 years ago

0.1.1-alpha.35

4 years ago

0.1.1-alpha.34

4 years ago

0.1.1-alpha.44

4 years ago

0.1.1-alpha.43

4 years ago

0.1.1-alpha.42

4 years ago

0.1.1-alpha.41

4 years ago

0.1.1-alpha.40

4 years ago

0.1.1-alpha.29

4 years ago

0.1.1-alpha.28

4 years ago

0.1.1-alpha.27

4 years ago

0.1.1-alpha.26

4 years ago

0.1.1-alpha.25

4 years ago

0.1.1-alpha.11

4 years ago

0.1.1-alpha.10

4 years ago

0.1.1-alpha.19

4 years ago

0.1.1-alpha.18

4 years ago

0.1.1-alpha.17

4 years ago

0.1.1-alpha.16

4 years ago

0.1.1-alpha.15

4 years ago

0.1.1-alpha.14

4 years ago

0.1.1-alpha.13

4 years ago

0.1.1-alpha.12

4 years ago

0.1.1-alpha.8

4 years ago

0.1.1-alpha.7

4 years ago

0.1.1-alpha.9

4 years ago

0.1.1-alpha.22

4 years ago

0.1.1-alpha.21

4 years ago

0.1.1-alpha.20

4 years ago

0.1.1-alpha.2

4 years ago

0.1.1-alpha.4

4 years ago

0.1.1-alpha.3

4 years ago

0.1.1-alpha.6

4 years ago

0.1.1-alpha.5

4 years ago

0.1.1-alpha.24

4 years ago

0.1.1-alpha.23

4 years ago

0.1.1-alpha.1

4 years ago

0.1.1-alpha.0

4 years ago