grommet
Version:
focus on the essential experience
88 lines • 2.67 kB
JavaScript
import React from 'react';
import { Avatar, Box, Paragraph } from 'grommet';
export var Sizes = function Sizes() {
var src = '//s.gravatar.com/avatar/b7fb138d53ba0f573212ccce38a7c43b?s=80';
return (
/*#__PURE__*/
// Uncomment <Grommet> lines when using outside of storybook
// <Grommet theme={grommet}>
React.createElement(Box, null, /*#__PURE__*/React.createElement(Box, {
direction: "row",
pad: "large",
gap: "small"
}, /*#__PURE__*/React.createElement(Avatar, {
size: "small",
src: src
}), /*#__PURE__*/React.createElement(Avatar, {
size: "medium",
src: src
}), /*#__PURE__*/React.createElement(Avatar, {
size: "large",
src: src
}), /*#__PURE__*/React.createElement(Avatar, {
size: "xlarge",
src: src
}), /*#__PURE__*/React.createElement(Avatar, {
size: "2xl",
src: src
})), /*#__PURE__*/React.createElement(Box, {
direction: "row",
pad: "large",
align: "center",
gap: "small"
}, /*#__PURE__*/React.createElement(Avatar, {
background: "dark-2",
size: "small"
}, "S"), /*#__PURE__*/React.createElement(Avatar, {
background: "dark-2",
size: "medium"
}, "LS"), /*#__PURE__*/React.createElement(Avatar, {
background: "dark-2",
size: "large"
}, "JF"), /*#__PURE__*/React.createElement(Avatar, {
background: "dark-2",
size: "xlarge"
}, "SY"), /*#__PURE__*/React.createElement(Avatar, {
background: "dark-2",
size: "2xl"
}, "SOS")), /*#__PURE__*/React.createElement(Box, {
margin: {
vertical: 'xlarge'
}
}, /*#__PURE__*/React.createElement(Paragraph, {
textAlign: "center",
align: "center"
}, "Larger Avatars"), /*#__PURE__*/React.createElement(Box, {
direction: "row",
pad: "large",
align: "center",
gap: "small"
}, /*#__PURE__*/React.createElement(Avatar, {
background: "dark-2",
size: "3xl"
}, "3xl"), /*#__PURE__*/React.createElement(Avatar, {
background: "dark-2",
size: "4xl"
}, "4xl"), /*#__PURE__*/React.createElement(Avatar, {
background: "dark-2",
size: "5xl"
}, "5xl")), /*#__PURE__*/React.createElement(Box, {
direction: "row",
pad: "large",
gap: "small"
}, /*#__PURE__*/React.createElement(Avatar, {
size: "3xl",
src: src
}), /*#__PURE__*/React.createElement(Avatar, {
size: "4xl",
src: src
}), /*#__PURE__*/React.createElement(Avatar, {
size: "5xl",
src: src
}))))
// </Grommet>
);
};
export default {
title: 'Visualizations/Avatar/Sizes'
};