diff --git a/majak_uistyleguide/templates/patterns/atoms/figure/figure.html b/majak_uistyleguide/templates/patterns/atoms/figure/figure.html new file mode 100644 index 0000000000000000000000000000000000000000..abe270c67ad26d1c5aea904879b4b2e7f2e7abdc --- /dev/null +++ b/majak_uistyleguide/templates/patterns/atoms/figure/figure.html @@ -0,0 +1,12 @@ +<figure class="flex flex-col gap-2 max-w-max p-4"> + <img + src="{{ source }}" + alt="{{ alt }}" + > + + {% if caption %} + <figcaption + class="text-grey-250 italic text-sm" + >{{ caption }}</figcaption> + {% endif %} +</figure> diff --git a/majak_uistyleguide/templates/patterns/atoms/figure/figure.yaml b/majak_uistyleguide/templates/patterns/atoms/figure/figure.yaml new file mode 100644 index 0000000000000000000000000000000000000000..78575f8cef780276de13bb2e4a3ce6ab9bcd2a80 --- /dev/null +++ b/majak_uistyleguide/templates/patterns/atoms/figure/figure.yaml @@ -0,0 +1,4 @@ +context: + source: https://picsum.photos/536/354 + alt: 'Picture of Elephant' + caption: 'Picture of Elephant'