Moxi Design System

# Cards

# Selection Cards

The mx-selection-card component implements a toggle button within a card UI.

The mx-selection-card-group wrapper component is a flex container that ensures only one selection card is selected at a time. Additionally, if the name attribute is provided, then a hidden <input> element will be created for the sake of convenience. This allows selection cards to control the value of a form field without any additional JavaScript in the host application.

In addition to the label, description, and imageUrl props, the mx-selection-card component also provides label, description, and image slots if markup is needed.

<mx-selection-card-group name="template-type">
  <mx-selection-card
    label="Pre-built Template"
    description="Select this option to use and adapt a template that's been shared with you"
    value="existing"
  >
    <svg slot="image" width="60" height="61" viewBox="0 0 60 61" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M7.85156 13.0703V42.6016H52.1484V13.0703H7.85156ZM1.52344 12.0156C1.52344 9.10319 3.88444 6.74219 6.79688 6.74219H53.2031C56.1156 6.74219 58.4766 9.10319 58.4766 12.0156V43.6562C58.4766 46.5687 56.1156 48.9297 53.2031 48.9297H6.79688C3.88444 48.9297 1.52344 46.5687 1.52344 43.6562V12.0156Z" fill="currentColor"></path>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M36.4609 43.2949C37.8255 42.2033 39.8166 42.4245 40.9082 43.7891L49.3457 54.3359C50.4373 55.7005 50.2161 57.6916 48.8516 58.7832C47.487 59.8748 45.4959 59.6536 44.4043 58.2891L35.9668 47.7422C34.8752 46.3777 35.0964 44.3865 36.4609 43.2949Z" fill="currentColor"></path>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M23.5391 43.2949C24.9036 44.3865 25.1248 46.3777 24.0332 47.7422L15.5957 58.2891C14.5041 59.6536 12.513 59.8748 11.1484 58.7832C9.78389 57.6916 9.56265 55.7005 10.6543 54.3359L19.0918 43.7891C20.1834 42.4245 22.1745 42.2033 23.5391 43.2949Z" fill="currentColor"></path>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M20.5078 25.7266C22.2553 25.7266 23.6719 27.1432 23.6719 28.8906V35.2188C23.6719 36.9662 22.2553 38.3828 20.5078 38.3828C18.7603 38.3828 17.3438 36.9662 17.3438 35.2188V28.8906C17.3438 27.1432 18.7603 25.7266 20.5078 25.7266Z" fill="currentColor"></path>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M30 21.5078C31.7475 21.5078 33.1641 22.9244 33.1641 24.6719V35.2188C33.1641 36.9662 31.7475 38.3828 30 38.3828C28.2525 38.3828 26.8359 36.9662 26.8359 35.2188V24.6719C26.8359 22.9244 28.2525 21.5078 30 21.5078Z" fill="currentColor"></path>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M39.4922 17.2891C41.2397 17.2891 42.6562 18.7057 42.6562 20.4531V35.2188C42.6562 36.9662 41.2397 38.3828 39.4922 38.3828C37.7447 38.3828 36.3281 36.9662 36.3281 35.2188V20.4531C36.3281 18.7057 37.7447 17.2891 39.4922 17.2891Z" fill="currentColor"></path>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M30 0.414062C31.7475 0.414062 33.1641 1.83066 33.1641 3.57812V9.90625C33.1641 11.6537 31.7475 13.0703 30 13.0703C28.2525 13.0703 26.8359 11.6537 26.8359 9.90625V3.57812C26.8359 1.83066 28.2525 0.414062 30 0.414062Z" fill="currentColor"></path>
    </svg>
  </mx-selection-card>
  <mx-selection-card
    label="New Template"
    description="Select this option to build a new template from scratch"
    value="new"
  >
    <svg slot="image" width="60" height="61" viewBox="0 0 60 61" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M33.1641 3.57812C33.1641 1.83066 31.7475 0.414062 30 0.414062C28.2525 0.414062 26.8359 1.83066 26.8359 3.57812V6.74219H6.79688C3.88444 6.74219 1.52344 9.10319 1.52344 12.0156V43.6562C1.52344 46.5687 3.88444 48.9297 6.79688 48.9297H14.9793L10.6543 54.3359C9.56265 55.7005 9.78389 57.6916 11.1484 58.7832C12.513 59.8748 14.5041 59.6536 15.5957 58.2891L23.0832 48.9297H36.9168L44.4043 58.2891C45.4959 59.6536 47.487 59.8748 48.8516 58.7832C50.2161 57.6916 50.4373 55.7005 49.3457 54.3359L45.0207 48.9297H53.2031C56.1156 48.9297 58.4766 46.5687 58.4766 43.6562V12.0156C58.4766 9.10319 56.1156 6.74219 53.2031 6.74219H33.1641V3.57812ZM30 13.0703H7.85156V42.6016H21.5374C21.5555 42.6014 21.5736 42.6014 21.5916 42.6016H38.4084C38.4264 42.6014 38.4445 42.6014 38.4626 42.6016H52.1484V13.0703H30ZM44.2855 29.4583C44.4495 29.2231 44.5366 28.9429 44.5348 28.6562C44.5344 28.3704 44.4457 28.0917 44.2808 27.8583C44.1159 27.6248 43.8829 27.448 43.6137 27.352L39.0777 25.682L37.4078 21.1425C37.3089 20.8738 37.13 20.642 36.8952 20.4782C36.6604 20.3144 36.381 20.2266 36.0947 20.2266C35.8084 20.2266 35.529 20.3144 35.2942 20.4782C35.0594 20.642 34.8805 20.8738 34.7816 21.1425L33.1117 25.6785L28.5721 27.3484C28.3035 27.4473 28.0716 27.6262 27.9078 27.861C27.7441 28.0959 27.6562 28.3752 27.6562 28.6615C27.6562 28.9478 27.7441 29.2272 27.9078 29.462C28.0716 29.6968 28.3035 29.8757 28.5721 29.9746L33.109 31.6445L34.7834 36.1753C34.8823 36.444 35.0612 36.6758 35.296 36.8396C35.5308 37.0034 35.8102 37.0912 36.0964 37.0912C36.3827 37.0912 36.6621 37.0034 36.8969 36.8396C37.1317 36.6758 37.3106 36.444 37.4095 36.1753L39.0795 31.6393L43.619 29.9693C43.8886 29.872 44.1215 29.6934 44.2855 29.4583ZM41.0192 20.2188H39.6129C39.4265 20.2188 39.2476 20.1447 39.1158 20.0128C38.9839 19.8809 38.9098 19.7021 38.9098 19.5156C38.9098 19.3291 38.9839 19.1503 39.1158 19.0184C39.2476 18.8866 39.4265 18.8125 39.6129 18.8125H41.0192V17.4062C41.0192 17.2198 41.0933 17.0409 41.2251 16.9091C41.357 16.7772 41.5358 16.7031 41.7223 16.7031C41.9088 16.7031 42.0876 16.7772 42.2195 16.9091C42.3514 17.0409 42.4254 17.2198 42.4254 17.4062V18.8125H43.8317C44.0182 18.8125 44.197 18.8866 44.3289 19.0184C44.4607 19.1503 44.5348 19.3291 44.5348 19.5156C44.5348 19.7021 44.4607 19.8809 44.3289 20.0128C44.197 20.1447 44.0182 20.2188 43.8317 20.2188H42.4254V21.625C42.4254 21.8115 42.3514 21.9903 42.2195 22.1222C42.0876 22.254 41.9088 22.3281 41.7223 22.3281C41.5358 22.3281 41.357 22.254 41.2251 22.1222C41.0933 21.9903 41.0192 21.8115 41.0192 21.625V20.2188ZM46.6442 23.0312H47.3473C47.5338 23.0312 47.7126 23.1053 47.8445 23.2372C47.9764 23.3691 48.0504 23.5479 48.0504 23.7344C48.0504 23.9209 47.9764 24.0997 47.8445 24.2316C47.7126 24.3634 47.5338 24.4375 47.3473 24.4375H46.6442V25.1406C46.6442 25.3271 46.5701 25.5059 46.4383 25.6378C46.3064 25.7697 46.1276 25.8438 45.9411 25.8438C45.7546 25.8438 45.5758 25.7697 45.4439 25.6378C45.312 25.5059 45.2379 25.3271 45.2379 25.1406V24.4375H44.5348C44.3483 24.4375 44.1695 24.3634 44.0376 24.2316C43.9058 24.0997 43.8317 23.9209 43.8317 23.7344C43.8317 23.5479 43.9058 23.3691 44.0376 23.2372C44.1695 23.1053 44.3483 23.0312 44.5348 23.0312H45.2379V22.3281C45.2379 22.1416 45.312 21.9628 45.4439 21.8309C45.5758 21.6991 45.7546 21.625 45.9411 21.625C46.1276 21.625 46.3064 21.6991 46.4383 21.8309C46.5701 21.9628 46.6442 22.1416 46.6442 22.3281V23.0312Z" fill="currentColor"></path>
    </svg>
  </mx-selection-card>
  <!-- A hidden input will be added here (check dev tools). -->
