Favorite

The favorite component shows the favorite links of a user. Every favorite has a button to edit it and a button to delete it. An edit form can replace the list while a favorite is edited.

The component only defines the markup and the styles. Adding, editing and deleting favorites is the task of the application.

The following code shows how to use the favorite component:

<div class="favorite">
  <button class="favorite__header button button--flat button--icon">
    <span class="icon icon--plus"></span>
    <span class="button__label">Seite zu Favoriten hinzufügen</span>
  </button>
  <hr class="separator">
  <ul class="favorite__list">
    <li class="favorite__item">
      <button type="button" class="button button--icon button--pill button--flat" aria-label="Favorit bearbeiten">
        <span class="icon icon--edit"></span>
      </button>
      <button type="button" class="button button--icon button--pill button--flat" aria-label="Favorit löschen">
        <span class="icon icon--trash"></span>
      </button>
      <a class="favorite__link" href="#">Finanznachrichten zu Unternehmen</a>
    </li>
  </ul>
  <form class="favorite__edit">
    <label class="favorite__edit-text" for="favorite-name">Favoriten Name:</label>
    <div class="form-group">
      <input class="input" type="text" id="favorite-name">
      <button type="button" class="button button--primary" aria-label="Speichern">
        <span class="icon icon--check-filled"></span>
      </button>
      <button type="button" class="button" aria-label="Abbrechen">
        <span class="icon icon--close-filled"></span>
      </button>
    </div>
  </form>
</div>

The following list describe all existing block/element/modifier classes of the component.

.favorite - required the block that contains all elements
.favorite__header - the button to add a new favorite, it is aligned to the start
.favorite__list - the list of all favorites, it scrolls if it is higher than list-max-height
.favorite__item - one favorite, contains the buttons and the link
.favorite__link - the link of the favorite
.favorite__edit - the form to rename a favorite, it is hidden in default
.favorite__edit-text - the label of the input within the edit form
Modifier
- .favorite--edit - hide the list and show the edit form

Basic Example (use the switch to show the edit form):

Theme basic Screen size XL

html

Custom properties

All values can be changed with custom properties of the form --sg-favorite-{KEY}.

Key	Default	Description
`link-color`	action content primary	color of the favorite link
`link-font-size`	`0.825rem`	font size of the favorite link
`link-line-height`	`1.5`	line height of the favorite link
`list-gap`	`0.5rem`	gap between the favorites
`list-padding`	`0.5rem 0`	padding of the list
`list-max-height`	`20rem`	maximum height of the list, then it scrolls
`item-gap`	`0.5rem`	gap between buttons and link within a favorite
`edit-padding`	`0.5rem 0`	padding of the edit form
`edit-text-gap`	`0.5rem`	gap between label and input of the edit form

.my-flyout .favorite {
  --sg-favorite-list-max-height: 12rem;
}