enhance card items (#75)

daggerheart.mjs

@@ -284,6 +284,7 @@ const preloadHandlebarsTemplates = async function () {
         'systems/daggerheart/templates/sheets/pc/parts/heritageCard.hbs',
         'systems/daggerheart/templates/sheets/pc/parts/advancementCard.hbs',
         'systems/daggerheart/templates/views/parts/level.hbs',
-        'systems/daggerheart/templates/components/slider.hbs'
+        'systems/daggerheart/templates/components/slider.hbs',
+        'systems/daggerheart/templates/sheets/global/partials/feature-section-item.hbs'
     ]);
 };

lang/en.json

@@ -316,9 +316,9 @@
         },
         "Domain": {
             "CardTypes": {
-                "Ability": "Ability",
+                "ability": "Ability",
-                "Spell": "Spell",
+                "spell": "Spell",
-                "Grimoire": "Grimoire"
+                "grimoire": "Grimoire"
             }
         },
         "LevelUp": {
@@ -1105,6 +1105,11 @@
                     "Name": "Damage Roll"
                 }
             }
+        },
+
+        "Tooltip": {
+            "openItemWorld": "Open Item World",
+            "delete": "Delete"
         }
     }
 }

module/applications/_module.mjs

@@ -3,9 +3,9 @@ export { default as DhpAdversarySheet } from './sheets/adversary.mjs';
 export { default as DhpClassSheet } from './sheets/class.mjs';
 export { default as DhpSubclass } from './sheets/subclass.mjs';
 export { default as DhpFeatureSheet } from './sheets/items/feature.mjs';
-export { default as DhpDomainCardSheet } from './sheets/domainCard.mjs';
+export { default as DhpDomainCardSheet } from './sheets/items/domainCard.mjs';
-export { default as DhpAncestry } from './sheets/ancestry.mjs';
+export { default as DhpAncestry } from './sheets/items/ancestry.mjs';
-export { default as DhpCommunity } from './sheets/community.mjs';
+export { default as DhpCommunity } from './sheets/items/community.mjs';
 export { default as DhpMiscellaneous } from './sheets/items/miscellaneous.mjs';
 export { default as DhpConsumable } from './sheets/items/consumable.mjs';
 export { default as DhpWeapon } from './sheets/items/weapon.mjs';

module/applications/sheets/ancestry.mjs

@@ -1,122 +0,0 @@
-// import DhpApplicationMixin from '../daggerheart-sheet.mjs';
-
-// export default class AncestrySheet extends DhpApplicationMixin(ItemSheet) {
-//     static documentType = "ancestry";
-
-//     constructor(options){
-//         super(options);
-//     }
-
-//     /** @override */
-//     static get defaultOptions() {
-//         return foundry.utils.mergeObject(super.defaultOptions, {
-//             classes: ["daggerheart", "sheet", "heritage"],
-//             width: 600,
-//             height: 'auto',
-//             dragDrop: [{ dragSelector: null, dropSelector: null }],
-//         });
-//     }
-
-//     /** @override */
-//     getData() {
-//         const context = super.getData();
-
-//         return context;
-//     }
-
-//     async _handleAction(action, event, button) {
-//         switch(action){
-//             case 'editAbility':
-//                 this.editAbility(button);
-//                 break;
-//             case 'deleteAbility':
-//                 this.deleteAbility(event);
-//                 break;
-//         }
-//     }
-
-//     async editAbility(button){
-//         const feature = await fromUuid(button.dataset.ability);
-//         feature.sheet.render(true);
-//     }
-
-//     async deleteAbility(event){
-//         event.preventDefault();
-//         event.stopPropagation();
-//         await this.item.update({ "system.abilities": this.item.system.abilities.filter(x => x.uuid !== event.currentTarget.dataset.ability) })
-//     }
-
-//     async _onDrop(event) {
-//         const data = TextEditor.getDragEventData(event);
-//         const item = await fromUuid(data.uuid);
-//         if(item.type === 'feature' && item.system.type === SYSTEM.ITEM.featureTypes.ancestry.id) {
-//             await this.object.update({ "system.abilities": [...this.item.system.abilities, { img: item.img, name: item.name, uuid: item.uuid }] });
-//         }
-//     }
-// }
-
-import DaggerheartSheet from './daggerheart-sheet.mjs';
-
-const { ItemSheetV2 } = foundry.applications.sheets;
-export default class AncestrySheet extends DaggerheartSheet(ItemSheetV2) {
-    static DEFAULT_OPTIONS = {
-        tag: 'form',
-        classes: ['daggerheart', 'sheet', 'heritage'],
-        position: { width: 600 },
-        actions: {
-            editAbility: this.editAbility,
-            deleteAbility: this.deleteAbility
-        },
-        form: {
-            handler: this.updateForm,
-            submitOnChange: true,
-            closeOnSubmit: false
-        },
-        dragDrop: [{ dragSelector: null, dropSelector: null }]
-    };
-
-    static PARTS = {
-        form: {
-            id: 'feature',
-            template: 'systems/daggerheart/templates/sheets/ancestry.hbs'
-        }
-    };
-
-    async _prepareContext(_options) {
-        const context = await super._prepareContext(_options);
-        context.document = this.document;
-
-        return context;
-    }
-
-    static async updateForm(event, _, formData) {
-        await this.document.update(formData.object);
-        this.render();
-    }
-
-    static async editAbility(_, button) {
-        const feature = await fromUuid(button.dataset.ability);
-        feature.sheet.render(true);
-    }
-
-    static async deleteAbility(event, button) {
-        event.preventDefault();
-        event.stopPropagation();
-        await this.item.update({
-            'system.abilities': this.item.system.abilities.filter(x => x.uuid !== button.dataset.ability)
-        });
-    }
-
-    async _onDrop(event) {
-        const data = TextEditor.getDragEventData(event);
-        const item = await fromUuid(data.uuid);
-        if (item.type === 'feature' && item.system.type === SYSTEM.ITEM.featureTypes.ancestry.id) {
-            await this.document.update({
-                'system.abilities': [
-                    ...this.document.system.abilities,
-                    { img: item.img, name: item.name, uuid: item.uuid }
-                ]
-            });
-        }
-    }
-}

module/applications/sheets/community.mjs

