0.1.1-alpha.274 • Published 9 months ago

@gemeente-denhaag/card-news v0.1.1-alpha.274

Weekly downloads
-
License
EUPL-1.2
Repository
github
Last release
9 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.274

9 months ago

0.1.1-alpha.273

9 months ago

0.1.1-alpha.272

9 months ago

0.1.1-alpha.271

9 months ago

0.1.1-alpha.270

9 months ago

0.1.1-alpha.269

9 months ago

0.1.1-alpha.268

9 months ago

0.1.1-alpha.267

9 months ago

0.1.1-alpha.266

9 months ago

0.1.1-alpha.265

9 months ago

0.1.1-alpha.264

9 months ago

0.1.1-alpha.263

10 months ago

0.1.1-alpha.262

11 months ago

0.1.1-alpha.261

11 months ago

0.1.1-alpha.260

11 months ago

0.1.1-alpha.259

11 months ago

0.1.1-alpha.258

11 months ago

0.1.1-alpha.248

1 year ago

0.1.1-alpha.247

1 year ago

0.1.1-alpha.246

1 year ago

0.1.1-alpha.245

1 year ago

0.1.1-alpha.244

1 year ago

0.1.1-alpha.249

1 year ago

0.1.1-alpha.251

1 year ago

0.1.1-alpha.250

1 year ago

0.1.1-alpha.257

11 months ago

0.1.1-alpha.256

11 months ago

0.1.1-alpha.255

11 months ago

0.1.1-alpha.254

12 months ago

0.1.1-alpha.253

1 year ago

0.1.1-alpha.252

1 year ago

0.1.1-alpha.243

1 year ago

0.1.1-alpha.242

1 year ago

0.1.1-alpha.241

1 year ago

0.1.1-alpha.240

1 year ago

0.1.1-alpha.239

1 year ago

0.1.1-alpha.238

1 year ago

0.1.1-alpha.237

1 year ago

0.1.1-alpha.236

1 year ago

0.1.1-alpha.235

1 year ago

0.1.1-alpha.234

1 year ago

0.1.1-alpha.233

1 year ago

0.1.1-alpha.232

1 year ago

0.1.1-alpha.231

1 year ago

0.1.1-alpha.230

1 year ago

0.1.1-alpha.229

1 year ago

0.1.1-alpha.228

1 year ago

0.1.1-alpha.227

1 year ago

0.1.1-alpha.226

1 year ago

0.1.1-alpha.225

1 year ago

0.1.1-alpha.224

1 year ago

0.1.1-alpha.223

1 year ago

0.1.1-alpha.222

1 year ago

0.1.1-alpha.221

1 year 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

2 years ago

0.1.1-alpha.173

2 years ago

0.1.1-alpha.172

2 years ago

0.1.1-alpha.171

2 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

2 years ago

0.1.1-alpha.169

2 years ago

0.1.1-alpha.159

2 years ago

0.1.1-alpha.158

2 years ago

0.1.1-alpha.157

2 years ago

0.1.1-alpha.156

2 years ago

0.1.1-alpha.155

2 years ago

0.1.1-alpha.163

2 years ago

0.1.1-alpha.162

2 years ago

0.1.1-alpha.161

2 years ago

0.1.1-alpha.160

2 years ago

0.1.1-alpha.168

2 years ago

0.1.1-alpha.167

2 years ago

0.1.1-alpha.166

2 years ago

0.1.1-alpha.165

2 years ago

0.1.1-alpha.164

2 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

3 years ago

0.1.1-alpha.80

3 years ago

0.1.1-alpha.77

3 years ago

0.1.1-alpha.76

3 years ago

0.1.1-alpha.75

3 years ago

0.1.1-alpha.74

3 years ago

0.1.1-alpha.73

3 years ago

0.1.1-alpha.72

3 years ago

0.1.1-alpha.71

3 years ago

0.1.1-alpha.70

3 years ago

0.1.1-alpha.79

3 years ago

0.1.1-alpha.78

3 years ago

0.1.1-alpha.66

3 years ago

0.1.1-alpha.65

3 years ago

0.1.1-alpha.64

3 years ago

0.1.1-alpha.63

3 years ago

0.1.1-alpha.62

3 years ago

0.1.1-alpha.61

3 years ago

0.1.1-alpha.60

3 years ago

0.1.1-alpha.69

3 years ago

0.1.1-alpha.68

3 years ago

0.1.1-alpha.67

3 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

3 years ago

0.1.1-alpha.91

3 years ago

0.1.1-alpha.90

3 years ago

0.1.1-alpha.110

3 years ago

0.1.1-alpha.88

3 years ago

0.1.1-alpha.87

3 years ago

0.1.1-alpha.86

3 years ago

0.1.1-alpha.85

3 years ago

0.1.1-alpha.84

3 years ago

0.1.1-alpha.83

3 years ago

0.1.1-alpha.82

3 years ago

0.1.1-alpha.81

3 years ago

0.1.1-alpha.89

3 years ago

0.1.1-alpha.55

3 years ago

0.1.1-alpha.54

3 years ago

0.1.1-alpha.53

3 years ago

0.1.1-alpha.52

3 years ago

0.1.1-alpha.51

3 years ago

0.1.1-alpha.50

3 years ago

0.1.1-alpha.58

3 years ago

0.1.1-alpha.57

3 years ago

0.1.1-alpha.56

3 years ago

0.1.1-alpha.49

3 years ago

0.1.1-alpha.48

3 years ago

0.1.1-alpha.47

3 years ago

0.1.1-alpha.46

3 years ago

0.1.1-alpha.45

3 years ago

0.1.1-alpha.33

3 years ago

0.1.1-alpha.32

3 years ago

0.1.1-alpha.31

3 years ago

0.1.1-alpha.30

3 years ago

0.1.1-alpha.39

3 years ago

0.1.1-alpha.38

3 years ago

0.1.1-alpha.37

3 years ago

0.1.1-alpha.36

3 years ago

0.1.1-alpha.35

3 years ago

0.1.1-alpha.34

3 years ago

0.1.1-alpha.44

3 years ago

0.1.1-alpha.43

3 years ago

0.1.1-alpha.42

3 years ago

0.1.1-alpha.41

3 years ago

0.1.1-alpha.40

3 years ago

0.1.1-alpha.29

3 years ago

0.1.1-alpha.28

3 years ago

0.1.1-alpha.27

3 years ago

0.1.1-alpha.26

3 years ago

0.1.1-alpha.25

3 years ago

0.1.1-alpha.11

3 years ago

0.1.1-alpha.10

3 years ago

0.1.1-alpha.19

3 years ago

0.1.1-alpha.18

3 years ago

0.1.1-alpha.17

3 years ago

0.1.1-alpha.16

3 years ago

0.1.1-alpha.15

3 years ago

0.1.1-alpha.14

3 years ago

0.1.1-alpha.13

3 years ago

0.1.1-alpha.12

3 years ago

0.1.1-alpha.8

3 years ago

0.1.1-alpha.7

3 years ago

0.1.1-alpha.9

3 years ago

0.1.1-alpha.22

3 years ago

0.1.1-alpha.21

3 years ago

0.1.1-alpha.20

3 years ago

0.1.1-alpha.2

3 years ago

0.1.1-alpha.4

3 years ago

0.1.1-alpha.3

3 years ago

0.1.1-alpha.6

3 years ago

0.1.1-alpha.5

3 years ago

0.1.1-alpha.24

3 years ago

0.1.1-alpha.23

3 years ago

0.1.1-alpha.1

3 years ago

0.1.1-alpha.0

3 years ago