Notes are the type of profile components that allow user writing some additional or important information related to profile. In the old design in some databases, notes had the switch for enabling the private note option. Now, the profile wigdets notes are used only for inserting the public information. Private notes were moved to the More actions menu.
Note with some content
The profile note is basically a card that has an edit icon in the top-right corner.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend odio ut lacus aliquet, accumsan auctor arcu maximus. Sed consectetur semper nisl, sed malesuada leo convallis ut. Donec posuere auctor nunc id tincidunt. Fusce sit amet elementum arcu. Vestibulum sodales, leo et faucibus condimentum, purus justo auctor tortor, viverra iaculis ligula erat eget arcu. Maecenas rhoncus erat eget efficitur bibendum.
<div class="card">
<div class="card__heading">
<h3>Note</h3>
<div class="card__actions">
<i class="fal fa-edit js-edit-note-public" data-gtm="people-profile-widgets-note-edit-icon" title="Edit note"></i>
</div>
</div>
<div class="card__content max-height-scroll--135 pr6">
<p data-gtm="people-profile-widgets-note">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend odio ut lacus aliquet, accumsan auctor arcu maximus. Sed consectetur semper nisl, sed malesuada leo convallis ut. Donec posuere auctor nunc id tincidunt. Fusce sit amet elementum arcu. Vestibulum sodales, leo et faucibus condimentum, purus justo auctor tortor, viverra iaculis ligula erat eget arcu. Maecenas rhoncus erat eget efficitur bibendum.</p>
</div>
</div>
Empty note
The card for empty note needs to have additional class
card--empty. It changes the background and text.
<div class="card card--empty">
<div class="card__heading">
<h3>Note</h3>
<div class="card__actions">
<i class="fal fa-edit js-edit-note-public" data-gtm="people-profile-widgets-note-edit-icon" title="Edit note"></i>
</div>
</div>
<div class="card__content max-height-scroll--135 pr6">
<p data-gtm="people-profile-widgets-note">No note created</p>
</div>
</div>