@@ -1,122 +0,0 @@
-// import DhpApplicationMixin from '../daggerheart-sheet.mjs';
-
-// export default class CommunitySheet extends DhpApplicationMixin(ItemSheet) {
-//     static documentType = "community";
-
-//     constructor(options){
-//         super(options);
-//     }
-
-//     /** @override */
-//     static get defaultOptions() {
-//         return foundry.utils.mergeObject(super.defaultOptions, {
-//             classes: ["daggerheart", "sheet", "heritage"],
-//             width: 600,
-//             height: 'auto',
-//             dragDrop: [{ dragSelector: null, dropSelector: null }],
-//         });
-//     }
-
-//     /** @override */
-//     getData() {
-//         const context = super.getData();
-
-//         return context;
-//     }
-
-//     async _handleAction(action, event, button) {
-//         switch(action){
-//             case 'editAbility':
-//                 this.editAbility(button);
-//                 break;
-//             case 'deleteAbility':
-//                 this.deleteAbility(event);
-//                 break;
-//         }
-//     }
-
-//     async editAbility(button){
-//         const feature = await fromUuid(button.dataset.ability);
-//         feature.sheet.render(true);
-//     }
-
-//     async deleteAbility(event){
-//         event.preventDefault();
-//         event.stopPropagation();
-//         await this.item.update({ "system.abilities": this.item.system.abilities.filter(x => x.uuid !== event.currentTarget.dataset.ability) })
-//     }
-
-//     async _onDrop(event) {
-//         const data = TextEditor.getDragEventData(event);
-//         const item = await fromUuid(data.uuid);
-//         if(item.type === 'feature' && item.system.type === SYSTEM.ITEM.featureTypes.community.id) {
-//             await this.object.update({ "system.abilities": [...this.item.system.abilities, { img: item.img, name: item.name, uuid: item.uuid }] });
-//         }
-//     }
-// }
-
-import DaggerheartSheet from './daggerheart-sheet.mjs';
-
-const { ItemSheetV2 } = foundry.applications.sheets;
-export default class CommunitySheet extends DaggerheartSheet(ItemSheetV2) {
-    static DEFAULT_OPTIONS = {
-        tag: 'form',
-        classes: ['daggerheart', 'sheet', 'heritage'],
-        position: { width: 600 },
-        actions: {
-            editAbility: this.editAbility,
-            deleteAbility: this.deleteAbility
-        },
-        form: {
-            handler: this.updateForm,
-            submitOnChange: true,
-            closeOnSubmit: false
-        },
-        dragDrop: [{ dragSelector: null, dropSelector: null }]
-    };
-
-    static PARTS = {
-        form: {
-            id: 'feature',
-            template: 'systems/daggerheart/templates/sheets/community.hbs'
-        }
-    };
-
-    async _prepareContext(_options) {
-        const context = await super._prepareContext(_options);
-        context.document = this.document;
-
-        return context;
-    }
-
-    static async updateForm(event, _, formData) {
-        await this.document.update(formData.object);
-        this.render();
-    }
-
-    static async editAbility(_, button) {
-        const feature = await fromUuid(button.dataset.ability);
-        feature.sheet.render(true);
-    }
-
-    static async deleteAbility(event, button) {
-        event.preventDefault();
-        event.stopPropagation();
-        await this.item.update({
-            'system.abilities': this.item.system.abilities.filter(x => x.uuid !== button.dataset.ability)
-        });
-    }
-
-    async _onDrop(event) {
-        const data = TextEditor.getDragEventData(event);
-        const item = await fromUuid(data.uuid);
-        if (item.type === 'feature' && item.system.type === SYSTEM.ITEM.featureTypes.community.id) {
-            await this.document.update({
-                'system.abilities': [
-                    ...this.document.system.abilities,
-                    { img: item.img, name: item.name, uuid: item.uuid }
-                ]
-            });
-        }
-    }
-}

module/applications/sheets/items/ancestry.mjs

@@ -0,0 +1,88 @@
+import DaggerheartSheet from '../daggerheart-sheet.mjs';
+
+const { ItemSheetV2 } = foundry.applications.sheets;
+export default class AncestrySheet extends DaggerheartSheet(ItemSheetV2) {
+    static DEFAULT_OPTIONS = {
+        tag: 'form',
+        classes: ['daggerheart', 'sheet', 'item', 'dh-style', 'ancestry'],
+        position: { width: 450, height: 700 },
+        actions: {
+            editFeature: this.editFeature,
+            deleteFeature: this.deleteFeature
+        },
+        form: {
+            handler: this.updateForm,
+            submitOnChange: true,
+            closeOnSubmit: false
+        },
+        dragDrop: [{ dragSelector: null, dropSelector: null }]
+    };
+
+    static PARTS = {
+        header: { template: 'systems/daggerheart/templates/sheets/items/ancestry/header.hbs' },
+        tabs: { template: 'systems/daggerheart/templates/sheets/global/tabs/tab-navigation.hbs' },
+        description: { template: 'systems/daggerheart/templates/sheets/global/tabs/tab-description.hbs' },
+        features: {
+            template: 'systems/daggerheart/templates/sheets/global/tabs/tab-feature-section.hbs',
+            scrollable: ['.features']
+        }
+    };
+
+    static TABS = {
+        description: {
+            active: true,
+            cssClass: '',
+            group: 'primary',
+            id: 'description',
+            icon: null,
+            label: 'DAGGERHEART.Sheets.Feature.Tabs.Description'
+        },
+        features: {
+            active: false,
+            cssClass: '',
+            group: 'primary',
+            id: 'features',
+            icon: null,
+            label: 'DAGGERHEART.Sheets.Feature.Tabs.Features'
+        }
+    };
+
+    async _prepareContext(_options) {
+        const context = await super._prepareContext(_options);
+        context.document = this.document;
+        context.tabs = super._getTabs(this.constructor.TABS);
+
+        return context;
+    }
+
+    static async updateForm(event, _, formData) {
+        await this.document.update(formData.object);
+        this.render();
+    }
+
+    static async editFeature(_, target) {
+        const feature = await fromUuid(target.dataset.feature);
+        feature.sheet.render(true);
+    }
+
+    static async deleteFeature(event, target) {
+        event.preventDefault();
+        event.stopPropagation();
+        await this.item.update({
+            'system.abilities': this.item.system.abilities.filter(x => x.uuid !== target.dataset.feature)
+        });
+    }
+
+    async _onDrop(event) {
+        const data = TextEditor.getDragEventData(event);
+        const item = await fromUuid(data.uuid);
+        if (item.type === 'feature' && item.system.type === SYSTEM.ITEM.featureTypes.ancestry.id) {
+            await this.document.update({
+                'system.abilities': [
+                    ...this.document.system.abilities,
+                    { img: item.img, name: item.name, uuid: item.uuid }
+                ]
+            });
+        }
+    }
+}

