add subheading

majak_uistyleguide/templates/patterns/molecules/candidates/candidate_primary_box.html

 <ui-candidate-primary-box
   name="{{ name }}"
+  subheading="{{ subheading }}"
   position="{{ position }}"
   description="{{ description }}"
   url="{{ url }}"

majak_uistyleguide/templates/patterns/molecules/candidates/candidate_primary_box.yaml

 context:
   name: 'Ing. Mgr. et Mgr. Mikuláš Peksa'
+  subheading: 'Podnadpis'
   image_source: '../../../../../static/images/mikulas-arrow.png'
   position: 'Europoslanec'
   description: 'Mikuláš Peksa (18. 6. 1986) vystudoval fyziku na Matematicko-fyzikální fakultě Univerzity Karlovy. V Německu pracoval jako správce Linuxových serverů a programátor v C++. Po návratu do Čech byl v roce 2017 zvolen poslancem PSP ČR, následně v roce 2019 poslancem Evropského parlamentu. Věnuje se zejména tématům spojeným s fungováním společnosti v digitálním věku.'

majak_uistyleguide/templates/patterns/organisms/header/simple_header.html

@@ -52,7 +52,7 @@
               {% if description %}
                 <p
                   class="
-                    text-lg leading-7 pr-4
+                    text-lg leading-7 pr-4 whitespace-pre-line
 
                     xl:pr-0
 
@@ -60,9 +60,7 @@
 
                     {% block description_classes %}{% endblock %}
                   "
-                >
-                  {{ description }}
-                </p>
+                >{{ description }}</p>
               {% endif %}
             {% endblock %}
 

majak_uistyleguide/templates/patterns/templates/main/program/program.html

@@ -6,7 +6,7 @@
     :sync-location="true"
     v-slot="{ isCurrentView, toggleView }"
   >
-    {% include 'patterns/organisms/header/simple_header_with_ui_switch.html' with title='Program' ui_switch_iterable=programs %}
+    {% include 'patterns/organisms/header/simple_header_with_ui_switch.html' with title='Program' description='Description' ui_switch_iterable=programs %}
 
     <main role="main">
       {% for program in programs %}

src/js/components/CandidatePrimaryBox.vue

@@ -23,6 +23,10 @@
             {{ name }}
           </h2>
 
+          <h3 class="head-6xl mb-5" v-if="subheading">
+            {{ subheading }}
+          </h3>
+
           <p v-if="position" class="font-bold text-lg mt-[-0.5rem] mb-3">
             {{ position }}
           </p>
@@ -45,9 +49,9 @@
             </li>
           </ul>
 
-          <p class="text-lg mb-8 lg:mb-16">
-            {{ description }}
-          </p>
+          <div class="text-lg mb-8 lg:mb-16">
+            <div v-html="description"></div>
+          </div>
         </div>
 
         <div class="flex justify-start">
@@ -99,7 +103,7 @@
 <script>
 export default {
   name: "CandidatePrimaryBox",
-  props: ["name", "position", "description", "url", "imageSource", "socialLinks"],
+  props: ["name", "subheading", "position", "description", "url", "imageSource", "socialLinks"],
   mounted () {
     var intersectionOptions = {
       rootMargin: '0px',