styling fixed with proper class cascade

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue

@@ -2,11 +2,11 @@
 
    <person-render-box
       :options="{
-               addInfo : false,
+               addInfo : true,
                addId : true,
                addEntity: false,
                addLink: false,
-               addAltNames: false,
+               addAltNames: true,
                addAge : false,
                hLevel : 1
             }"

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue

@@ -1,4 +1,7 @@
 <template>
+<div class="flex-table mb-3">
+    <div class="item-bloc">
+    <section class="chill-entity entity-person">
     <!-- ENTIRE RENDER_BOX -->
     <div class="item-row entity-bloc">
 
@@ -7,7 +10,7 @@
             <div class="entity-label">
 
                 <!-- NAME TAG -->
-                <div class="denomination **h_level**">
+                <div class="denomination h3">
                 
                     <!-- NAME IF ADD LINK AND PERMISSION GRANTED -->
                     <a v-if="this.options.addLink ==  true" href="#">
@@ -40,12 +43,13 @@
 
                 <!-- BIRTHDATE / DEATHDATE AND AGE -->
                 <p v-if="this.options.addInfo == true" class="moreinfo">
-                    <i class="fa fa-fw **gender**" title="**gender title**"></i>
+                    <i :class="'fa fa-fw' + this.gender" title="{{this.gender}}"></i>
                     <time datetime="13/05/1867" title="**birthdate**">
                         {{ participation.person.birthdate }}
                     </time>
                     <span class="age">{{ participation.person.age }}</span>
                 </p>
+                <p>{{this.gender}}</p>
                 <!-- END BIRTH/DEATH AND AGE -->
 
             </div>
@@ -61,10 +65,15 @@
 
                 <!-- PHONENUMBER -->
                 <li>
-                    <i class="fa fa-li fa-mobile"></i><a href="#">{{ participation.person.mobilenumber }}</a>
-                    <i class="fa fa-li fa-phone"></i>
-                    <a href="#">{{ participation.person.phonenumber }}</a>
-                    <span class="chill-no-data-statement">**no phonenumber**</span>
+                    <div v-if="this.participation.person.mobilenumber">
+                        <i class="fa fa-li fa-mobile"></i>
+                        <a href="#">{{ participation.person.mobilenumber }}</a>
+                    </div>
+                    <div v-else-if="this.participation.person.phonenumber">
+                        <i class="fa fa-li fa-phone"></i>
+                        <a href="#">{{ participation.person.phonenumber }}</a>
+                    </div>
+                    <span v-else class="chill-no-data-statement">No phonenumber listed</span>
                 </li>
             </ul>
             <!-- END ADDRESS AND PHONE NUMBER -->
@@ -81,19 +90,25 @@
         <!-- END EXTRA INFO AND ACTIONS -->
 
     </div>
+    </section>
+    </div>
+</div>
 </template>
 
 <script>
 export default {
     name: "PersonRenderBox",
-    props: ['participation', 'options'],  
+    props: ['participation', 'options'],
+    computed: {
+
+    }  
 }
 </script>
 
 <style>
 
-.item-row{
-    border: 1px solid black;
+.lastname:before{
+    content: " "
 }
 
 </style>