</mx-selection-card-group>
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
East Coast

The Notorious B.I.G., Nas, Jay-Z, LL Cool J, Rakim

West Coast

Dr. Dre, Snoop Dogg, Ice Cube, Tupac, Kendrick Lamar

Selected coast: east

<mx-selection-card-group name="coast" value="east" @input="selectedCoast = $event.target.value">
  <mx-selection-card
    image-url="https://placehold.co/60"
    value="east"
  >
    <span slot="label">East Coast</span>
    <p slot="description">
      The Notorious B.I.G., Nas, Jay-Z, LL Cool J, Rakim
    </p>
  </mx-selection-card>
  <mx-selection-card
    image-url="https://placehold.co/60"
    value="west"
  >
    <span slot="label">West Coast</span>
    <p slot="description">
      Dr. Dre, Snoop Dogg, Ice Cube, Tupac, Kendrick Lamar
    </p>
  </mx-selection-card>
</mx-selection-card-group>
<p>Selected coast: {{ selectedCoast || '(none)' }}</p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# mx-selection-card

# Properties

Property Attribute Description Type Default
description description The description text to display below the label. This has no effect if using the "description" slot. string undefined
disabled disabled boolean false
elAriaLabel el-aria-label The aria-label attribute for the inner button element. string undefined
imageUrl image-url The URL for the card image. This has no effect if using the "image" slot. string undefined
label label The label text to display below the image. This has no effect if using the "label" slot. string undefined
selected selected boolean false
value value Only used inside a selection card group string undefined

