Stack Group

Stack Group can be used to overlay various components.

Example

Image Description
Image Description
Image Description
Image Description
Image Description
vue
<template>
 <StackGroup>
  <StackGroupItem>
   <Avatar
    circle
    img-src="https://reqres.in/img/faces/1-image.jpg"
    img-alt="Image Description"
   />
  </StackGroupItem>
  <StackGroupItem>
   <Avatar
    circle
    img-src="https://reqres.in/img/faces/2-image.jpg"
    img-alt="Image Description"
   />
  </StackGroupItem>
  <StackGroupItem>
   <Avatar
    circle
    img-src="https://reqres.in/img/faces/3-image.jpg"
    img-alt="Image Description"
   />
  </StackGroupItem>
  <StackGroupItem>
   <Avatar
    circle
    img-src="https://reqres.in/img/faces/4-image.jpg"
    img-alt="Image Description"
   />
  </StackGroupItem>
  <StackGroupItem>
   <Avatar
    circle
    img-src="https://reqres.in/img/faces/5-image.jpg"
    img-alt="Image Description"
   />
  </StackGroupItem>
 </StackGroup>
</template>

Overlap Size

Image Description
Image Description
Image Description
Image Description
Image Description
vue
<template>
 <StackGroup overlap="2em">
  <StackGroupItem>
   <Avatar
    circle
    img-src="https://reqres.in/img/faces/1-image.jpg"
    img-alt="Image Description"
   />
  </StackGroupItem>
  <StackGroupItem>
   <Avatar
    circle
    img-src="https://reqres.in/img/faces/2-image.jpg"
    img-alt="Image Description"
   />
  </StackGroupItem>
  <StackGroupItem>
   <Avatar
    circle
    img-src="https://reqres.in/img/faces/3-image.jpg"
    img-alt="Image Description"
   />
  </StackGroupItem>
  <StackGroupItem>
   <Avatar
    circle
    img-src="https://reqres.in/img/faces/4-image.jpg"
    img-alt="Image Description"
   />
  </StackGroupItem>
  <StackGroupItem>
   <Avatar
    circle
    img-src="https://reqres.in/img/faces/5-image.jpg"
    img-alt="Image Description"
   />
  </StackGroupItem>
 </StackGroup>
</template>

Hover Scale

Image Description
Image Description
Image Description
Image Description
Image Description
vue
<template>
 <StackGroup :hover-scale="2.5">
  <StackGroupItem>
   <Avatar
    circle
    img-src="https://reqres.in/img/faces/1-image.jpg"
    img-alt="Image Description"
   />
  </StackGroupItem>
  <StackGroupItem>
   <Avatar
    circle
    img-src="https://reqres.in/img/faces/2-image.jpg"
    img-alt="Image Description"
   />
  </StackGroupItem>
  <StackGroupItem>
   <Avatar
    circle
    img-src="https://reqres.in/img/faces/3-image.jpg"
    img-alt="Image Description"
   />
  </StackGroupItem>
  <StackGroupItem>
   <Avatar
    circle
    img-src="https://reqres.in/img/faces/4-image.jpg"
    img-alt="Image Description"
   />
  </StackGroupItem>
  <StackGroupItem>
   <Avatar
    circle
    img-src="https://reqres.in/img/faces/5-image.jpg"
    img-alt="Image Description"
   />
  </StackGroupItem>
 </StackGroup>
</template>

See Also

Status indicator

Icon box

Avatar

Rating

Icons

Images