audiobookshelf/client/components/app/SettingsContent.vue

<template>
  <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-8">
    <div class="flex items-center mb-2">
      <h1 class="text-xl">{{ headerText }}</h1>

      <slot name="header-items"></slot>
    </div>

    <p v-if="description" id="settings-description" class="mb-6 text-gray-200" v-html="description" />

    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    headerText: String,
    description: String,
    note: String
  },
  methods: {}
}
</script>

<style>
#settings-description a {
  color: rgb(96 165 250);
}
#settings-description a:hover {
  color: rgb(147 197 253);
  text-decoration-line: underline;
}
#settings-description code {
  font-size: 0.875rem;
  border-radius: 6px;
  background-color: rgb(82, 82, 82);
  color: white;
  padding: 2px 4px;
}
</style>