0.1.1-alpha.195 • Published 9 months ago

@gemeente-denhaag/dynamic-content v0.1.1-alpha.195

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

Dynamic content

An image list card highlights people or other subjects including a photo in a list.

When to use

Use the image list card when emphasis is placed on the photo and is placed in a list with several of this card. For example, to highlight people with their profession.

Alternatives and related components

Use navigation link groups to only show a list of links instead of a link with a photo.

Types

For now, there are two types of image list cards:

  1. Person
  2. Political parties

Of course, several variants are possible. The important thing to know is that the card always contains a photo that gets a lot of attention, a title and a short description.

Anatomy

A image list card consist of:

  • Image (16:9): photo of the subject or person;
  • Title: name of the subject or person;
  • Description: additional information;
  • Arrow icon: navigates to a page;

(Interactive) state

The image list card contains the states normal, hover and focus.

Design properties

Typography

  • Title: TheMix/xl/700
  • Description: TheSans/md/400

Colors

  • Title: text color Grey/5
  • Description: text color Grey/4
  • Arrow icon: svg color Blue/5

Interactive states

  • Hover: on desktop the arrow icon is visible
  • Focus: arrow icon border color Ocher/5

Structure

  • Title: margin-top 16px
  • Arrow icon: margin-left 24px

Accessibility

Content guidelines

Person

  • Only show the first and last name of the person in the title.
  • The description must contain the person’s profession.

Political party

  • Only show the name of the political party in the title.
  • The description must contain the information you can find on the page when you click the card.

Best practices

  • On screen sizes where the hover is not possible, the arrow icon should already be shown.
  • Keep the information in the card as short as possible.
  • The card must be immediately scannable.
  • The image should show what the card is about.
  • The cards should be used as an alternative to the navigation link group when you also want to show photos.
@infinitebrahmanuniverse/nolb-_gem@everything-registry/sub-chunk-355@gemeente-denhaag/storybook
0.1.1-alpha.195

9 months ago

0.1.1-alpha.194

9 months ago

0.1.1-alpha.193

9 months ago

0.1.1-alpha.192

9 months ago

0.1.1-alpha.191

9 months ago

0.1.1-alpha.190

9 months ago

0.1.1-alpha.189

9 months ago

0.1.1-alpha.188

9 months ago

0.1.1-alpha.187

9 months ago

0.1.1-alpha.185

9 months ago

0.1.1-alpha.186

9 months ago

0.1.1-alpha.184

10 months ago

0.1.1-alpha.183

10 months ago

0.1.1-alpha.182

10 months ago

0.1.1-alpha.181

11 months ago

0.1.1-alpha.180

11 months ago

0.1.1-alpha.179

11 months ago

0.1.1-alpha.169

1 year ago

0.1.1-alpha.168

1 year ago

0.1.1-alpha.167

1 year ago

0.1.1-alpha.166

1 year ago

0.1.1-alpha.165

1 year ago

0.1.1-alpha.174

12 months ago

0.1.1-alpha.173

12 months ago

0.1.1-alpha.172

1 year ago

0.1.1-alpha.171

1 year ago

0.1.1-alpha.170

1 year ago

0.1.1-alpha.178

11 months ago

0.1.1-alpha.177

11 months ago

0.1.1-alpha.176

11 months ago

0.1.1-alpha.175

12 months ago

0.1.1-alpha.164

1 year ago

0.1.1-alpha.163

1 year ago

0.1.1-alpha.162

1 year ago

0.1.1-alpha.161

1 year ago

0.1.1-alpha.160

1 year ago

0.1.1-alpha.159

1 year ago

0.1.1-alpha.158

1 year ago

0.1.1-alpha.157

1 year ago

0.1.1-alpha.156

1 year ago

0.1.1-alpha.155

1 year ago

0.1.1-alpha.154

1 year ago

0.1.1-alpha.153

1 year ago

0.1.1-alpha.152

1 year ago

0.1.1-alpha.151

1 year ago

0.1.1-alpha.150

1 year ago

0.1.1-alpha.149