# Events

Event Description Type
mxSelect When the button is clicked, this event is emitted. The CustomEvent.detail will be true or false depending on whether the card is now selected. If using a selection card group with a name, the group element will also then emit an input event with the selected value. CustomEvent<boolean>

# Dependencies

# Depends on

# Graph

graph TD;
  mx-selection-card --> mx-button
  style mx-selection-card fill:#f9f,stroke:#333,stroke-width:4px
1
2
3

If you are having trouble setting a prop or adding an event listener, refer to this page.

# mx-selection-card-group

# Properties

Property Attribute Description Type Default
name name If provided, a hidden input will be added with this name attribute. string undefined
value value The selected value. All child components must have a unique value prop. any undefined

If you are having trouble setting a prop or adding an event listener, refer to this page.

# Library Selection Cards

The mx-library-selection-card component is similar to the mx-selection-card component, but with some visual and functional differences. It does not have a visible button, though it is implemented as a toggle button for the sake of accessibility. It may also be used within an mx-selection-card-group.

The library selection card has a tag prop that can be used to display a tag below the image. To change the background color of the tag, set the --mds-color-tag CSS variable on the <mx-library-selection-card>.

Template 2™

Lorem ipsum dolor sit amet consectetur. Porttitor posuere consectetur 

<mx-selection-card-group name="template" value="pocari">
  <mx-library-selection-card
    tag="Buyer"
    image-url="https://picsum.photos/id/554/285/182"
    value="template-2"
    style="--mds-color-tag: var(--mds-color-warning)"
  >
    <span slot="label">Template 2&trade;</span>
    <p slot="description">
      Lorem ipsum dolor sit amet <i>consectetur</i>. Porttitor posuere consectetur 
    </p>
  </mx-library-selection-card>
  <mx-library-selection-card
    label="Pocari's Template"
    description="fringilla consequat id cursus tempor aenean. Justo habitasse proin aliquam cras sollicitudin in."
    image-url="https://picsum.photos/id/503/285/182"
    value="pocari"
  ></mx-library-selection-card>
</mx-selection-card-group>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# mx-library-selection-card

# Properties

Property Attribute Description Type Default
description description The description text to display below the label. This has no effect if using the "description" slot. string undefined
elAriaLabel el-aria-label The aria-label attribute for the inner button element. string undefined
imageUrl image-url The URL for the card image. This has no effect if using the "image" slot. string undefined
label label The label text to display below the image. This has no effect if using the "label" slot. string undefined
selected selected boolean false
tag tag Text for the tag shown below the image (optional). string undefined
value value Only used inside a selection card group string undefined

# Events

Event Description Type
mxSelect When the card is clicked, this event is emitted. The CustomEvent.detail will be true or false depending on whether the card is now selected. If using a selection card group with a name, the group element will also then emit an input event with the selected value. CustomEvent<boolean>

If you are having trouble setting a prop or adding an event listener, refer to this page.

← Charts →