<section class="contato">
<ul>
<li>
<strong>{{ nome }}</strong>
</li>
<li>{{ telefone }}</li>
<li>
<button>
<img src="/assets/pencil-square.png" class="pencil" />
</button>
<button>
<img src="/assets/trash.png" class="trash" />
</button>
</li>
</ul>
</section>
o css do contato
.contato ul {
display: flex;
padding: 0;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.contato ul li {
list-style: none;
font-family: "Montserrat";
font-size: 18px;
font-weight: 400;
font-style: normal;
list-style: 150%;
}
.contato ul li button {
background-color: transparent;
border: none;
cursor: pointer;
}
app-container.html
<app-container>
<app-cabecalho></app-cabecalho>
@for (letra of alfabeto; track letra) {
<app-separador>
{{ letra }}
</app-separador>
<app-contato nome="Samuel" telefone="11 99723-8865"></app-contato>
}
</app-container>