1 year ago

0.1.1-alpha.148

1 year ago

0.1.1-alpha.147

1 year ago

0.1.1-alpha.146

1 year ago

0.1.1-alpha.145

1 year ago

0.1.1-alpha.144

1 year ago

0.1.1-alpha.143

1 year ago

0.1.1-alpha.142

1 year ago

0.1.1-alpha.141

1 year ago

0.1.1-alpha.140

1 year ago

0.1.1-alpha.139

1 year ago

0.1.1-alpha.138

2 years ago

0.1.1-alpha.137

2 years ago

0.1.1-alpha.136

2 years ago

0.1.1-alpha.135

2 years ago

0.1.1-alpha.134

2 years ago

0.1.1-alpha.133

2 years ago

0.1.1-alpha.127

2 years ago

0.1.1-alpha.126

2 years ago

0.1.1-alpha.125

2 years ago

0.1.1-alpha.124

2 years ago

0.1.1-alpha.123

2 years ago

0.1.1-alpha.122

2 years ago

0.1.1-alpha.121

2 years ago

0.1.1-alpha.120

2 years ago

0.1.1-alpha.129

2 years ago

0.1.1-alpha.128

2 years ago

0.1.1-alpha.130

2 years ago

0.1.1-alpha.132

2 years ago

0.1.1-alpha.131

2 years ago

0.1.1-alpha.105

2 years ago

0.1.1-alpha.104

2 years ago

0.1.1-alpha.103

2 years ago

0.1.1-alpha.102

2 years ago

0.1.1-alpha.101

2 years ago

0.1.1-alpha.100

2 years ago

0.1.1-alpha.99

2 years ago

0.1.1-alpha.98

2 years ago

0.1.1-alpha.97

2 years ago

0.1.1-alpha.96

2 years ago

0.1.1-alpha.109

2 years ago

0.1.1-alpha.95

2 years ago

0.1.1-alpha.108

2 years ago

0.1.1-alpha.94

2 years ago

0.1.1-alpha.107

2 years ago

0.1.1-alpha.93

2 years ago

0.1.1-alpha.106

2 years ago

0.1.1-alpha.92

2 years ago

0.1.1-alpha.116

2 years ago

0.1.1-alpha.115

2 years ago

0.1.1-alpha.114

2 years ago

0.1.1-alpha.113

2 years ago

0.1.1-alpha.112

2 years ago

0.1.1-alpha.111

2 years ago

0.1.1-alpha.110

2 years ago

0.1.1-alpha.119

2 years ago

0.1.1-alpha.118

2 years ago

0.1.1-alpha.117

2 years ago

0.1.1-alpha.91

2 years ago

0.1.1-alpha.90

2 years ago

0.1.1-alpha.88

2 years ago

0.1.1-alpha.87

2 years ago

0.1.1-alpha.86

2 years ago

0.1.1-alpha.85

2 years ago

0.1.1-alpha.84

2 years ago

0.1.1-alpha.83

2 years ago

0.1.1-alpha.82

2 years ago

0.1.1-alpha.81

2 years ago

0.1.1-alpha.89

2 years ago

0.1.1-alpha.80

2 years ago

0.1.1-alpha.77

2 years ago

0.1.1-alpha.76

2 years ago

0.1.1-alpha.79

2 years ago

0.1.1-alpha.78

2 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.69

3 years ago

0.1.1-alpha.68

3 years ago

0.1.1-alpha.67

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.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.59

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.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.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.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.30

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.24

3 years ago

0.1.1-alpha.23

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.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.11

3 years ago

0.1.1-alpha.10

3 years ago

0.1.1-alpha.9

3 years ago

0.1.1-alpha.8

3 years ago

0.1.1-alpha.7

3 years ago

0.1.1-alpha.6

3 years ago

0.1.1-alpha.5

3 years ago

0.1.1-alpha.4

3 years ago

0.1.1-alpha.3

3 years ago

0.1.1-alpha.2

3 years ago

0.1.1-alpha.1

3 years ago

0.1.1-alpha.0

3 years ago