character.component.html

<div class="character">
    <div class="character-top">
        <mat-icon fontIcon="person"></mat-icon>
        <div class="character-top-name">
            <label for="name">Nom</label>
            <input name="name" type="text"/>                    
        </div>
    </div>
    <div class="character-infos">
        <div class="character-infos-description">
            <label for="description">Description</label>
            <textarea name="description"></textarea>
        </div>

        <!--
        <div>
            <div class="character-infos-phone">
                <label for="phonenumber">N° tél.</label>
                <input name="phonenumber" type="tel"/>                    
            </div>
            <div class="character-infos-title">
                <label for="title">Titre</label>
                <input name="title" type="text"/>
            </div>                    
        </div>
        -->

        <div class="character-infos-color">
            <label for="color">Couleur</label>
            <input name="color" type="color"/>
        </div>
    </div>
    <button mat-button>Retirer de ma tâche</button>
</div>