module/applications/sheets/items/armor.mjs

@@ -4,7 +4,7 @@ const { ItemSheetV2 } = foundry.applications.sheets;
 export default class ArmorSheet extends DaggerheartSheet(ItemSheetV2) {
     static DEFAULT_OPTIONS = {
         tag: 'form',
-        classes: ['daggerheart', 'sheet', 'dh-style', 'armor'],
+        classes: ['daggerheart', 'sheet', 'item', 'dh-style', 'armor'],
         position: { width: 600 },
         form: {
             handler: this.updateForm,

module/applications/sheets/items/community.mjs

@@ -0,0 +1,88 @@
+import DaggerheartSheet from '../daggerheart-sheet.mjs';
+
+const { ItemSheetV2 } = foundry.applications.sheets;
+export default class CommunitySheet extends DaggerheartSheet(ItemSheetV2) {
+    static DEFAULT_OPTIONS = {
+        tag: 'form',
+        classes: ['daggerheart', 'sheet', 'item', 'dh-style', 'community'],
+        position: { width: 450, height: 700 },
+        actions: {
+            editFeature: this.editFeature,
+            deleteFeature: this.deleteFeature
+        },
+        form: {
+            handler: this.updateForm,
+            submitOnChange: true,
+            closeOnSubmit: false
+        },
+        dragDrop: [{ dragSelector: null, dropSelector: null }]
+    };
+
+    static PARTS = {
+        header: { template: 'systems/daggerheart/templates/sheets/items/community/header.hbs' },
+        tabs: { template: 'systems/daggerheart/templates/sheets/global/tabs/tab-navigation.hbs' },
+        description: { template: 'systems/daggerheart/templates/sheets/global/tabs/tab-description.hbs' },
+        features: {
+            template: 'systems/daggerheart/templates/sheets/global/tabs/tab-feature-section.hbs',
+            scrollable: ['.features']
+        }
+    };
+
+    static TABS = {
+        description: {
+            active: true,
+            cssClass: '',
+            group: 'primary',
+            id: 'description',
+            icon: null,
+            label: 'DAGGERHEART.Sheets.Feature.Tabs.Description'
+        },
+        features: {
+            active: false,
+            cssClass: '',
+            group: 'primary',
+            id: 'features',
+            icon: null,
+            label: 'DAGGERHEART.Sheets.Feature.Tabs.Features'
+        }
+    };
+
+    async _prepareContext(_options) {
+        const context = await super._prepareContext(_options);
+        context.document = this.document;
+        context.tabs = super._getTabs(this.constructor.TABS);
+
+        return context;
+    }
+
+    static async updateForm(event, _, formData) {
+        await this.document.update(formData.object);
+        this.render();
+    }
+
+    static async editFeature(_, target) {
+        const feature = await fromUuid(target.dataset.feature);
+        feature.sheet.render(true);
+    }
+
+    static async deleteFeature(event, target) {
+        event.preventDefault();
+        event.stopPropagation();
+        await this.item.update({
+            'system.abilities': this.item.system.abilities.filter(x => x.uuid !== target.dataset.feature)
+        });
+    }
+
+    async _onDrop(event) {
+        const data = TextEditor.getDragEventData(event);
+        const item = await fromUuid(data.uuid);
+        if (item.type === 'feature' && item.system.type === SYSTEM.ITEM.featureTypes.community.id) {
+            await this.document.update({
+                'system.abilities': [
+                    ...this.document.system.abilities,
+                    { img: item.img, name: item.name, uuid: item.uuid }
+                ]
+            });
+        }
+    }
+}

module/applications/sheets/items/consumable.mjs

@@ -4,7 +4,7 @@ const { ItemSheetV2 } = foundry.applications.sheets;
 export default class ConsumableSheet extends DaggerheartSheet(ItemSheetV2) {
     static DEFAULT_OPTIONS = {
         tag: 'form',
-        classes: ['daggerheart', 'sheet', 'dh-style', 'consumable'],
+        classes: ['daggerheart', 'sheet', 'item', 'dh-style', 'consumable'],
         position: { width: 550 },
         form: {
             handler: this.updateForm,

module/applications/sheets/items/domainCard.mjs

@@ -1,45 +1,13 @@
-// import DhpApplicationMixin from '../daggerheart-sheet.mjs';
+import DaggerheartAction from '../../../data/action.mjs';
-
+import DaggerheartActionConfig from '../../config/Action.mjs';
-// export default class DomainCardSheet extends DhpApplicationMixin(ItemSheet) {
+import DaggerheartSheet from '../daggerheart-sheet.mjs';
-//     static documentType = "domainCard";
-
-//     /** @override */
-//     static get defaultOptions() {
-//         return foundry.utils.mergeObject(super.defaultOptions, {
-//             classes: ["daggerheart", "sheet", "domain-card"],
-//             width: 600,
-//             height: 600,
-//             tabs: [{ navSelector: ".sheet-tabs", contentSelector: ".sheet-body", initial: "features" }]
-//         });
-//     }
-
-//     /** @override */
-//     getData() {
-//         const context = super.getData();
-//         context.config = CONFIG.daggerheart;
-
-//         return context;
-//     }
-
-//     async _handleAction(action, event, button) {
-//         switch(action){
-//             case 'attributeRoll':
-
-//                 break;
-//         }
-//     }
-// }
-
-import DaggerheartAction from '../../data/action.mjs';
-import DaggerheartActionConfig from '../config/Action.mjs';
-import DaggerheartSheet from './daggerheart-sheet.mjs';
 
 const { ItemSheetV2 } = foundry.applications.sheets;
 export default class DomainCardSheet extends DaggerheartSheet(ItemSheetV2) {
     static DEFAULT_OPTIONS = {
         tag: 'form',
-        classes: ['daggerheart', 'sheet', 'domain-card'],
+        classes: ['daggerheart', 'sheet', 'item', 'dh-style', 'domain-card'],
-        position: { width: 600, height: 600 },
+        position: { width: 450, height: 700 },
         actions: {
             addAction: this.addAction,
             editAction: this.editAction,
@@ -53,29 +21,50 @@ export default class DomainCardSheet extends DaggerheartSheet(ItemSheetV2) {
     };
 
     static PARTS = {
-        form: {
+        header: { template: 'systems/daggerheart/templates/sheets/items/domainCard/header.hbs' },
-            id: 'feature',
+        tabs: { template: 'systems/daggerheart/templates/sheets/global/tabs/tab-navigation.hbs' },
-            template: 'systems/daggerheart/templates/sheets/domainCard.hbs'
+        description: { template: 'systems/daggerheart/templates/sheets/global/tabs/tab-description.hbs' },
+        actions: {
+            template: 'systems/daggerheart/templates/sheets/global/tabs/tab-actions.hbs',
+            scrollable: ['.actions']
+        },
+        settings: {
+            template: 'systems/daggerheart/templates/sheets/items/domainCard/settings.hbs',
+            scrollable: ['.settings']
         }
     };
 
-    _getTabs() {
+    static TABS = {
-        const tabs = {
+        description: {
-            general: { active: true, cssClass: '', group: 'primary', id: 'general', icon: null, label: 'General' },
+            active: true,
-            actions: { active: false, cssClass: '', group: 'primary', id: 'actions', icon: null, label: 'Actions' }
+            cssClass: '',
-        };
+            group: 'primary',
-        for (const v of Object.values(tabs)) {
+            id: 'description',
-            v.active = this.tabGroups[v.group] ? this.tabGroups[v.group] === v.id : v.active;
+            icon: null,
-            v.cssClass = v.active ? 'active' : '';
+            label: 'DAGGERHEART.Sheets.Feature.Tabs.Description'
+        },
+        actions: {
+            active: false,
+            cssClass: '',
+            group: 'primary',
+            id: 'actions',
+            icon: null,
+            label: 'DAGGERHEART.Sheets.Feature.Tabs.Actions'
+        },
+        settings: {
+            active: false,
+            cssClass: '',
+            group: 'primary',
+            id: 'settings',
+            icon: null,
+            label: 'DAGGERHEART.Sheets.Feature.Tabs.Settings'
         }
-
+    };
-        return tabs;
-    }
 
     async _prepareContext(_options) {
         const context = await super._prepareContext(_options);
         context.config = CONFIG.daggerheart;
-        context.tabs = this._getTabs();
+        context.tabs = super._getTabs(this.constructor.TABS);
 
         return context;
     }

module/applications/sheets/items/feature.mjs

@@ -13,7 +13,7 @@ export default class FeatureSheet extends DaggerheartSheet(ItemSheetV2) {
     static DEFAULT_OPTIONS = {
         tag: 'form',
         id: 'daggerheart-feature',
-        classes: ['daggerheart', 'sheet', 'dh-style', 'feature'],
+        classes: ['daggerheart', 'sheet', 'item', 'dh-style', 'feature'],
         position: { width: 600, height: 600 },
         window: { resizable: true },
         actions: {
@@ -35,7 +35,7 @@ export default class FeatureSheet extends DaggerheartSheet(ItemSheetV2) {
         tabs: { template: 'systems/daggerheart/templates/sheets/global/tabs/tab-navigation.hbs' },
         description: { template: 'systems/daggerheart/templates/sheets/global/tabs/tab-description.hbs' },
         actions: {
-            template: 'systems/daggerheart/templates/sheets/items/feature/actions.hbs',
+            template: 'systems/daggerheart/templates/sheets/global/tabs/tab-actions.hbs',
             scrollable: ['.actions']
         },
         settings: {

module/applications/sheets/items/miscellaneous.mjs

@@ -1,32 +1,10 @@
-// import DhpApplicationMixin from '../daggerheart-sheet.mjs';
-
-// export default class MiscellaneousSheet extends DhpApplicationMixin(ItemSheet) {
-//     static documentType = "miscellaneous";
-
-//     /** @override */
-//     static get defaultOptions() {
-//         return foundry.utils.mergeObject(super.defaultOptions, {
-//             classes: ["daggerheart", "sheet", "miscellaneous"],
-//             width: 400,
-//             height: 'auto',
-//         });
-//     }
-
-//     /** @override */
-//     getData() {
-//         const context = super.getData();
-
-//         return context;
-//     }
-// }
-
 import DaggerheartSheet from '../daggerheart-sheet.mjs';
 
 const { ItemSheetV2 } = foundry.applications.sheets;
 export default class MiscellaneousSheet extends DaggerheartSheet(ItemSheetV2) {
     static DEFAULT_OPTIONS = {
         tag: 'form',
-        classes: ['daggerheart', 'sheet', 'dh-style', 'miscellaneous'],
+        classes: ['daggerheart', 'sheet', 'item', 'dh-style', 'miscellaneous'],
         position: { width: 550 },
         form: {
             handler: this.updateForm,

module/applications/sheets/items/weapon.mjs

@@ -4,7 +4,7 @@ const { ItemSheetV2 } = foundry.applications.sheets;
 export default class WeaponSheet extends DaggerheartSheet(ItemSheetV2) {
     static DEFAULT_OPTIONS = {
         tag: 'form',
-        classes: ['daggerheart', 'sheet', 'dh-style', 'weapon'],
+        classes: ['daggerheart', 'sheet', 'item', 'dh-style', 'weapon'],
         position: { width: 600 },
         form: {
             handler: this.updateForm,

module/config/domainConfig.mjs

@@ -85,17 +85,17 @@ export const classMap = {
 export const cardTypes = {
     ability: {
         id: 'ability',
-        label: 'DAGGERHEART.Domain.CardTypes.Ability',
+        label: 'DAGGERHEART.Domain.CardTypes.ability',
         img: ''
     },
     spell: {
         id: 'spell',
-        label: 'DAGGERHEART.Domain.CardTypes.Spell',
+        label: 'DAGGERHEART.Domain.CardTypes.spell',
         img: ''
     },
     grimoire: {
         id: 'grimoire',
-        label: 'DAGGERHEART.Domain.CardTypes.Grimoire',
+        label: 'DAGGERHEART.Domain.CardTypes.grimoire',
         img: ''
     }
 };

styles/daggerheart.css

@@ -2796,40 +2796,11 @@ div.daggerheart.views.multiclass {
   scrollbar-width: thin;
   scrollbar-color: light-dark(#18162e, #f3c267) transparent;
 }
-.application.sheet.daggerheart.dh-style.feature .tab.actions .actions-list {
+.application.sheet.daggerheart.dh-style.domain-card section.tab {
-  display: flex;
+  height: 400px;
-  flex-direction: column;
+  overflow-y: auto;
-  list-style: none;
+  scrollbar-width: thin;
-  padding: 0;
+  scrollbar-color: light-dark(#18162e, #f3c267) transparent;
-  margin: 0;
-  width: 100%;
-  gap: 5px;
-}
-.application.sheet.daggerheart.dh-style.feature .tab.actions .actions-list .action-item {
-  display: grid;
-  align-items: center;
-  grid-template-columns: 1fr 4fr 1fr;
-  cursor: pointer;
-}
-.application.sheet.daggerheart.dh-style.feature .tab.actions .actions-list .action-item h4 {
-  font-family: 'Montserrat', sans-serif;
-  font-weight: lighter;
-  color: #efe6d8;
-}
-.application.sheet.daggerheart.dh-style.feature .tab.actions .actions-list .action-item .image {
-  height: 40px;
-  width: 40px;
-  object-fit: cover;
-  border-radius: 6px;
-  border: none;
-}
-.application.sheet.daggerheart.dh-style.feature .tab.actions .actions-list .action-item .controls {
-  display: flex;
-  justify-content: center;
-  gap: 10px;
-}
-.application.sheet.daggerheart.dh-style.feature .tab.actions .actions-list .action-item .controls a {
-  text-shadow: none;
 }
 @font-face {
   font-family: 'Cinzel';
@@ -3145,6 +3116,41 @@ div.daggerheart.views.multiclass {
   text-shadow: none;
   font-family: 'Montserrat', sans-serif;
 }
+.sheet.daggerheart.dh-style .tab.actions .actions-list {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  gap: 5px;
+}
+.sheet.daggerheart.dh-style .tab.actions .actions-list .action-item {
+  display: grid;
+  align-items: center;
+  grid-template-columns: 1fr 4fr 1fr;
+  cursor: pointer;
+}
+.sheet.daggerheart.dh-style .tab.actions .actions-list .action-item h4 {
+  font-family: 'Montserrat', sans-serif;
+  font-weight: lighter;
+  color: #efe6d8;
+}
+.sheet.daggerheart.dh-style .tab.actions .actions-list .action-item .image {
+  height: 40px;
+  width: 40px;
+  object-fit: cover;
+  border-radius: 6px;
+  border: none;
+}
+.sheet.daggerheart.dh-style .tab.actions .actions-list .action-item .controls {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+}
+.sheet.daggerheart.dh-style .tab.actions .actions-list .action-item .controls a {
+  text-shadow: none;
+}
 .application.sheet.daggerheart.dh-style .item-sheet-header {
   display: flex;
 }
@@ -3188,6 +3194,135 @@ div.daggerheart.views.multiclass {
 .application.sheet.daggerheart.dh-style .item-sheet-header .item-info h3 {
   font-size: 1rem;
 }
+.application.sheet.daggerheart.dh-style .item-card-header {
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  text-align: center;
+}
+.application.sheet.daggerheart.dh-style .item-card-header .profile {
+  height: 300px;
+  width: 100%;
+  object-fit: cover;
+  mask-image: linear-gradient(0deg, transparent 0%, black 10%);
+}
+.application.sheet.daggerheart.dh-style .item-card-header .item-icons-list {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 50px;
+  right: 10px;
+}
+.application.sheet.daggerheart.dh-style .item-card-header .item-icons-list .item-icon {
+  display: flex;
+  align-items: center;
+  justify-content: end;
+  text-align: center;
+  padding-right: 8px;
+  max-width: 50px;
+  height: 50px;
+  font-size: 1.2rem;
+  background: light-dark(rgba(0, 0, 0, 0.3), rgba(24, 22, 46, 0.33));
+  border: 4px double light-dark(#efe6d8, #f3c267);
+  color: light-dark(#efe6d8, #f3c267);
+  border-radius: 999px;
+  transition: all 0.3s ease;
+}
+.application.sheet.daggerheart.dh-style .item-card-header .item-icons-list .item-icon .recall-label {
+  font-size: 14px;
+  opacity: 0;
+  margin-right: 0.3rem;
+  transition: all 0.3s ease;
+}
+.application.sheet.daggerheart.dh-style .item-card-header .item-icons-list .item-icon i {
+  font-size: 0.8rem;
+}
+.application.sheet.daggerheart.dh-style .item-card-header .item-icons-list .item-icon:hover {
+  max-width: 300px;
+  padding: 0 10px;
+  border-radius: 60px;
+}
+.application.sheet.daggerheart.dh-style .item-card-header .item-icons-list .item-icon:hover .recall-label {
+  opacity: 1;
+}
+.application.sheet.daggerheart.dh-style .item-card-header .item-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  top: -25px;
+  gap: 5px;
+  margin-bottom: -20px;
+}
+.application.sheet.daggerheart.dh-style .item-card-header .item-info .item-name input[type='text'] {
+  font-size: 32px;
+  height: 42px;
+  text-align: center;
+  width: 90%;
+  transition: all 0.3s ease;
+  outline: 2px solid transparent;
+  border: 1px solid transparent;
+}
+.application.sheet.daggerheart.dh-style .item-card-header .item-info .item-name input[type='text']:hover[type='text'],
+.application.sheet.daggerheart.dh-style .item-card-header .item-info .item-name input[type='text']:focus[type='text'] {
+  box-shadow: none;
+  outline: 2px solid light-dark(#18162e, #f3c267);
+}
+.application.sheet.daggerheart.dh-style .item-card-header .item-info .item-description {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.application.sheet.daggerheart.dh-style .item-card-header .item-info h3 {
+  font-size: 1rem;
+}
+.sheet.daggerheart.dh-style.item .tab.features {
+  padding: 0 10px;
+  max-height: 265px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: light-dark(#18162e, #f3c267) transparent;
+}
+.sheet.daggerheart.dh-style.item .tab.features .feature-list {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+}
+.sheet.daggerheart.dh-style.item .tab.features .feature-list .feature-item {
+  margin-bottom: 10px;
+}
+.sheet.daggerheart.dh-style.item .tab.features .feature-list .feature-item:last-child {
+  margin-bottom: 0px;
+}
+.sheet.daggerheart.dh-style.item .tab.features .feature-list .feature-item .feature-line {
+  display: grid;
+  align-items: center;
+  grid-template-columns: 1fr 4fr 1fr;
+}
+.sheet.daggerheart.dh-style.item .tab.features .feature-list .feature-item .feature-line h4 {
+  font-family: 'Montserrat', sans-serif;
+  font-weight: lighter;
+  color: light-dark(#222, #efe6d8);
+}
+.sheet.daggerheart.dh-style.item .tab.features .feature-list .feature-item .feature-line .image {
+  height: 40px;
+  width: 40px;
+  object-fit: cover;
+  border-radius: 6px;
+  border: none;
+}
+.sheet.daggerheart.dh-style.item .tab.features .feature-list .feature-item .feature-line .controls {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+}
+.sheet.daggerheart.dh-style.item .tab.features .feature-list .feature-item .feature-line .controls a {
+  text-shadow: none;
+}
 #logo {
   content: url(../assets/DaggerheartLogo.webp);
   height: 50px;

styles/daggerheart.less

@@ -13,6 +13,8 @@
 
 // new styles imports
 @import './less/items/feature.less';
+@import './less/items/ancestry.less';
+@import './less/items/domainCard.less';
 
 @import './less/utils/colors.less';
 @import './less/utils/fonts.less';
@@ -20,7 +22,9 @@
 @import './less/global/sheet.less';
 @import './less/global/elements.less';
 @import './less/global/tab-navigation.less';
+@import './less/global/tab-actions.less';
 @import './less/global/item-header.less';
+@import './less/global/feature-section.less';
 
 #logo {
     content: url(../assets/DaggerheartLogo.webp);

styles/less/global/feature-section.less

@@ -0,0 +1,51 @@
+@import '../utils/colors.less';
+@import '../utils/fonts.less';
+
+.sheet.daggerheart.dh-style.item {
+    .tab.features {
+        padding: 0 10px;
+        max-height: 265px;
+        overflow-y: auto;
+        scrollbar-width: thin;
+        scrollbar-color: light-dark(@dark-blue, @golden) transparent;
+        .feature-list {
+            display: flex;
+            flex-direction: column;
+            list-style: none;
+            padding: 0;
+            margin: 0;
+            width: 100%;
+            .feature-item {
+                margin-bottom: 10px;
+                &:last-child {
+                    margin-bottom: 0px;
+                }
+                .feature-line {
+                    display: grid;
+                    align-items: center;
+                    grid-template-columns: 1fr 4fr 1fr;
+                    h4 {
+                        font-family: @font-body;
+                        font-weight: lighter;
+                        color: light-dark(@dark, @beige);
+                    }
+                    .image {
+                        height: 40px;
+                        width: 40px;
+                        object-fit: cover;
+                        border-radius: 6px;
+                        border: none;
+                    }
+                    .controls {
+                        display: flex;
+                        justify-content: center;
+                        gap: 10px;
+                        a {
+                            text-shadow: none;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

styles/less/global/item-header.less

@@ -50,4 +50,103 @@
             }
         }
     }
+
+    .item-card-header {
+        display: flex;
+        flex-direction: column;
+        justify-content: start;
+        text-align: center;
+
+        .profile {
+            height: 300px;
+            width: 100%;
+            object-fit: cover;
+            mask-image: linear-gradient(0deg, transparent 0%, black 10%);
+            cursor: pointer;
+        }
+
+        .item-icons-list {
+            position: absolute;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            top: 50px;
+            right: 10px;
+
+            .item-icon {
+                display: flex;
+                align-items: center;
+                justify-content: end;
+                text-align: center;
+                padding-right: 8px;
+                max-width: 50px;
+                height: 50px;
+                font-size: 1.2rem;
+                background: light-dark(@light-black, @semi-transparent-dark-blue);
+                border: 4px double light-dark(@beige, @golden);
+                color: light-dark(@beige, @golden);
+                border-radius: 999px;
+                transition: all 0.3s ease;
+
+                .recall-label {
+                    font-size: 14px;
+                    opacity: 0;
+                    margin-right: 0.3rem;
+                    transition: all 0.3s ease;
+                }
+
+                i {
+                    font-size: 0.8rem;
+                }
+
+                &:hover {
+                    max-width: 300px;
+                    padding: 0 10px;
+                    border-radius: 60px;
+
+                    .recall-label {
+                        opacity: 1;
+                    }
+                }
+            }
+        }
+
+        .item-info {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            position: relative;
+            top: -25px;
+            gap: 5px;
+            margin-bottom: -20px;
+
+            .item-name {
+                input[type='text'] {
+                    font-size: 32px;
+                    height: 42px;
+                    text-align: center;
+                    width: 90%;
+                    transition: all 0.3s ease;
+                    outline: 2px solid transparent;
+                    border: 1px solid transparent;
+
+                    &:hover[type='text'],
+                    &:focus[type='text'] {
+                        box-shadow: none;
+                        outline: 2px solid light-dark(@dark-blue, @golden);
+                    }
+                }
+            }
+
+            .item-description {
+                display: flex;
+                flex-direction: column;
+                gap: 10px;
+            }
+
+            h3 {
+                font-size: 1rem;
+            }
+        }
+    }
 }

styles/less/global/sheet.less

@@ -67,7 +67,6 @@
         background-position: center;
     }
 }
-// D:\Foundry\v13\data\Data\systems\daggerheart\assets\parchments\dh-parchment-light.png
 
 .application.sheet.daggerheart.dh-style {
     .window-content {

styles/less/global/tab-actions.less

@@ -0,0 +1,46 @@
+@import '../utils/colors.less';
+@import '../utils/fonts.less';
+
+.sheet.daggerheart.dh-style {
+    .tab.actions {
+        .actions-list {
+            display: flex;
+            flex-direction: column;
+            list-style: none;
+            padding: 0;
+            margin: 0;
+            width: 100%;
+            gap: 5px;
+
+            .action-item {
+                display: grid;
+                align-items: center;
+                grid-template-columns: 1fr 4fr 1fr;
+                cursor: pointer;
+
+                h4 {
+                    font-family: @font-body;
+                    font-weight: lighter;
+                    color: @beige;
+                }
+
+                .image {
+                    height: 40px;
+                    width: 40px;
+                    object-fit: cover;
+                    border-radius: 6px;
+                    border: none;
+                }
+
+                .controls {
+                    display: flex;
+                    justify-content: center;
+                    gap: 10px;
+                    a {
+                        text-shadow: none;
+                    }
+                }
+            }
+        }
+    }
+}

styles/less/items/domainCard.less

@@ -0,0 +1,12 @@
+@import '../utils/colors.less';
+@import '../utils/fonts.less';
+
+.application.sheet.daggerheart.dh-style.domain-card {
+
+    section.tab {
+        height: 400px;
+        overflow-y: auto;
+        scrollbar-width: thin;
+        scrollbar-color: light-dark(@dark-blue, @golden) transparent;
+    }
+}

styles/less/items/feature.less

@@ -17,46 +17,4 @@
         scrollbar-width: thin;
         scrollbar-color: light-dark(@dark-blue, @golden) transparent;
     }
-
-    .tab.actions {
-        .actions-list {
-            display: flex;
-            flex-direction: column;
-            list-style: none;
-            padding: 0;
-            margin: 0;
-            width: 100%;
-            gap: 5px;
-
-            .action-item {
-                display: grid;
-                align-items: center;
-                grid-template-columns: 1fr 4fr 1fr;
-                cursor: pointer;
-
-                h4 {
-                    font-family: @font-body;
-                    font-weight: lighter;
-                    color: @beige;
-                }
-
-                .image {
-                    height: 40px;
-                    width: 40px;
-                    object-fit: cover;
-                    border-radius: 6px;
-                    border: none;
-                }
-
-                .controls {
-                    display: flex;
-                    justify-content: center;
-                    gap: 10px;
-                    a {
-                        text-shadow: none;
-                    }
-                }
-            }
-        }
-    }
 }

templates/sheets/ancestry.hbs

@@ -1,11 +0,0 @@
-<div>
-    <header class="flexcol">
-        <div class="title-container">
-            <img class="flex0" src="{{document.img}}" data-edit="img" data-action="onEditImage" title="{{document.name}}" height="64" width="64"/>
-            <div class="title-name">
-                {{formInput fields.name value=source.name rootId=partId}}
-            </div>
-        </div>
-    </header>
-    {{> "systems/daggerheart/templates/sheets/parts/heritage.hbs" }}
-</div>

templates/sheets/community.hbs

@@ -1,11 +0,0 @@
-<div>
-    <header class="flexcol">
-        <div class="title-container">
-            <img class="flex0" src="{{document.img}}" data-edit="img" data-action="onEditImage" title="{{document.name}}" height="64" width="64"/>
-            <div class="title-name">
-                {{formInput fields.name value=source.name rootId=partId}}
-            </div>
-        </div>
-    </header>
-    {{> "systems/daggerheart/templates/sheets/parts/heritage.hbs" }}
-</div>

templates/sheets/domainCard.hbs

@@ -1,101 +0,0 @@
-<div>
-    <header class="flexcol">
-        <div class="title-container">
-            <img class="flex0" src="{{source.img}}" data-edit="img" data-action="onEditImage" title="{{source.name}}" height="64" width="64"/>
-            <div class="title-name">
-                {{formInput fields.name value=source.name rootId=partId}}
-            </div>
-        </div>
-        <nav class="sheet-tabs tabs">
-            {{#each tabs as |tab|}}
-                <a class="{{tab.cssClass}}" data-action="tab" data-group="{{tab.group}}" data-tab="{{tab.id}}">
-                    <i class="{{tab.icon}}"></i>
-                    <label>{{localize tab.label}}</label>
-                </a>
-            {{/each}}
-        </nav>
-    </header>
-
-    <section class="sheet-body">
-         <div class="tab {{this.tabs.general.cssClass}}" data-group="primary" data-tab="general">
-            {{formField systemFields.type value=source.system.type label="Type" localize=true blank=""}}
-            {{formField systemFields.foundation value=source.system.foundation label="Foundation" }}
-            {{formField systemFields.domain value=source.system.domain label="Domain" localize=true blank=""}}
-            {{formField systemFields.level value=source.system.level label="level" data-dtype="Number"}}
-            {{formField systemFields.recallCost value=source.system.recallCost label="Recall Cost" data-dtype="Number"}}
-            {{formField systemFields.effect value=source.system.effect label="Description" enriched=source.system.effect toggled=true}}
-        </div>
-        
-        <div class="tab {{this.tabs.actions.cssClass}}" data-group="primary" data-tab="actions">
-            <h2>{{localize "Actions"}} <i class="fa-solid fa-plus icon-button" data-action="addAction"></i></h2>
-            <div class="flexrow">
-                {{#each source.system.actions as |action index|}}
-                    <div data-action="editAction" data-index="{{index}}" class="ability-chip">
-                        <img src="{{action.img}}" />
-                        <div>{{action.name}}</div>
-                        <button data-action="removeAction" data-index="{{index}}"><i class="fa-solid fa-x"></i></button>
-                    </div> 
-                {{/each}}
-            </div>
-        </div>
-    </section>
-</div>
-
-{{!-- <form class={{cssClass}} autocomplete="off">
-    <header class="flexcol">
-        <div class="flexrow">
-            <img class="flex0" src="{{item.img}}" data-edit="img" title="{{item.name}}" height="64" width="64"/>
-            <div class="title-name">
-                <h2><input name="name" type="text" value="{{item.name}}" placeholder="{{ localize 'Name' }}"/></h2>
-            </div>
-        </div>
-    </header>
-
-    <section class="sheet-body">
-        <div class="form-group">
-            <label>{{localize "DAGGERHEART.Sheets.DomainCard.Category"}}</label>
-            <div class="form-fields">
-                <label>{{localize "DAGGERHEART.Sheets.DomainCard.Type"}}</label>
-                <select name="system.type">
-                    {{selectOptions config.DOMAIN.cardTypes selected=item.system.type labelAttr="name" localize=true blank=""}}
-                </select>
-                <label>{{localize "DAGGERHEART.Sheets.DomainCard.Foundation"}}</label>
-                <input name="system.foundation" type="checkbox" {{checked item.system.foundation}} />
-            </div>
-        </div>
-        <div class="form-group">
-            <label>{{localize "DAGGERHEART.Sheets.DomainCard.Domain"}}</label>
-            <div class="form-fields">
-                <select name="system.domain">
-                    {{selectOptions config.DOMAIN.domains selected=item.system.domain labelAttr="name" localize=true blank=""}}
-                </select>
-            </div>
-        </div>
-        <div class="form-group">
-            <label>{{localize "DAGGERHEART.Sheets.DomainCard.Costs"}}</label>
-            <div class="form-fields">
-                <label>{{localize "DAGGERHEART.Sheets.DomainCard.Level"}}</label>
-                <input name="system.level" value="{{item.system.level}}" type="text" data-dtype="Number" />
-                <label>{{localize "DAGGERHEART.Sheets.DomainCard.RecallCost"}}</label>
-                <input name="system.recallCost" value="{{item.system.recallCost}}" type="text" data-dtype="Number" />
-            </div>
-        </div>
-
-        <div class="domain-card-description">
-            <h2>{{localize "DAGGERHEART.Sheets.DomainCard.Description"}}</h2>
-            {{editor item.system.effect target="system.effect" button=true}}
-        </div>
-    </section>
-
-
-    <h2>{{localize "Actions"}} <i class="fa-solid fa-plus icon-button" data-action="addAction"></i></h2>
-    <div class="flexrow">
-        {{#each this.actions as |action index|}}
-            <div data-action="editAction" data-index="{{index}}" class="ability-chip">
-                <img src="{{action.img}}" />
-                <div>{{action.name}}</div>
-                <button data-action="removeAction" data-index="{{index}}"><i class="fa-solid fa-x"></i></button>
-            </div> 
-        {{/each}}
-    </div>
-</form>  --}}

templates/sheets/global/partials/feature-section-item.hbs

@@ -0,0 +1,28 @@
+<li class='feature-item' data-feature-id='{{feature.id}}'>
+    <div class='feature-line'>
+        <img class='image' src='{{feature.img}}' />
+        <h4>
+            {{feature.name}}
+        </h4>
+        {{#unless hideContrals}}
+            <div class='controls'>
+                <a
+                    class='effect-control'
+                    data-action='editFeature'
+                    data-feature={{feature.uuid}}
+                    data-tooltip='{{localize "DAGGERHEART.Tooltip.openItemWorld"}}'
+                >
+                    <i class="fa-solid fa-globe"></i>
+                </a>
+                <a
+                    class='effect-control'
+                    data-action='deleteFeature'
+                    data-feature={{feature.uuid}}
+                    data-tooltip='{{localize "DAGGERHEART.Tooltip.delete"}}'
+                >
+                    <i class='fas fa-trash'></i>
+                </a>
+            </div>
+        {{/unless}}
+    </div>
+</li>

templates/sheets/global/tabs/tab-description.hbs

@@ -6,5 +6,6 @@
     <fieldset>
         <legend>{{localize "DAGGERHEART.Sheets.Feature.Description"}}</legend>
         {{formInput systemFields.description value=source.system.description enriched=source.system.description localize=true toggled=true}}
+        {{formField systemFields.effect value=source.system.effect enriched=source.system.effect toggled=true}}
     </fieldset>
 </section>

templates/sheets/global/tabs/tab-feature-section.hbs

@@ -0,0 +1,14 @@
+<section
+    class='tab {{tabs.features.cssClass}} {{tabs.features.id}}'
+    data-tab='{{tabs.features.id}}'
+    data-group='{{tabs.features.group}}'
+>
+    <fieldset>
+        <legend>{{localize "DAGGERHEART.Sheets.Feature.Tabs.Features"}}</legend>
+        <div class="feature-list">
+            {{#each source.system.abilities as |feature key|}}
+                {{> 'systems/daggerheart/templates/sheets/global/partials/feature-section-item.hbs' feature=feature}}
+            {{/each}}
+        </div>
+    </fieldset>
+</section>

templates/sheets/items/ancestry/header.hbs

@@ -0,0 +1,9 @@
+<header class='item-card-header'>
+    <img class='profile' src='{{source.img}}' data-action='editImage' data-edit='img' />
+    <div class='item-info'>
+        <h1 class='item-name'><input type='text' name='name' value='{{source.name}}' /></h1>
+        <div class='item-description'>
+            <h3>{{localize 'TYPES.Item.ancestry'}}</h3>
+        </div>
+    </div>
+</header>

templates/sheets/items/community/header.hbs

@@ -0,0 +1,9 @@
+<header class='item-card-header'>
+    <img class='profile' src='{{source.img}}' data-action='editImage' data-edit='img' />
+    <div class='item-info'>
+        <h1 class='item-name'><input type='text' name='name' value='{{source.name}}' /></h1>
+        <div class='item-description'>
+            <h3>{{localize 'TYPES.Item.community'}}</h3>
+        </div>
+    </div>
+</header>

templates/sheets/items/domainCard/header.hbs

@@ -0,0 +1,26 @@
+<header class='item-card-header'>
+    <img class='profile' src='{{source.img}}' data-action='editImage' data-edit='img' />
+    <div class="item-icons-list">
+        <span class="item-icon">
+            <span class="recall-label">{{localize "DAGGERHEART.Sheets.DomainCard.RecallCost"}}</span>
+            <span class="recall-value">{{source.system.recallCost}}</span>
+            <i class="fa-solid fa-bolt"></i>
+        </span>
+    </div>
+    <div class='item-info'>
+        <h1 class='item-name'><input type='text' name='name' value='{{source.name}}' /></h1>
+        <div class='item-description'>
+            <h3>{{localize 'TYPES.Item.domainCard'}}</h3>
+            <h3>
+                {{localize (concat 'DAGGERHEART.Domain.CardTypes.' source.system.type)}}
+                <span>-</span>
+                {{source.system.domain}}
+                <span>-</span>
+                <span>
+                    {{localize "DAGGERHEART.Sheets.DomainCard.Level"}}:
+                    {{source.system.level}}
+                </span>
+            </h3>
+        </div>
+    </div>
+</header>

templates/sheets/items/domainCard/settings.hbs

@@ -0,0 +1,20 @@
+<section
+    class='tab {{tabs.settings.cssClass}} {{tabs.settings.id}}'
+    data-tab='{{tabs.settings.id}}'
+    data-group='{{tabs.settings.group}}'
+>
+    <fieldset class="two-columns">
+        <legend>{{localize tabs.settings.label}}</legend>
+
+        <span>{{localize "DAGGERHEART.Sheets.DomainCard.Type"}}</span>
+        {{formField systemFields.type value=source.system.type localize=true blank=""}}
+        <span>{{localize "DAGGERHEART.Sheets.DomainCard.Foundation"}}</span>
+        {{formField systemFields.foundation value=source.system.foundation }}
+        <span>{{localize "DAGGERHEART.Sheets.DomainCard.Domain"}}</span>
+        {{formField systemFields.domain value=source.system.domain localize=true blank=""}}
+        <span>{{localize "DAGGERHEART.Sheets.DomainCard.Level"}}</span>
+        {{formField systemFields.level value=source.system.level data-dtype="Number"}}
+        <span>{{localize "DAGGERHEART.Sheets.DomainCard.RecallCost"}}</span>
+        {{formField systemFields.recallCost value=source.system.recallCost data-dtype="Number"}}
+    </fieldset>
+</section>