1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "image": {
    "sizes": {
      "xsmall": "//placehold.dev.area17.com/image/78x78?, //placehold.dev.area17.com/image/156x156? 2x"
    },
    "width": 78,
    "height": 78,
    "ratio": "1:1",
    "alt": "Profile photo of Clifton Smith"
  },
  "name": "Clifton Smith",
  "aux": "Mercer Island,<br />WA",
  "href": "javascript:void(0)"
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="m-listing-card-small">
	{% if image %}
		<div class="m-listing-card-small__image">
			{% include 'components/atoms/image/image' with image only %}
		</div>
	{% endif %}

	<span class="m-listing-card-small__name">{{ name }}</span>
	<span class="m-listing-card-small__aux">{{ aux }}</span>

	{% if href %}
		<a href="{{ href }}" {{ behavior ? 'data-behavior="' ~ behavior ~ '"' }} {% for attr, value in actionAttributes %} {{attr}}="{{value}}" {% endfor %} class="m-listing-card-small__action" aria-label="View"></a>
	{% endif %}
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
.m-listing-card-small {
  position: relative;
  @include width-multi(
    (
      "xsmall": 3,
      "small": 3,
      medium: 2,
      large: 2,
      xlarge: 2,
      xxlarge: 2,
      xxxlarge: 2
    )
  );
  flex: 1;
  @include theme-contrast;
  background-color: var(--color--background);
  transition: background-color $timing--short $bezier--standard;
  padding: 24px;

  &__image {
    width: 78px;
    border-radius: 50%;
    overflow: hidden;
  }

  &__name,
  &__aux {
    display: block;
  }

  &__name {
    @include f-heading-1;
    &:not(:first-child) {
      padding-top: 16px;
    }
  }

  &__aux {
    &:not(:first-child) {
      padding-top: 8px;
    }
  }

  &__action {
    @include stretch;
    @include block-focus;
  }

  &:hover {
    @include theme-inverse;
  }
}