diff --git a/majak_uistyleguide/templates/patterns/molecules/boxes/flip_card_box.html b/majak_uistyleguide/templates/patterns/molecules/boxes/flip_card_box.html index 0bae5770d718a31ebed0342cb90b00bbf57283a5..9299fc028fe7656dddb5bee891c7808fa008b267 100644 --- a/majak_uistyleguide/templates/patterns/molecules/boxes/flip_card_box.html +++ b/majak_uistyleguide/templates/patterns/molecules/boxes/flip_card_box.html @@ -27,9 +27,25 @@ " >{{ title }}</h1> + {% if icon_url %} + {{ icon_url }} + <img + class=" + absolute w-32 h-32 bottom-8 right-8 + " + src="{{ icon_url }}" + > + {% endif %} + <div class=" - absolute bottom-4 right-4 block text-white opacity-75 text-right leading-5 font-condensed + {% if image_url %} + right-4 bottom-4 text-right + {% elif icon_url %} + bottom-8 left-8 text-left + {% endif %} + + absolute block text-white opacity-75 leading-5 font-condensed md:hidden " diff --git a/majak_uistyleguide/templates/patterns/molecules/boxes/flip_card_box.yaml b/majak_uistyleguide/templates/patterns/molecules/boxes/flip_card_box.yaml index 942a18caa8d3190daedb39d9646e199ae7b9cecc..59052d6572ec5d25eaec5e965ff2fdfe6ec056e0 100644 --- a/majak_uistyleguide/templates/patterns/molecules/boxes/flip_card_box.yaml +++ b/majak_uistyleguide/templates/patterns/molecules/boxes/flip_card_box.yaml @@ -3,6 +3,7 @@ context: Staň se členkou nebo členem image_url: '../../../../../static/images/onboarding/member.png' + icon_url: '' content: |- <h2> Chceš se aktivně zapojit do politiky? Rád bys byl součástí pozitivních změn? Staň se naším členem! diff --git a/majak_uistyleguide/templates/patterns/organisms/cards/flip_card_list.html b/majak_uistyleguide/templates/patterns/organisms/cards/flip_card_list.html index 162341f68828aaab8758e5ce0ad0790fc45de1ae..0b877a6c98568e4e0d938453897a7b7f0b745a03 100644 --- a/majak_uistyleguide/templates/patterns/organisms/cards/flip_card_list.html +++ b/majak_uistyleguide/templates/patterns/organisms/cards/flip_card_list.html @@ -1,5 +1,5 @@ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 content-stretch gap-4"> {% for card in cards %} - {% include 'patterns/molecules/boxes/flip_card_box.html' with title=card.title image_url=card.image_url content=card.content button_text=card.button_text %} + {% include 'patterns/molecules/boxes/flip_card_box.html' with title=card.title image_url=card.image_url icon_url=card.icon_url content=card.content button_text=card.button_text %} {% endfor %} </div> diff --git a/majak_uistyleguide/templates/patterns/organisms/cards/flip_card_list.yaml b/majak_uistyleguide/templates/patterns/organisms/cards/flip_card_list.yaml index 6884696e40af56de35377dcbbb197822c86957f3..4081a3936f74b253f921896e95b5861181938dda 100644 --- a/majak_uistyleguide/templates/patterns/organisms/cards/flip_card_list.yaml +++ b/majak_uistyleguide/templates/patterns/organisms/cards/flip_card_list.yaml @@ -4,7 +4,7 @@ context: title: |- Staň se členkou nebo členem - image_url: '../../../../../static/images/onboarding/member.webp' + icon_url: '../../../../../static/images/onboarding/member.webp' content: |- <h2> Chceš se aktivně zapojit do politiky? Rád bys byl součástí pozitivních změn? Staň se naším členem!