Skeleton — Component Storybook

LIVE PREVIEW 3

skeleton(variant=text, width=200px, height=1rem)

skeleton(variant=circle, width=3rem, height=3rem)

skeleton(variant=rect, width=100%, height=6rem)

USAGE

template

{%{% endverbatim %} load theme_components {% verbatim %}%}

{%{% endverbatim %} theme_{{ name }}{% for p in required_context %} {{ p.name }}{% endfor %}{% for p in optional_context %} {{ p.name }}={{ p.default|default:"..." }}{% endfor %} {% verbatim %}%}

PROPS — OPTIONAL 5

Name	Type	Default
`variant`	`str`	text
`width`	`str`	100%
`height`	`str`	1rem
`css_prefix`	`str`	—
`attrs`	`dict`	—

CSS VARIABLES 4

--color-surface --color-surface-hover --muted --radius

TEMPLATE SOURCE

skeleton.html

<div class="{{ css_prefix }}skeleton {{ css_prefix }}skeleton-{{ variant }} {% if attrs.class %}{{ attrs.class }}{% endif %}"
     aria-hidden="true"
     style="width: {{ width }}; height: {{ height }}"
     {% if attrs.id %}id="{{ attrs.id }}"{% endif %}>
</div>