Components AI — A new way to explore generative design systems

Dean Blacc

London, England

Avatar

Wrapper

Color

Background

Size

Padding

Border Width

Border Style

Box Shadow

Color

Inset

Offset X

Offset Y

Blur

Spread

⌜

⌝

⌞

⌟

Image

Color

Border Width

Border Style

⌜

⌝

⌞

⌟

Overlap

Js


    import React from 'react'

    function Avatar({ src, alt, ...props }) {
      return (
        <div
          style={{"color":"#d0fe73","maxWidth":63,"backgroundColor":"red","borderWidth":0,"borderStyle":"none","borderColor":"currentColor","height":"auto","width":"auto","padding":0,"boxShadow":"7px 3px 2px 13px hsla(0, 0%, 0%, 0.25)","borderRadius":"15% 15% 15% 15% / 15% 15% 15% 15%"}}
        >
          <img
            style={{"position":"relative","display":"block","width":"63px","height":"63px","borderWidth":"3px","borderStyle":"none","borderColor":"#d0fe73","borderRadius":"13% 13% 13% 13% / 13% 13% 13% 13%"}}
            {...props}
          />
        </div>
      )
    }

    export { Avatar }