diff --git a/.changeset/healthy-kangaroos-applaud.md b/.changeset/healthy-kangaroos-applaud.md
new file mode 100644
index 000000000..7121b4ce2
--- /dev/null
+++ b/.changeset/healthy-kangaroos-applaud.md
@@ -0,0 +1,5 @@
+---
+"markdown-it-myst": patch
+---
+
+Add inline options
diff --git a/.changeset/pink-birds-join.md b/.changeset/pink-birds-join.md
new file mode 100644
index 000000000..e39481903
--- /dev/null
+++ b/.changeset/pink-birds-join.md
@@ -0,0 +1,6 @@
+---
+"myst-directives": patch
+"myst-transforms": patch
+---
+
+Move QMD admonition recognition to a transform
diff --git a/.changeset/small-paws-suffer.md b/.changeset/small-paws-suffer.md
new file mode 100644
index 000000000..db61233a3
--- /dev/null
+++ b/.changeset/small-paws-suffer.md
@@ -0,0 +1,5 @@
+---
+"myst-directives": patch
+---
+
+div node does not require a body
diff --git a/.changeset/tough-terms-push.md b/.changeset/tough-terms-push.md
new file mode 100644
index 000000000..0786edf6e
--- /dev/null
+++ b/.changeset/tough-terms-push.md
@@ -0,0 +1,5 @@
+---
+"myst-roles": patch
+---
+
+Introduce a span role
diff --git a/docs/inline-options.md b/docs/inline-options.md
new file mode 100644
index 000000000..57cb374b0
--- /dev/null
+++ b/docs/inline-options.md
@@ -0,0 +1,54 @@
+---
+title: Inline Options
+subtitle: Concise specification of CSS classes, IDs, and attributes
+description: MyST Markdown has support for inline attributes for both roles and directives, allowing concise specification of CSS classes, IDs, and attributes. This complements other methods for defining options, making markup more expressive and flexible.
+# thumbnail: thumbnails/inline-options.png
+---
+
+:::{warning} Inline Options are in Beta
+The support for inline attributes is in beta and may have some bugs or limitations.
+Please give feedback on [GitHub](https://github.com/orgs/jupyter-book/discussions).
+:::
+
+MyST Markdown has support for inline attributes for both roles and directives, allowing concise specification of CSS classes, IDs, and attributes. This complements other methods for defining options, making markup more expressive and flexible.
+
+```markdown
+:::{tip .dropdown open="true"} Title
+Tip Content
+:::
+```
+
+This can also be used for roles:
+
+`` {span .text-red-500}`Red text` ``
+
+{span .text-red-500}`Red text`
+
+## Syntax Overview
+
+The inline attribute syntax follows this pattern:
+
+````text
+{role #id .class key="value" key=value}`content`
+
+```{directive #id .class key="value" key=value}
+content
+```
+````
+
+Name (e.g. `tip` or `cite:p`)
+: The directive or role name must come first. There must only be a single "bare" token.
+
+ID (`#id`)
+: Defines the label/identifier of the node
+
+Class (`.class`)
+: Adds CSS class(es).
+
+Quoted Attributes (`key="value"`)
+: Supports attributes containing spaces or special characters.
+
+Unquoted Attributes (`key=value` or `key=123`)
+: Allows simpler attribute values when there are no spaces.
+
+For directives, these can be mixed with other ways to define options on directives, classes are combined in a single space-separated string; other repeated directive options will raise a duplicate option warning.
diff --git a/docs/myst.yml b/docs/myst.yml
index 36d397c9d..250106d2d 100644
--- a/docs/myst.yml
+++ b/docs/myst.yml
@@ -101,6 +101,7 @@ project:
         - file: glossaries-and-terms.md
         - file: writing-in-latex.md
         - file: table-of-contents.md
+        - file: inline-options.md
     - title: Executable Content
       children:
         - file: notebooks-with-markdown.md
diff --git a/docs/syntax-overview.md b/docs/syntax-overview.md
index 401939c3d..44f9109c1 100644
--- a/docs/syntax-overview.md
+++ b/docs/syntax-overview.md
@@ -63,7 +63,7 @@ My directive content.
 
 2\) **directive options** - a collection of flags or key/value pairs that come just underneath `{directivename}`.
 
-There are two ways to write directive options, as `:key: value` or as a YAML block.
+There are three ways to write directive options: as `:key: value`, as a YAML block, or directly inline.
 
 ``````{tab-set}
 `````{tab-item} Key value pairs
@@ -89,6 +89,14 @@ key1: metadata1
 key2: metadata2
 ---
 
+My directive content.
+```
+````
+`````
+`````{tab-item} Inline Options
+Options can be included inline. See [](./inline-options.md) for more information.
+````markdown
+```{directivename .class-name #label key="value"}
 My directive content.
 ```
 ````
@@ -117,6 +125,12 @@ Roles are defined inline, with an identifier and input. There are a number of ro
 Here is an {abc}`unknown role`.
 ```
 
+Options for roles can be included inline. See [](./inline-options.md) for more information.
+
+```markdown
+Here is my {span #label .class-name key="value"}`custom span`.
+```
+
 (nesting-content)=
 
 ## Nesting content blocks in Markdown
diff --git a/packages/markdown-it-myst/src/directives.ts b/packages/markdown-it-myst/src/directives.ts
index e5477adfe..01abf8362 100644
--- a/packages/markdown-it-myst/src/directives.ts
+++ b/packages/markdown-it-myst/src/directives.ts
@@ -5,6 +5,7 @@ import type MarkdownIt from 'markdown-it/lib';
 import type StateCore from 'markdown-it/lib/rules_core/state_core.js';
 import { nestedPartToTokens } from './nestedParse.js';
 import { stateError, stateWarn } from './utils.js';
+import { inlineOptionsToTokens } from './inlineAttributes.js';
 
 const COLON_OPTION_REGEX = /^:(?<option>[^:\s]+?):(\s*(?<value>.*)){0,1}\s*$/;
 
@@ -26,7 +27,7 @@ function computeBlockTightness(
 function replaceFences(state: StateCore): boolean {
   for (const token of state.tokens) {
     if (token.type === 'fence' || token.type === 'colon_fence') {
-      const match = token.info.match(/^\s*\{\s*([^}\s]+)\s*\}\s*(.*)$/);
+      const match = token.info.match(/^\s*\{\s*([^}]+)\s*\}\s*(.*)$/);
       if (match) {
         token.type = 'directive';
         token.info = match[1].trim();
@@ -45,12 +46,17 @@ function runDirectives(state: StateCore): boolean {
       try {
         const { info, map } = token;
         const arg = token.meta.arg?.trim() || undefined;
+        const {
+          name = 'div',
+          tokens: inlineOptTokens,
+          options: inlineOptions,
+        } = inlineOptionsToTokens(info, map?.[0] ?? 0, state);
         const content = parseDirectiveContent(
           token.content.trim() ? token.content.split(/\r?\n/) : [],
-          info,
+          name,
           state,
         );
-        const { body, options } = content;
+        const { body, options, optionsLocation } = content;
         let { bodyOffset } = content;
         while (body.length && !body[0].trim()) {
           body.shift();
@@ -58,25 +64,31 @@ function runDirectives(state: StateCore): boolean {
         }
         const bodyString = body.join('\n').trimEnd();
         const directiveOpen = new state.Token('parsed_directive_open', '', 1);
-        directiveOpen.info = info;
+        directiveOpen.info = name;
         directiveOpen.hidden = true;
         directiveOpen.content = bodyString;
         directiveOpen.map = map;
         directiveOpen.meta = {
           arg,
-          options: getDirectiveOptions(options),
+          options: getDirectiveOptions([...inlineOptions, ...(options ?? [])]),
           // Tightness is computed for all directives (are they separated by a newline before/after)
           tight: computeBlockTightness(state.src, token.map),
         };
         const startLineNumber = map ? map[0] : 0;
         const argTokens = directiveArgToTokens(arg, startLineNumber, state);
-        const optsTokens = directiveOptionsToTokens(options || [], startLineNumber + 1, state);
+        const optsTokens = directiveOptionsToTokens(
+          options || [],
+          startLineNumber + 1,
+          state,
+          optionsLocation,
+        );
         const bodyTokens = directiveBodyToTokens(bodyString, startLineNumber + bodyOffset, state);
         const directiveClose = new state.Token('parsed_directive_close', '', -1);
         directiveClose.info = info;
         directiveClose.hidden = true;
         const newTokens = [
           directiveOpen,
+          ...inlineOptTokens,
           ...argTokens,
           ...optsTokens,
           ...bodyTokens,
@@ -110,6 +122,7 @@ function parseDirectiveContent(
   body: string[];
   bodyOffset: number;
   options?: [string, string | true][];
+  optionsLocation?: 'yaml' | 'colon';
 } {
   let bodyOffset = 1;
   let yamlBlock: string[] | null = null;
@@ -136,7 +149,12 @@ function parseDirectiveContent(
     try {
       const options = yaml.load(yamlBlock.join('\n')) as Record<string, any>;
       if (options && typeof options === 'object') {
-        return { body: newContent, options: Object.entries(options), bodyOffset };
+        return {
+          body: newContent,
+          options: Object.entries(options),
+          bodyOffset,
+          optionsLocation: 'yaml',
+        };
       }
     } catch (err) {
       stateWarn(
@@ -162,7 +180,7 @@ function parseDirectiveContent(
         bodyOffset++;
       }
     }
-    return { body: newContent, options, bodyOffset };
+    return { body: newContent, options, bodyOffset, optionsLocation: 'colon' };
   }
   return { body: content, bodyOffset: 1 };
 }
@@ -172,9 +190,13 @@ function directiveArgToTokens(arg: string, lineNumber: number, state: StateCore)
 }
 
 function getDirectiveOptions(options?: [string, string | true][]) {
-  if (!options) return undefined;
+  if (!options || options.length === 0) return undefined;
   const simplified: Record<string, string | true> = {};
   options.forEach(([key, val]) => {
+    if (key === 'class' && simplified.class) {
+      simplified.class += ` ${val}`;
+      return;
+    }
     if (simplified[key] !== undefined) {
       return;
     }
@@ -187,6 +209,7 @@ function directiveOptionsToTokens(
   options: [string, string | true][],
   lineNumber: number,
   state: StateCore,
+  optionsLocation?: 'yaml' | 'colon',
 ) {
   const tokens = options.map(([key, value], index) => {
     // lineNumber mapping assumes each option is only one line;
@@ -194,7 +217,7 @@ function directiveOptionsToTokens(
     const optTokens =
       typeof value === 'string'
         ? nestedPartToTokens(
-            'directive_option',
+            'myst_option',
             value,
             lineNumber + index,
             state,
@@ -202,13 +225,13 @@ function directiveOptionsToTokens(
             true,
           )
         : [
-            new state.Token('directive_option_open', '', 1),
-            new state.Token('directive_option_close', '', -1),
+            new state.Token('myst_option_open', '', 1),
+            new state.Token('myst_option_close', '', -1),
           ];
     if (optTokens.length) {
       optTokens[0].info = key;
       optTokens[0].content = typeof value === 'string' ? value : '';
-      optTokens[0].meta = { value };
+      optTokens[0].meta = { location: optionsLocation, value };
     }
     return optTokens;
   });
diff --git a/packages/markdown-it-myst/src/inlineAttributes.spec.ts b/packages/markdown-it-myst/src/inlineAttributes.spec.ts
new file mode 100644
index 000000000..c2651d024
--- /dev/null
+++ b/packages/markdown-it-myst/src/inlineAttributes.spec.ts
@@ -0,0 +1,99 @@
+// parseRoleHeader.spec.ts
+import { describe, expect, test } from 'vitest';
+import { inlineOptionsToTokens, tokenizeInlineAttributes } from './inlineAttributes';
+
+describe('parseRoleHeader', () => {
+  // Good (valid) test cases
+  test.each([
+    ['simple', [{ kind: 'bare', value: 'simple' }]],
+    [
+      'someRole .cls1 .cls2',
+      [
+        { kind: 'bare', value: 'someRole' },
+        { kind: 'class', value: 'cls1' },
+        { kind: 'class', value: 'cls2' },
+      ],
+    ],
+    [
+      'myRole #foo',
+      [
+        { kind: 'bare', value: 'myRole' },
+        { kind: 'id', value: 'foo' },
+      ],
+    ],
+    [
+      'myRole .red #xyz attr="value"',
+      [
+        { kind: 'bare', value: 'myRole' },
+        { kind: 'class', value: 'red' },
+        { kind: 'id', value: 'xyz' },
+        { kind: 'attr', key: 'attr', value: 'value' },
+      ],
+    ],
+    [
+      'roleName data="some \\"escaped\\" text"',
+      [
+        { kind: 'bare', value: 'roleName' },
+        { kind: 'attr', key: 'data', value: 'some "escaped" text' },
+      ],
+    ],
+    ['.className', [{ kind: 'class', value: 'className' }]],
+    [
+      'myRole open=true',
+      [
+        { kind: 'bare', value: 'myRole' },
+        { kind: 'attr', key: 'open', value: 'true' },
+      ],
+    ],
+    [
+      'myRole open=""',
+      [
+        { kind: 'bare', value: 'myRole' },
+        { kind: 'attr', key: 'open', value: '' },
+      ],
+    ],
+    [
+      'myRole #foo.',
+      [
+        { kind: 'bare', value: 'myRole' },
+        { kind: 'unknown', value: '#foo.' },
+      ],
+    ],
+    [
+      'myRole foo="{testing .blah}`content`"',
+      [
+        { kind: 'bare', value: 'myRole' },
+        { kind: 'attr', key: 'foo', value: '{testing .blah}`content`' },
+      ],
+    ],
+    ['cite:p', [{ kind: 'bare', value: 'cite:p' }]],
+    ['CITE:P', [{ kind: 'bare', value: 'CITE:P' }]],
+    ['1', [{ kind: 'bare', value: '1' }]],
+    ['    abc   ', [{ kind: 'bare', value: 'abc' }]],
+    [
+      'half-quote blah="asdf',
+      [
+        { kind: 'bare', value: 'half-quote' },
+        { kind: 'unknown', value: 'blah="asdf' },
+      ],
+    ],
+  ])('parses valid header: %s', (header, expected) => {
+    const result = tokenizeInlineAttributes(header);
+    expect(result).toEqual(expected);
+  });
+
+  // Error test cases
+  test.each([
+    [
+      'Extra bare token after name',
+      'myRole anotherWord',
+      'No additional bare tokens allowed after the first token',
+    ],
+    ['Multiple IDs', 'myRole #first #second', 'Cannot have more than one ID defined'],
+    ['ID starts with a digit', 'myRole #1bad', 'ID cannot start with a number: "1bad"'],
+    ['Unknown token', 'myRole #bad.', 'Unknown token "#bad."'],
+    ['Unknown token', 'myRole .class.no.space', 'Classes must be separated by spaces'],
+  ])('throws error: %s', (_, header, expectedMessage) => {
+    expect(() => inlineOptionsToTokens(header, 0, null as any)).toThrow(expectedMessage);
+  });
+});
diff --git a/packages/markdown-it-myst/src/inlineAttributes.ts b/packages/markdown-it-myst/src/inlineAttributes.ts
new file mode 100644
index 000000000..a3d72401a
--- /dev/null
+++ b/packages/markdown-it-myst/src/inlineAttributes.ts
@@ -0,0 +1,144 @@
+import type StateCore from 'markdown-it/lib/rules_core/state_core.js';
+import { nestedPartToTokens } from './nestedParse.js';
+import type Token from 'markdown-it/lib/token.js';
+
+export type InlineAttributes = {
+  name: string;
+  id?: string;
+  classes?: string[];
+  attrs?: Record<string, string>;
+};
+
+/**
+ * Tokenizes the inline-attributes header into:
+ *   - `.className` => { kind: 'class', value: string }
+ *   - `#something` => { kind: 'id', value: string } (relaxed to match digits too)
+ *   - `key="someValue"` => { kind: 'attr', key, value }
+ *   - leftover / bare => { kind: 'bare', value }
+ */
+export function tokenizeInlineAttributes(header: string) {
+  // This pattern uses five alternations:
+  // 1)  (\.[A-Za-z0-9_-]+)                     => matches `.className`
+  // 2)  (#[A-Za-z0-9_-]+)                      => matches `#id` (relaxed to allow digits)
+  // 3)  ([a-zA-Z0-9_-]+)="((?:\\.|[^\\"])*)"   => matches key="value" with possible escapes
+  // 4)  ([a-zA-Z0-9_-]+)=([^\s"']+)            => matches key=value (unquoted values without spaces)
+  // 5)  ([A-Za-z0-9_:-]+)                      => matches bare tokens
+  // b)  ([^\s]+)                               => matches unknown tokens
+  const pattern =
+    /(\.[A-Za-z0-9_-]+(?:\s|$))|(#[A-Za-z0-9_-]+(?:\s|$))|([a-zA-Z0-9_-]+)="((?:\\.|[^\\"])*)"(?:\s|$)|([a-zA-Z0-9_-]+)=([^\s"']+)(?:\s|$)|([A-Za-z0-9_:-]+)(?:\s|$)|([^\s]+)/g;
+
+  const results: Array<
+    | { kind: 'class'; value: string }
+    | { kind: 'id'; value: string }
+    | { kind: 'attr'; key: string; value: string }
+    | { kind: 'bare'; value: string }
+    | { kind: 'unknown'; value: string }
+  > = [];
+
+  let match;
+  while ((match = pattern.exec(header)) !== null) {
+    const [
+      ,
+      classGroup,
+      idGroup,
+      attrKeyQuoted,
+      attrValQuoted,
+      attrKeyUnquoted,
+      attrValUnquoted,
+      bareGroup,
+      unknownGroup,
+    ] = match;
+
+    if (classGroup) {
+      results.push({ kind: 'class', value: classGroup.slice(1).trim() });
+    } else if (idGroup) {
+      results.push({ kind: 'id', value: idGroup.slice(1).trim() });
+    } else if (attrKeyQuoted && attrValQuoted !== undefined) {
+      // unescape any \" within the quoted attribute value
+      const unescaped = attrValQuoted.replace(/\\"/g, '"').trim();
+      results.push({ kind: 'attr', key: attrKeyQuoted, value: unescaped });
+    } else if (attrKeyUnquoted && attrValUnquoted !== undefined) {
+      results.push({ kind: 'attr', key: attrKeyUnquoted, value: attrValUnquoted.trim() });
+    } else if (bareGroup) {
+      results.push({ kind: 'bare', value: bareGroup.trim() });
+    } else if (unknownGroup) {
+      results.push({ kind: 'unknown', value: unknownGroup.trim() });
+    }
+  }
+
+  return results;
+}
+
+export function inlineOptionsToTokens(
+  header: string,
+  lineNumber: number,
+  state: StateCore,
+): { name?: string; tokens: Token[]; options: [string, string][] } {
+  // Tokenize
+  const tokens = tokenizeInlineAttributes(header);
+
+  if (tokens.length === 0) {
+    throw new Error('No inline tokens found');
+  }
+
+  // The first token should be a “bare” token => the name
+  // If no bare token is included, then the name is undefined
+  let name = undefined;
+  if (tokens[0].kind === 'bare') {
+    name = tokens[0].value;
+    tokens.shift();
+  }
+
+  if (tokens.filter(({ kind }) => kind === 'id').length > 1) {
+    throw new Error('Cannot have more than one ID defined');
+  }
+  if (tokens.some(({ kind }) => kind === 'bare')) {
+    throw new Error('No additional bare tokens allowed after the first token');
+  }
+
+  const markdownItTokens = tokens.map((opt) => {
+    if (opt.kind === 'id' && /^[0-9]/.test(opt.value)) {
+      throw new Error(`ID cannot start with a number: "${opt.value}"`);
+    }
+    if (opt.kind === 'unknown') {
+      if (opt.value.match(/\.[A-Za-z0-9_\-.]+/)) {
+        // Throw a nice error about unknown classes that are missing spaces
+        throw new Error(
+          `Unknown token "${opt.value}". Classes must be separated by spaces, try "${opt.value.replace(/\./g, ' .').trim()}"`,
+        );
+      }
+      throw new Error(`Unknown token "${opt.value}"`);
+    }
+    if (opt.kind === 'class' || opt.kind === 'id' || opt.kind === 'bare') {
+      const classTokens = [
+        new state.Token('myst_option_open', '', 1),
+        new state.Token('myst_option_close', '', -1),
+      ];
+      classTokens[0].info = opt.kind;
+      classTokens[0].content =
+        opt.kind === 'class' ? `.${opt.value}` : opt.kind === 'id' ? `#${opt.value}` : opt.value;
+      classTokens[0].meta = { location: 'inline', ...opt };
+      return classTokens;
+    }
+
+    const optTokens = nestedPartToTokens(
+      'myst_option',
+      opt.value,
+      lineNumber,
+      state,
+      'run_roles',
+      true,
+    );
+    if (optTokens.length) {
+      optTokens[0].info = opt.key;
+      optTokens[0].content = opt.value;
+      optTokens[0].meta = { location: 'inline', ...opt };
+    }
+    return optTokens;
+  });
+  const options = tokens.map((t): [string, string] => [
+    t.kind === 'attr' ? t.key : t.kind === 'id' ? 'label' : t.kind,
+    t.value,
+  ]);
+  return { name, tokens: markdownItTokens.flat(), options };
+}
diff --git a/packages/markdown-it-myst/src/nestedParse.ts b/packages/markdown-it-myst/src/nestedParse.ts
index 07f0cf79c..b414314df 100644
--- a/packages/markdown-it-myst/src/nestedParse.ts
+++ b/packages/markdown-it-myst/src/nestedParse.ts
@@ -63,7 +63,7 @@ export function nestedPartToTokens(
   state: StateCore,
   pluginRuleName: string,
   inline: boolean,
-) {
+): Token[] {
   if (!part) return [];
   const openToken = new state.Token(`${partName}_open`, '', 1);
   openToken.content = part;
diff --git a/packages/markdown-it-myst/src/roles.ts b/packages/markdown-it-myst/src/roles.ts
index 4621a8af7..8884f4984 100644
--- a/packages/markdown-it-myst/src/roles.ts
+++ b/packages/markdown-it-myst/src/roles.ts
@@ -2,6 +2,7 @@ import type MarkdownIt from 'markdown-it/lib';
 import type StateCore from 'markdown-it/lib/rules_core/state_core.js';
 import type StateInline from 'markdown-it/lib/rules_inline/state_inline.js';
 import { nestedPartToTokens } from './nestedParse.js';
+import { inlineOptionsToTokens } from './inlineAttributes.js';
 
 export function rolePlugin(md: MarkdownIt): void {
   md.inline.ruler.before('backticks', 'parse_roles', roleRule);
@@ -21,19 +22,39 @@ export function rolePlugin(md: MarkdownIt): void {
   };
 }
 
+// This captures everything between { and }, then captures backticks + body
+// We keep negative lookahead/lookbehind for avoiding triple-backtick or edge issues
+let _x: RegExp;
+try {
+  // This pattern has three capturing groups:
+  // 1) Everything inside { }, e.g. `something .class #id attr="value"`
+  // 2) The sequence of backticks
+  // 3) The actual content between those backticks
+  _x = new RegExp('^\\{\\s*([^}]+?)\\s*\\}(`+)(?!`)(.+?)(?<!`)\\2(?!`)');
+} catch (err) {
+  // Safari does not support negative look-behinds
+  // This is a slightly down-graded variant, as it does not require a space.
+  _x = /^\{\s*([^}]+?)\s*\}(`+)(?!`)(.+?)\2(?!`)/;
+}
+
+const ROLE_PATTERN = _x;
+
 function roleRule(state: StateInline, silent: boolean): boolean {
   // Check if the role is escaped
-  if (state.src.charCodeAt(state.pos - 1) === 0x5c) {
-    /* \ */
-    // TODO: this could be improved in the case of edge case '\\{', also multi-line
+  if (state.src.charCodeAt(state.pos - 1) === 0x5c /* '\' */) {
     return false;
   }
+
   const match = ROLE_PATTERN.exec(state.src.slice(state.pos));
   if (match == null) return false;
-  const [str, name, , content] = match;
+
+  // match[1] = everything inside the braces
+  // match[2] = sequence of backticks
+  // match[4] = content inside those backticks
+  const [str, header, , content] = match;
   if (!silent) {
     const token = state.push('role', '', 0);
-    token.meta = { name };
+    token.info = header;
     token.content = content;
     (token as any).col = [state.pos, state.pos + str.length];
   }
@@ -41,19 +62,6 @@ function roleRule(state: StateInline, silent: boolean): boolean {
   return true;
 }
 
-// MyST role syntax format e.g. {role}`text`
-// TODO: support role with no value e.g. {role}``
-let _x: RegExp;
-try {
-  // This regex must be defined like this or Safari will crash
-  _x = new RegExp('^\\{\\s*([a-zA-Z_\\-+:]{1,36})\\s*\\}(`+)(?!`)(.+?)(?<!`)\\2(?!`)');
-} catch (error) {
-  // Safari does not support negative look-behinds
-  // This is a slightly down-graded variant, as it does not require a space.
-  _x = /^\{\s*([a-zA-Z_\-+:]{1,36})\s*\}(`+)(?!`)(.+?)\2(?!`)/;
-}
-const ROLE_PATTERN = _x;
-
 /** Run all roles, replacing the original token */
 function runRoles(state: StateCore): boolean {
   for (const token of state.tokens) {
@@ -64,25 +72,36 @@ function runRoles(state: StateCore): boolean {
           try {
             const { map } = token;
             const { content, col } = child as any;
+            // Note, if default role as `span` is wanted, add a
+            // `name = 'span'` here and remove thrown error below
+            const { name, tokens: optTokens } = inlineOptionsToTokens(
+              child.info,
+              map?.[0] ?? 0,
+              state,
+            );
+            if (!name) {
+              throw new Error('A role name is required, for example, "{sub}`2`"');
+            }
             const roleOpen = new state.Token('parsed_role_open', '', 1);
             roleOpen.content = content;
             roleOpen.hidden = true;
-            roleOpen.info = child.meta.name;
+            roleOpen.info = name;
+            roleOpen.meta = { header: child.info };
             roleOpen.block = false;
             roleOpen.map = map;
             (roleOpen as any).col = col;
-            const contentTokens = roleContentToTokens(content, map ? map[0] : 0, state);
+            const contentTokens = roleContentToTokens(content, map?.[0] ?? 0, state);
             const roleClose = new state.Token('parsed_role_close', '', -1);
             roleClose.block = false;
             roleClose.hidden = true;
-            roleOpen.info = child.meta.name;
-            const newTokens = [roleOpen, ...contentTokens, roleClose];
+            roleOpen.info = name;
+            const newTokens = [roleOpen, ...optTokens, ...contentTokens, roleClose];
             childTokens.push(...newTokens);
           } catch (err) {
             const errorToken = new state.Token('role_error', '', 0);
             errorToken.content = child.content;
             errorToken.info = child.info;
-            errorToken.meta = child.meta;
+            errorToken.meta = child.meta ?? {};
             errorToken.map = child.map;
             errorToken.meta.error_message = (err as Error).message;
             errorToken.meta.error_name = (err as Error).name;
diff --git a/packages/markdown-it-myst/tests/directives.spec.ts b/packages/markdown-it-myst/tests/directives.spec.ts
index f30551358..57197ccf5 100644
--- a/packages/markdown-it-myst/tests/directives.spec.ts
+++ b/packages/markdown-it-myst/tests/directives.spec.ts
@@ -18,9 +18,9 @@ describe('parses directives', () => {
       'directive_arg_open',
       'inline',
       'directive_arg_close',
-      'directive_option_open',
+      'myst_option_open',
       'inline',
-      'directive_option_close',
+      'myst_option_close',
       'directive_body_open',
       'paragraph_open',
       'inline',
@@ -39,8 +39,8 @@ describe('parses directives', () => {
     const tokens = mdit.parse('```{abc}\n:flag:\n```', {});
     expect(tokens.map((t) => t.type)).toEqual([
       'parsed_directive_open',
-      'directive_option_open',
-      'directive_option_close',
+      'myst_option_open',
+      'myst_option_close',
       'parsed_directive_close',
     ]);
     expect(tokens[0].info).toEqual('abc');
@@ -53,8 +53,8 @@ describe('parses directives', () => {
     const tokens = mdit.parse('```{abc}\n:flag: \n```', {});
     expect(tokens.map((t) => t.type)).toEqual([
       'parsed_directive_open',
-      'directive_option_open',
-      'directive_option_close',
+      'myst_option_open',
+      'myst_option_close',
       'parsed_directive_close',
     ]);
     expect(tokens[0].info).toEqual('abc');
@@ -97,9 +97,9 @@ describe('parses directives', () => {
     const tokens = mdit.parse('```{abc}\n:key:val:val\n```', {});
     expect(tokens.map((t) => t.type)).toEqual([
       'parsed_directive_open',
-      'directive_option_open',
+      'myst_option_open',
       'inline',
-      'directive_option_close',
+      'myst_option_close',
       'parsed_directive_close',
     ]);
     expect(tokens[0].info).toEqual('abc');
@@ -125,12 +125,12 @@ describe('parses directives', () => {
     const tokens = mdit.parse('```{abc}\n---\na: x\nb: y\n---\n```', {});
     expect(tokens.map((t) => t.type)).toEqual([
       'parsed_directive_open',
-      'directive_option_open',
+      'myst_option_open',
       'inline',
-      'directive_option_close',
-      'directive_option_open',
+      'myst_option_close',
+      'myst_option_open',
       'inline',
-      'directive_option_close',
+      'myst_option_close',
       'parsed_directive_close',
     ]);
     expect(tokens[0].info).toEqual('abc');
@@ -167,13 +167,6 @@ describe('parses directives', () => {
     expect(tokens[0].info).toEqual('abc');
     expect(tokens[2].info).toEqual('xyz');
   });
-  it('directives cannot have spaces', () => {
-    // We may change this in the future, if we add pandoc support
-    const mdit = MarkdownIt().use(plugin);
-    const tokens = mdit.parse('```` { ab c }\n\n``` { xyz }\n```\n\n````', {});
-    expect(tokens.map((t) => t.type)).toEqual(['fence']);
-    expect(tokens[0].info).toEqual(' { ab c }');
-  });
   it.each([
     [false, 'Paragraph\n\n```{math}\nAx=b\n```\n\nAfter paragraph'],
     [false, '```{math}\nAx=b\n```'],
@@ -189,4 +182,29 @@ describe('parses directives', () => {
     const open = tokens.find((t) => t.type === 'parsed_directive_open');
     expect(open?.meta.tight).toBe(tight);
   });
+  it('directives can have inline options', () => {
+    // We may change this in the future, if we add pandoc support
+    const mdit = MarkdownIt().use(plugin);
+    const tokens = mdit.parse('```{ab .a} arg\n:class: b\n```', {});
+    expect(tokens.map((t) => t.type)).toEqual([
+      'parsed_directive_open',
+      'myst_option_open',
+      'myst_option_close',
+      'directive_arg_open',
+      'inline',
+      'directive_arg_close',
+      'myst_option_open',
+      'inline',
+      'myst_option_close',
+      'parsed_directive_close',
+    ]);
+    expect(tokens[0].info).toEqual('ab');
+    expect(tokens[0].meta.options).toEqual({ class: 'a b' });
+    expect(tokens[1].info).toEqual('class');
+    expect(tokens[1].meta.value).toEqual('a');
+    expect(tokens[1].content).toEqual('.a');
+    expect(tokens[6].info).toEqual('class');
+    expect(tokens[6].meta.value).toEqual('b');
+    expect(tokens[6].content).toEqual('b');
+  });
 });
diff --git a/packages/markdown-it-myst/tests/roles.spec.ts b/packages/markdown-it-myst/tests/roles.spec.ts
index 83d3f8eb0..bf927d21a 100644
--- a/packages/markdown-it-myst/tests/roles.spec.ts
+++ b/packages/markdown-it-myst/tests/roles.spec.ts
@@ -77,6 +77,51 @@ describe('parses roles', () => {
     const mdit = MarkdownIt().use(plugin);
     const tokens = mdit.parse('{  ab c }`hello`', {});
     expect(tokens.map((t) => t.type)).toEqual(['paragraph_open', 'inline', 'paragraph_close']);
-    expect(tokens[1].children?.map((t) => t.type)).toEqual(['text', 'code_inline']);
+    expect(tokens[1].children?.map((t) => t.type)).toEqual(['role_error']);
+  });
+  it('inline role has attributes', () => {
+    const mdit = MarkdownIt().use(plugin);
+    const tokens = mdit.parse('{ab .c #my-id something="_blah_"}`hello`', {});
+    expect(tokens.map((t) => t.type)).toEqual(['paragraph_open', 'inline', 'paragraph_close']);
+    expect(tokens[1].children?.map((t) => t.type)).toEqual([
+      'parsed_role_open',
+      'myst_option_open',
+      'myst_option_close',
+      'myst_option_open',
+      'myst_option_close',
+      'myst_option_open',
+      'inline',
+      'myst_option_close',
+      'role_body_open',
+      'inline',
+      'role_body_close',
+      'parsed_role_close',
+    ]);
+    const role = tokens[1];
+    expect(role.children?.[0].content).toBe('hello');
+    expect(role.children?.[0].info).toBe('ab');
+    expect(role.children?.[0].meta.header).toBe('ab .c #my-id something="_blah_"');
+    // Classes
+    expect(role.children?.[1].info).toBe('class');
+    expect(role.children?.[1].content).toBe('.c');
+    expect(role.children?.[1].meta).toEqual({ location: 'inline', kind: 'class', value: 'c' });
+    // IDs
+    expect(role.children?.[3].info).toBe('id');
+    expect(role.children?.[3].content).toBe('#my-id');
+    expect(role.children?.[3].meta).toEqual({ location: 'inline', kind: 'id', value: 'my-id' });
+    // Attributes
+    expect(role.children?.[5].info).toBe('something');
+    expect(role.children?.[5].content).toBe('_blah_');
+    expect(role.children?.[5].meta).toEqual({
+      location: 'inline',
+      kind: 'attr',
+      key: 'something',
+      value: '_blah_',
+    });
+    // Inline parse
+    expect(role.children?.[6].info).toBe('');
+    expect(role.children?.[6].content).toBe('_blah_');
+    expect(role.children?.[6].children?.length).toBe(3);
+    expect(role.children?.[6].children?.[0].tag).toBe('em');
   });
 });
diff --git a/packages/myst-cli/src/init/jupyter-book/syntax.ts b/packages/myst-cli/src/init/jupyter-book/syntax.ts
index 6bf2d748f..30ad60065 100644
--- a/packages/myst-cli/src/init/jupyter-book/syntax.ts
+++ b/packages/myst-cli/src/init/jupyter-book/syntax.ts
@@ -154,17 +154,20 @@ export async function upgradeContent(documentLines: string[]): Promise<string[]
 }
 
 const admonitionPattern =
-  /^(attention|caution|danger|error|important|hint|note|seealso|tip|warning|\.callout-note|\.callout-warning|\.callout-important|\.callout-tip|\.callout-caution)$/;
+  /^(attention|caution|danger|error|important|hint|note|seealso|tip|warning)$/;
 
 async function upgradeNotes(documentLines: string[]): Promise<string[] | undefined> {
   const data = documentLines.join('\n');
   const mdast = mystParse(data);
 
-  const caseInsenstivePattern = new RegExp(admonitionPattern.source, admonitionPattern.flags + 'i');
+  const caseInsensitivePattern = new RegExp(
+    admonitionPattern.source,
+    admonitionPattern.flags + 'i',
+  );
   const directiveNodes = selectAll('mystDirective', mdast);
   const mixedCaseAdmonitions = directiveNodes.filter((item) => {
     const name = (item as any).name as string;
-    return name.match(caseInsenstivePattern) && !name.match(admonitionPattern);
+    return name.match(caseInsensitivePattern) && !name.match(admonitionPattern);
   });
   mixedCaseAdmonitions.forEach((node) => {
     const start = node.position!.start.line;
diff --git a/packages/myst-cli/src/transforms/images.ts b/packages/myst-cli/src/transforms/images.ts
index f91382090..b6c40fb9e 100644
--- a/packages/myst-cli/src/transforms/images.ts
+++ b/packages/myst-cli/src/transforms/images.ts
@@ -196,7 +196,7 @@ export function transformImagesWithoutExt(
       const sortedExtensions = [
         // Valid extensions
         ...(opts?.imageExtensions ?? []),
-        // Convertable extensions
+        // Convertible extensions
         ...Object.keys(conversionFnLookup),
         // All known extensions
         ...KNOWN_IMAGE_EXTENSIONS,
diff --git a/packages/myst-common/src/types.ts b/packages/myst-common/src/types.ts
index 4e0340e90..a4c82e003 100644
--- a/packages/myst-common/src/types.ts
+++ b/packages/myst-common/src/types.ts
@@ -85,6 +85,7 @@ export type RoleData = {
   name: string;
   node: Role;
   body?: ParseTypes;
+  options?: Record<string, ParseTypes>;
 };
 
 export type DirectiveContext = {
@@ -106,6 +107,7 @@ export type RoleSpec = {
   name: string;
   alias?: string[];
   doc?: string;
+  options?: Record<string, OptionDefinition>;
   body?: BodyDefinition;
   validate?: (data: RoleData, vfile: VFile) => RoleData;
   run: (data: RoleData, vfile: VFile) => GenericNode[];
diff --git a/packages/myst-directives/src/admonition.ts b/packages/myst-directives/src/admonition.ts
index 61e3b022c..2deb1e059 100644
--- a/packages/myst-directives/src/admonition.ts
+++ b/packages/myst-directives/src/admonition.ts
@@ -16,11 +16,6 @@ export const admonitionDirective: DirectiveSpec = {
     'seealso',
     'tip',
     'warning',
-    '.callout-note',
-    '.callout-warning',
-    '.callout-important',
-    '.callout-tip',
-    '.callout-caution',
   ],
   arg: {
     type: 'myst',
@@ -65,10 +60,7 @@ export const admonitionDirective: DirectiveSpec = {
     }
     const admonition: Admonition = {
       type: 'admonition',
-      kind:
-        data.name !== 'admonition'
-          ? (data.name.replace('.callout-', '') as Admonition['kind'])
-          : undefined,
+      kind: data.name !== 'admonition' ? (data.name as Admonition['kind']) : undefined,
       children: children as any[],
     };
     if (data.options?.icon === false) {
diff --git a/packages/myst-directives/src/code.ts b/packages/myst-directives/src/code.ts
index ebf7d739a..e9590336d 100644
--- a/packages/myst-directives/src/code.ts
+++ b/packages/myst-directives/src/code.ts
@@ -26,7 +26,7 @@ export function getCodeBlockOptions(
   const { options, node } = data;
   if (options?.['lineno-start'] != null && options?.['number-lines'] != null) {
     fileWarn(vfile, 'Cannot use both "lineno-start" and "number-lines"', {
-      node: select('mystDirectiveOption[name="number-lines"]', node) ?? node,
+      node: select('mystOption[name="number-lines"]', node) ?? node,
       source: 'code-block:options',
       ruleId: RuleId.directiveOptionsCorrect,
     });
@@ -101,7 +101,7 @@ export function parseTags(input: any, vfile: VFile, node: GenericNode): string[]
       return parseTags(yaml.load(input) as string[], vfile, node);
     } catch (error) {
       fileError(vfile, 'Could not load tags for code-cell directive', {
-        node: select('mystDirectiveOption[name="tags"]', node) ?? node,
+        node: select('mystOption[name="tags"]', node) ?? node,
         source: 'code-cell:tags',
         ruleId: RuleId.directiveOptionsCorrect,
       });
@@ -124,7 +124,7 @@ export function parseTags(input: any, vfile: VFile, node: GenericNode): string[]
     }
   } else if (tags) {
     fileWarn(vfile, 'tags in code-cell directive must be a list of strings', {
-      node: select('mystDirectiveOption[name="tags"]', node) ?? node,
+      node: select('mystOption[name="tags"]', node) ?? node,
       source: 'code-cell:tags',
       ruleId: RuleId.directiveOptionsCorrect,
     });
diff --git a/packages/myst-directives/src/div.ts b/packages/myst-directives/src/div.ts
index 6590fa1ba..35e2f0f03 100644
--- a/packages/myst-directives/src/div.ts
+++ b/packages/myst-directives/src/div.ts
@@ -9,13 +9,12 @@ export const divDirective: DirectiveSpec = {
   },
   body: {
     type: 'myst',
-    required: true,
   },
   run(data: DirectiveData): GenericNode[] {
-    const div: GenericNode = {
-      type: 'div',
-      children: data.body as unknown as (FlowContent | ListContent | PhrasingContent)[],
-    };
+    const div: GenericNode = { type: 'div' };
+    if (data.body) {
+      div.children = data.body as unknown as (FlowContent | ListContent | PhrasingContent)[];
+    }
     addCommonDirectiveOptions(data, div);
     return [div];
   },
diff --git a/packages/myst-directives/src/include.ts b/packages/myst-directives/src/include.ts
index 08162ac99..ce48cfba4 100644
--- a/packages/myst-directives/src/include.ts
+++ b/packages/myst-directives/src/include.ts
@@ -93,7 +93,7 @@ export const includeDirective: DirectiveSpec = {
     if (data.options?.lines) {
       filter.lines = parseLinesString(
         vfile,
-        select('mystDirectiveOption[name="lines"]', data.node) ?? undefined,
+        select('mystOption[name="lines"]', data.node) ?? undefined,
         data.options?.lines as string,
       );
     } else {
diff --git a/packages/myst-directives/src/table.ts b/packages/myst-directives/src/table.ts
index 0f6387180..a17e18d94 100644
--- a/packages/myst-directives/src/table.ts
+++ b/packages/myst-directives/src/table.ts
@@ -271,7 +271,7 @@ export const csvTableDirective: DirectiveSpec = {
         headerCells = parseCSV(data.options.header as string, ctx, data.options as ParseCsvOptions);
       } catch (error) {
         fileError(vfile, 'csv-table directive header must be valid CSV-formatted MyST', {
-          node: select('mystDirectiveOption[name="header"]', data.node) ?? data.node,
+          node: select('mystOption[name="header"]', data.node) ?? data.node,
           ruleId: RuleId.directiveOptionsCorrect,
         });
       }
diff --git a/packages/myst-parser/src/directives.ts b/packages/myst-parser/src/directives.ts
index 59b2b2f7f..d9fb518f1 100644
--- a/packages/myst-parser/src/directives.ts
+++ b/packages/myst-parser/src/directives.ts
@@ -9,8 +9,9 @@ import type {
 import { RuleId, fileError, fileWarn } from 'myst-common';
 import { selectAll } from 'unist-util-select';
 import type { VFile } from 'vfile';
-import { contentFromNode } from './roles.js';
+import { contentFromNode } from './utils.js';
 import type { Directive } from 'myst-spec';
+import { parseOptions } from './inlineAttributes.js';
 
 type MystDirectiveNode = GenericNode & {
   name: string;
@@ -76,11 +77,10 @@ export function applyDirectives(
     const argNode = node.children?.filter((c) => c.type === 'mystDirectiveArg')[0];
     if (argSpec) {
       if (argSpec.required && !argNode) {
-        fileError(vfile, `required argument not provided for directive: ${name}`, {
-          node,
-          ruleId: RuleId.directiveArgumentCorrect,
-        });
+        const message = `required argument not provided for directive: ${name}`;
+        fileError(vfile, message, { node, ruleId: RuleId.directiveArgumentCorrect });
         node.type = 'mystDirectiveError';
+        node.message = message;
         delete node.children;
         validationError = true;
       } else if (argNode) {
@@ -96,92 +96,24 @@ export function applyDirectives(
         }
       }
     } else if (argNode) {
-      fileWarn(vfile, `unexpected argument provided for directive: ${name}`, {
-        node: argNode,
-        ruleId: RuleId.directiveArgumentCorrect,
-      });
+      const message = `unexpected argument provided for directive: ${name}`;
+      fileWarn(vfile, message, { node: argNode, ruleId: RuleId.directiveArgumentCorrect });
     }
 
     // Handle options
-    const options: Record<string, ParseTypes> = {};
-    const optionNodes = node.children?.filter((c) => c.type === 'mystDirectiveOption') ?? [];
-    const optionNodeLookup: Record<string, GenericNode> = {};
-    optionNodes.forEach((optionNode) => {
-      if (optionNodeLookup[optionNode.name]) {
-        fileWarn(vfile, `duplicate option "${optionNode.name}" declared for directive: ${name}`, {
-          node: optionNode,
-          ruleId: RuleId.directiveOptionsCorrect,
-        });
-      } else {
-        optionNodeLookup[optionNode.name] = optionNode;
-      }
-    });
-
-    // Deal with each option in the spec
-    Object.entries(optionsSpec || {}).forEach(([optionName, optionSpec]) => {
-      let optionNameUsed = optionName;
-      let optionNode = optionNodeLookup[optionName];
-      // Replace alias options or warn on duplicates
-      optionSpec.alias?.forEach((alias) => {
-        const aliasNode = optionNodeLookup[alias];
-        if (!aliasNode) return;
-        if (!optionNode && aliasNode) {
-          optionNode = aliasNode;
-          optionNameUsed = alias;
-          optionNodeLookup[optionName] = optionNode;
-        } else {
-          fileWarn(
-            vfile,
-            `option "${optionNameUsed}" used instead of "${alias}" for directive: ${name}`,
-            { node, ruleId: RuleId.directiveOptionsCorrect },
-          );
-        }
-        delete optionNodeLookup[alias];
-      });
-
-      if (optionSpec.required && !optionNode) {
-        fileError(vfile, `required option "${optionName}" not provided for directive: ${name}`, {
-          node,
-          ruleId: RuleId.directiveOptionsCorrect,
-        });
-        node.type = 'mystDirectiveError';
-        delete node.children;
-        validationError = true;
-      } else if (optionNode) {
-        const content = contentFromNode(
-          optionNode,
-          optionSpec,
-          vfile,
-          `option "${optionName}" of directive: ${name}`,
-          RuleId.directiveOptionsCorrect,
-        );
-        if (content != null) {
-          options[optionName] = content;
-        } else if (optionSpec.required) {
-          validationError = true;
-        }
-        delete optionNodeLookup[optionName];
-      }
-    });
-    Object.values(optionNodeLookup).forEach((optionNode) => {
-      fileWarn(vfile, `unexpected option "${optionNode.name}" provided for directive: ${name}`, {
-        node: optionNode,
-        ruleId: RuleId.directiveOptionsCorrect,
-      });
-    });
-    if (Object.keys(options).length) {
-      data.options = options;
-    }
+    // const options: Record<string, ParseTypes> = {};
+    const { valid: validOptions, options } = parseOptions(name, node, vfile, optionsSpec);
+    data.options = options;
+    validationError = validationError || validOptions;
 
     // Handle body
     const bodyNode = node.children?.filter((c) => c.type === 'mystDirectiveBody')[0];
     if (bodySpec) {
       if (bodySpec.required && !bodyNode) {
-        fileError(vfile, `required body not provided for directive: ${name}`, {
-          node,
-          ruleId: RuleId.directiveBodyCorrect,
-        });
+        const message = `required body not provided for directive: ${name}`;
+        fileError(vfile, message, { node, ruleId: RuleId.directiveBodyCorrect });
         node.type = 'mystDirectiveError';
+        node.message = message;
         delete node.children;
         validationError = true;
       } else if (bodyNode) {
diff --git a/packages/myst-parser/src/fromMarkdown.ts b/packages/myst-parser/src/fromMarkdown.ts
index ded429ecd..9cd829c74 100644
--- a/packages/myst-parser/src/fromMarkdown.ts
+++ b/packages/myst-parser/src/fromMarkdown.ts
@@ -11,10 +11,10 @@ const UNHIDDEN_TOKENS = new Set([
   'parsed_directive_close',
   'directive_arg_open',
   'directive_arg_close',
-  'directive_option_open',
-  'directive_option_close',
   'directive_body_open',
   'directive_body_close',
+  'myst_option_open',
+  'myst_option_close',
   'parsed_role_open',
   'parsed_role_close',
   'role_body_open',
diff --git a/packages/myst-parser/src/inlineAttributes.ts b/packages/myst-parser/src/inlineAttributes.ts
new file mode 100644
index 000000000..26049b8b6
--- /dev/null
+++ b/packages/myst-parser/src/inlineAttributes.ts
@@ -0,0 +1,98 @@
+import type { GenericNode, OptionDefinition, ParseTypes } from 'myst-common';
+import { fileError, fileWarn, RuleId } from 'myst-common';
+import { type VFile } from 'vfile';
+import { contentFromNode } from './utils.js';
+
+export function parseOptions(
+  name: string,
+  node: GenericNode,
+  vfile: VFile,
+  optionsSpec?: Record<string, OptionDefinition>,
+) {
+  let validationError = false;
+  // Handle options
+  const options: Record<string, ParseTypes> = {};
+  // Only look to the direct children here (i.e. for nested roles)
+  const optionNodes = node.children?.filter((c) => c.type === 'mystOption') ?? [];
+  const optionNodeLookup: Record<string, GenericNode> = {};
+  optionNodes.forEach((optionNode) => {
+    if (optionNode.name === 'id' && optionNode.location === 'inline') {
+      // The ID maps to the label
+      optionNodeLookup.label = optionNode;
+      return;
+    }
+    if (optionNode.name === 'class') {
+      if (optionNodeLookup.class) {
+        // Combine the option class nodes
+        // Note: This results in an position error for additional classes
+        //       For example, pointing to a warning will always be the first class.
+        //       That is fine for now.
+        optionNodeLookup.class.value += ` ${optionNode.value}`;
+      } else {
+        optionNodeLookup.class = optionNode;
+      }
+      return;
+    }
+    if (optionNodeLookup[optionNode.name]) {
+      fileWarn(vfile, `duplicate option "${optionNode.name}" declared (in ${name})`, {
+        node: optionNode,
+        ruleId: RuleId.directiveOptionsCorrect,
+      });
+    } else {
+      optionNodeLookup[optionNode.name] = optionNode;
+    }
+  });
+
+  // Deal with each option in the spec
+  Object.entries(optionsSpec || {}).forEach(([optionName, optionSpec]) => {
+    let optionNameUsed = optionName;
+    let optionNode = optionNodeLookup[optionName];
+    // Replace alias options or warn on duplicates
+    optionSpec.alias?.forEach((alias) => {
+      const aliasNode = optionNodeLookup[alias];
+      if (!aliasNode) return;
+      if (!optionNode && aliasNode) {
+        optionNode = aliasNode;
+        optionNameUsed = alias;
+        optionNodeLookup[optionName] = optionNode;
+      } else {
+        fileWarn(vfile, `option "${optionNameUsed}" used instead of "${alias}" (in ${name})`, {
+          node,
+          ruleId: RuleId.directiveOptionsCorrect,
+        });
+      }
+      delete optionNodeLookup[alias];
+    });
+
+    if (optionSpec.required && !optionNode) {
+      fileError(vfile, `required option "${optionName}" not provided (in ${name})`, {
+        node,
+        ruleId: RuleId.directiveOptionsCorrect,
+      });
+      node.type = 'mystDirectiveError';
+      delete node.children;
+      validationError = true;
+    } else if (optionNode) {
+      const content = contentFromNode(
+        optionNode,
+        optionSpec,
+        vfile,
+        `option "${optionName}" (in ${name})`,
+        RuleId.directiveOptionsCorrect,
+      );
+      if (content != null) {
+        options[optionName] = content;
+      } else if (optionSpec.required) {
+        validationError = true;
+      }
+      delete optionNodeLookup[optionName];
+    }
+  });
+  Object.values(optionNodeLookup).forEach((optionNode) => {
+    fileWarn(vfile, `unexpected option "${optionNode.name}" provided (in ${name})`, {
+      node: optionNode,
+      ruleId: RuleId.directiveOptionsCorrect,
+    });
+  });
+  return { valid: validationError, options: Object.keys(options).length ? options : undefined };
+}
diff --git a/packages/myst-parser/src/roles.ts b/packages/myst-parser/src/roles.ts
index dbbc66705..c2894e2d3 100644
--- a/packages/myst-parser/src/roles.ts
+++ b/packages/myst-parser/src/roles.ts
@@ -1,71 +1,15 @@
-import type { GenericNode, ArgDefinition, RoleData, RoleSpec, GenericParent } from 'myst-common';
-import { RuleId, fileError, fileWarn, ParseTypesEnum } from 'myst-common';
+import type { GenericNode, RoleData, RoleSpec, GenericParent } from 'myst-common';
+import { RuleId, fileError, fileWarn } from 'myst-common';
 import type { Role } from 'myst-spec';
-import { select, selectAll } from 'unist-util-select';
+import { selectAll } from 'unist-util-select';
 import type { VFile } from 'vfile';
+import { contentFromNode } from './utils.js';
+import { parseOptions } from './inlineAttributes.js';
 
 type MystRoleNode = GenericNode & {
   name: string;
 };
 
-export function contentFromNode(
-  node: GenericNode,
-  spec: ArgDefinition,
-  vfile: VFile,
-  description: string,
-  ruleId: RuleId,
-) {
-  const { children, value } = node as any;
-  if (spec.type === ParseTypesEnum.parsed || spec.type === 'myst') {
-    if (typeof value !== 'string') {
-      fileWarn(vfile, `content is parsed from non-string value for ${description}`, {
-        node,
-        ruleId,
-      });
-    }
-    if (!children?.length) {
-      if (spec.required) {
-        fileError(vfile, `no parsed content for required ${description}`, { node, ruleId });
-      }
-      return undefined;
-    }
-    return children;
-  }
-  if (value == null) {
-    if (spec.required) {
-      fileError(vfile, `no content for required ${description}`, { node, ruleId });
-    }
-    return undefined;
-  }
-  if (spec.type === ParseTypesEnum.string || spec.type === String) {
-    if (value === true) return '';
-    // silently transform numbers into strings here
-    if (typeof value !== 'string' && !(value && typeof value === 'number' && !isNaN(value))) {
-      fileWarn(vfile, `value is not a string for ${description}`, { node, ruleId });
-    }
-    return String(value);
-  }
-  if (spec.type === ParseTypesEnum.number || spec.type === Number) {
-    const valueAsNumber = Number(value);
-    if (value === true || isNaN(valueAsNumber)) {
-      const fileFn = spec.required ? fileError : fileWarn;
-      fileFn(vfile, `number not provided for ${description}`, { node, ruleId });
-      return undefined;
-    }
-    return valueAsNumber;
-  }
-  if (spec.type === ParseTypesEnum.boolean || spec.type === Boolean) {
-    if (typeof value === 'string') {
-      if (value.toLowerCase() === 'false') return false;
-      if (value.toLowerCase() === 'true') return true;
-    }
-    if (typeof value !== 'boolean') {
-      fileWarn(vfile, `value is not a boolean for ${description}`, { node, ruleId });
-    }
-    return !!value;
-  }
-}
-
 export function applyRoles(tree: GenericParent, specs: RoleSpec[], vfile: VFile) {
   const specLookup: Record<string, RoleSpec> = {};
   specs.forEach((spec) => {
@@ -94,10 +38,15 @@ export function applyRoles(tree: GenericParent, specs: RoleSpec[], vfile: VFile)
       delete node.children;
       return;
     }
-    const { body, validate, run } = spec;
-    let data: RoleData = { name, node: node as Role };
-    let validationError = false;
-    const bodyNode = select('mystRoleBody', node) as GenericNode;
+    const { body, options: optionsSpec, validate, run } = spec;
+    let data: RoleData = { name, node: node as Role, options: {} };
+
+    const { valid: validOptions, options } = parseOptions(name, node, vfile, optionsSpec);
+    let validationError = validOptions;
+    data.options = options;
+
+    // Only look to the direct children
+    const bodyNode = node.children?.find((n) => n.type === 'mystRoleBody') as GenericNode;
     if (body) {
       if (body.required && !bodyNode) {
         fileError(vfile, `required body not provided for role: ${name}`, {
diff --git a/packages/myst-parser/src/tokensToMyst.ts b/packages/myst-parser/src/tokensToMyst.ts
index 3ca4ca97a..fb6e73306 100644
--- a/packages/myst-parser/src/tokensToMyst.ts
+++ b/packages/myst-parser/src/tokensToMyst.ts
@@ -397,15 +397,6 @@ const defaultMdast: Record<string, TokenHandlerSpec> = {
       };
     },
   },
-  directive_option: {
-    type: 'mystDirectiveOption',
-    getAttrs(t) {
-      return {
-        name: t.info,
-        value: t.meta.value,
-      };
-    },
-  },
   directive_body: {
     type: 'mystDirectiveBody',
     getAttrs(t) {
@@ -417,6 +408,21 @@ const defaultMdast: Record<string, TokenHandlerSpec> = {
   directive_error: {
     type: 'mystDirectiveError',
     noCloseToken: true,
+    getAttrs(t) {
+      return {
+        message: t.meta?.error_message,
+      };
+    },
+  },
+  myst_option: {
+    type: 'mystOption',
+    getAttrs(t) {
+      return {
+        name: t.info,
+        location: t.meta.location,
+        value: t.meta.value,
+      };
+    },
   },
   parsed_role: {
     type: 'mystRole',
diff --git a/packages/myst-parser/src/utils.ts b/packages/myst-parser/src/utils.ts
new file mode 100644
index 000000000..0d5fd1967
--- /dev/null
+++ b/packages/myst-parser/src/utils.ts
@@ -0,0 +1,61 @@
+import { fileError, fileWarn, ParseTypesEnum } from 'myst-common';
+import type { GenericNode, ArgDefinition, RuleId } from 'myst-common';
+import type { VFile } from 'vfile';
+
+export function contentFromNode(
+  node: GenericNode,
+  spec: ArgDefinition,
+  vfile: VFile,
+  description: string,
+  ruleId: RuleId,
+) {
+  const { children, value } = node as any;
+  if (spec.type === ParseTypesEnum.parsed || spec.type === 'myst') {
+    if (typeof value !== 'string') {
+      fileWarn(vfile, `content is parsed from non-string value for ${description}`, {
+        node,
+        ruleId,
+      });
+    }
+    if (!children?.length) {
+      if (spec.required) {
+        fileError(vfile, `no parsed content for required ${description}`, { node, ruleId });
+      }
+      return undefined;
+    }
+    return children;
+  }
+  if (value == null) {
+    if (spec.required) {
+      fileError(vfile, `no content for required ${description}`, { node, ruleId });
+    }
+    return undefined;
+  }
+  if (spec.type === ParseTypesEnum.string || spec.type === String) {
+    if (value === true) return '';
+    // silently transform numbers into strings here
+    if (typeof value !== 'string' && !(value && typeof value === 'number' && !isNaN(value))) {
+      fileWarn(vfile, `value is not a string for ${description}`, { node, ruleId });
+    }
+    return String(value);
+  }
+  if (spec.type === ParseTypesEnum.number || spec.type === Number) {
+    const valueAsNumber = Number(value);
+    if (value === true || isNaN(valueAsNumber)) {
+      const fileFn = spec.required ? fileError : fileWarn;
+      fileFn(vfile, `number not provided for ${description}`, { node, ruleId });
+      return undefined;
+    }
+    return valueAsNumber;
+  }
+  if (spec.type === ParseTypesEnum.boolean || spec.type === Boolean) {
+    if (typeof value === 'string') {
+      if (value.toLowerCase() === 'false') return false;
+      if (value.toLowerCase() === 'true') return true;
+    }
+    if (typeof value !== 'boolean') {
+      fileWarn(vfile, `value is not a boolean for ${description}`, { node, ruleId });
+    }
+    return !!value;
+  }
+}
diff --git a/packages/myst-parser/tests/directiveOptions.spec.ts b/packages/myst-parser/tests/directiveOptions.spec.ts
new file mode 100644
index 000000000..ba0c7c7b7
--- /dev/null
+++ b/packages/myst-parser/tests/directiveOptions.spec.ts
@@ -0,0 +1,19 @@
+import { describe, expect, test } from 'vitest';
+import { mystParse } from '../src';
+
+describe('Parses colonFences', () => {
+  test('colon fences parse', () => {
+    const mdast = mystParse(
+      `:::{tip .dropdown #my-label}\n:class: simple\nThis is a tip in a fence!\n:::`,
+    );
+    expect(mdast.children[0].type).toBe('mystDirective');
+    expect((mdast.children[0] as any).name).toBe('tip');
+    expect((mdast as any).children[0].options).toEqual({
+      class: 'dropdown simple',
+      label: 'my-label',
+    });
+    expect((mdast as any).children[0].children[0].class).toBe('dropdown simple');
+    expect((mdast as any).children[0].children[0].label).toBe('my-label');
+    expect((mdast as any).children[0].children[0].identifier).toBe('my-label');
+  });
+});
diff --git a/packages/myst-parser/tests/directives/admonitions.yml b/packages/myst-parser/tests/directives/admonitions.yml
index e55389b2d..bb715c442 100644
--- a/packages/myst-parser/tests/directives/admonitions.yml
+++ b/packages/myst-parser/tests/directives/admonitions.yml
@@ -45,21 +45,3 @@ cases:
                   children:
                     - type: text
                       value: Here is some advice
-  - title: admonition directive parses with callout QMD prefix
-    markdown: |-
-      ```{.callout-tip} hello
-      ```
-    mdast:
-      type: root
-      children:
-        - type: mystDirective
-          name: .callout-tip
-          args: hello
-          children:
-            - type: admonition
-              kind: tip
-              children:
-                - type: paragraph
-                  children:
-                    - type: text
-                      value: hello
diff --git a/packages/myst-parser/tests/roles/basicRole.spec.ts b/packages/myst-parser/tests/roles/basicRole.spec.ts
new file mode 100644
index 000000000..66dae92b7
--- /dev/null
+++ b/packages/myst-parser/tests/roles/basicRole.spec.ts
@@ -0,0 +1,85 @@
+import { describe, expect, test } from 'vitest';
+import { normalizeLabel, type GenericNode, type RoleData, type RoleSpec } from 'myst-common';
+import { mystParse } from '../../src';
+import { position, positionFn } from '../position';
+
+describe('role spec with options', () => {
+  test('complex inline role with options', () => {
+    const TestRole: RoleSpec = {
+      name: 'widget',
+      body: {
+        type: 'myst',
+      },
+      options: {
+        label: {
+          type: String,
+          alias: ['name'],
+        },
+        class: {
+          type: String,
+        },
+        open: {
+          type: Boolean,
+        },
+        max: {
+          type: Number,
+        },
+        title: {
+          type: 'myst',
+        },
+      },
+      run(data: RoleData) {
+        const { label, identifier } =
+          normalizeLabel(data.options?.label as string | undefined) || {};
+        return [
+          {
+            type: 'widget',
+            label,
+            identifier,
+            class: data.options?.class,
+            open: data.options?.open ?? false,
+            max: data.options?.max ?? 10,
+            children: data.body,
+          },
+        ] as GenericNode[];
+      },
+    };
+    const parsed = mystParse('{widget #label .something .another open="true" max="5"}`_a_`', {
+      roles: [TestRole],
+    }) as any;
+    expect(parsed).toEqual({
+      type: 'root',
+      children: [
+        {
+          type: 'paragraph',
+          position,
+          children: [
+            {
+              type: 'mystRole',
+              position: positionFn(1, 1, 1, 61),
+              name: 'widget',
+              value: '_a_',
+              children: [
+                {
+                  type: 'widget',
+                  label: 'label',
+                  identifier: 'label',
+                  class: 'something another',
+                  open: true,
+                  max: 5,
+                  children: [
+                    {
+                      type: 'emphasis',
+                      position: positionFn(1, 1, 1, 1),
+                      children: [{ type: 'text', value: 'a', position: positionFn(1, 1, 1, 1) }],
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    });
+  });
+});
diff --git a/packages/myst-roles/src/abbreviation.ts b/packages/myst-roles/src/abbreviation.ts
index 05a5575c8..536ec3da8 100644
--- a/packages/myst-roles/src/abbreviation.ts
+++ b/packages/myst-roles/src/abbreviation.ts
@@ -1,10 +1,12 @@
 import type { RoleSpec, RoleData, GenericNode } from 'myst-common';
+import { addCommonRoleOptions, commonRoleOptions } from './utils.js';
 
 const ABBR_PATTERN = /^(.+?)\(([^()]+)\)$/; // e.g. 'CSS (Cascading Style Sheets)'
 
 export const abbreviationRole: RoleSpec = {
   name: 'abbreviation',
   alias: ['abbr'],
+  options: { ...commonRoleOptions('abbreviation') },
   body: {
     type: String,
     required: true,
@@ -14,6 +16,8 @@ export const abbreviationRole: RoleSpec = {
     const match = ABBR_PATTERN.exec(body);
     const value = match?.[1]?.trim() ?? body.trim();
     const title = match?.[2]?.trim();
-    return [{ type: 'abbreviation', title, children: [{ type: 'text', value }] }];
+    const abbr = { type: 'abbreviation', title, children: [{ type: 'text', value }] };
+    addCommonRoleOptions(data, abbr);
+    return [abbr];
   },
 };
diff --git a/packages/myst-roles/src/chem.ts b/packages/myst-roles/src/chem.ts
index 99486a5d9..6129f8d73 100644
--- a/packages/myst-roles/src/chem.ts
+++ b/packages/myst-roles/src/chem.ts
@@ -1,13 +1,17 @@
 import type { RoleSpec, RoleData, GenericNode } from 'myst-common';
+import { addCommonRoleOptions, commonRoleOptions } from './utils.js';
 
 export const chemRole: RoleSpec = {
   name: 'chemicalFormula',
   alias: ['chem'],
+  options: { ...commonRoleOptions('chemicalFormula') },
   body: {
     type: String,
     required: true,
   },
   run(data: RoleData): GenericNode[] {
-    return [{ type: 'chemicalFormula', value: data.body as string }];
+    const chem = { type: 'chemicalFormula', value: data.body as string };
+    addCommonRoleOptions(data, chem);
+    return [chem];
   },
 };
diff --git a/packages/myst-roles/src/cite.ts b/packages/myst-roles/src/cite.ts
index 5ef1ed663..ceb467e0e 100644
--- a/packages/myst-roles/src/cite.ts
+++ b/packages/myst-roles/src/cite.ts
@@ -1,6 +1,7 @@
 import type { Cite, CiteGroup, CiteKind } from 'myst-spec-ext';
 import type { RoleSpec, RoleData } from 'myst-common';
 import { normalizeLabel } from 'myst-common';
+import { addCommonRoleOptions, commonRoleOptions } from './utils.js';
 
 export const citeRole: RoleSpec = {
   name: 'cite',
@@ -26,6 +27,7 @@ export const citeRole: RoleSpec = {
     'cite:cauthors',
     // 'cite:empty',
   ],
+  options: { ...commonRoleOptions('cite') },
   body: {
     type: String,
     required: true,
@@ -59,17 +61,14 @@ export const citeRole: RoleSpec = {
       return cite;
     });
     if (data.name === 'cite' && children.length === 1) {
+      addCommonRoleOptions(data, children[0]);
       return children;
     }
     if (data.name.includes('cite:alp')) {
       return children;
     }
-    return [
-      {
-        type: 'citeGroup',
-        kind,
-        children,
-      },
-    ];
+    const citeGroup: CiteGroup = { type: 'citeGroup', kind, children };
+    addCommonRoleOptions(data, citeGroup);
+    return [citeGroup];
   },
 };
diff --git a/packages/myst-roles/src/delete.ts b/packages/myst-roles/src/delete.ts
index 327583ac0..f4b5d9a06 100644
--- a/packages/myst-roles/src/delete.ts
+++ b/packages/myst-roles/src/delete.ts
@@ -1,13 +1,17 @@
 import type { RoleSpec, RoleData, GenericNode } from 'myst-common';
+import { addCommonRoleOptions, commonRoleOptions } from './utils.js';
 
 export const deleteRole: RoleSpec = {
   name: 'delete',
   alias: ['del', 'strike'],
+  options: { ...commonRoleOptions('delete') },
   body: {
     type: 'myst',
     required: true,
   },
   run(data: RoleData): GenericNode[] {
-    return [{ type: 'delete', children: data.body as GenericNode[] }];
+    const del = { type: 'delete', children: data.body as GenericNode[] };
+    addCommonRoleOptions(data, del);
+    return [del];
   },
 };
diff --git a/packages/myst-roles/src/index.ts b/packages/myst-roles/src/index.ts
index 6345f0039..711152acc 100644
--- a/packages/myst-roles/src/index.ts
+++ b/packages/myst-roles/src/index.ts
@@ -1,3 +1,4 @@
+import { spanRole } from './span.js';
 import { abbreviationRole } from './abbreviation.js';
 import { chemRole } from './chem.js';
 import { citeRole } from './cite.js';
@@ -18,6 +19,7 @@ import { keyboardRole } from './keyboard.js';
 import { rawLatexRole, rawTypstRole } from './raw.js';
 
 export const defaultRoles = [
+  spanRole,
   abbreviationRole,
   chemRole,
   citeRole,
@@ -38,6 +40,7 @@ export const defaultRoles = [
   rawLatexRole,
   rawTypstRole,
 ];
+export { spanRole } from './span.js';
 export { abbreviationRole } from './abbreviation.js';
 export { chemRole } from './chem.js';
 export { citeRole } from './cite.js';
diff --git a/packages/myst-roles/src/inlineExpression.ts b/packages/myst-roles/src/inlineExpression.ts
index 18f02618e..a2c6ceac5 100644
--- a/packages/myst-roles/src/inlineExpression.ts
+++ b/packages/myst-roles/src/inlineExpression.ts
@@ -1,18 +1,17 @@
 import type { InlineExpression } from 'myst-spec-ext';
 import type { RoleSpec, RoleData, GenericNode } from 'myst-common';
+import { addCommonRoleOptions, commonRoleOptions } from './utils.js';
 
 export const evalRole: RoleSpec = {
   name: 'eval',
+  options: { ...commonRoleOptions('eval') },
   body: {
     type: String,
     required: true,
   },
   run(data: RoleData): GenericNode[] {
-    const value = data.body as string;
-    const node: InlineExpression = {
-      type: 'inlineExpression',
-      value,
-    };
+    const node: InlineExpression = { type: 'inlineExpression', value: data.body as string };
+    addCommonRoleOptions(data, node);
     return [node];
   },
 };
diff --git a/packages/myst-roles/src/keyboard.ts b/packages/myst-roles/src/keyboard.ts
index 7133340ed..951ddbd33 100644
--- a/packages/myst-roles/src/keyboard.ts
+++ b/packages/myst-roles/src/keyboard.ts
@@ -1,19 +1,21 @@
 import type { GenericNode, RoleSpec } from 'myst-common';
+import { addCommonRoleOptions, commonRoleOptions } from './utils.js';
 
 export const keyboardRole: RoleSpec = {
   name: 'keyboard',
   doc: 'The keyboard role denote textual user input from a keyboard, such as "Ctrl" + "Space".',
   alias: ['kbd'],
+  options: { ...commonRoleOptions('keyboard') },
   body: {
     type: String,
     required: true,
   },
   run(data) {
-    const body = data.body as string;
     const node: GenericNode = {
       type: 'keyboard',
-      children: [{ type: 'text', value: body }],
+      children: [{ type: 'text', value: data.body as string }],
     };
+    addCommonRoleOptions(data, node);
     return [node];
   },
 };
diff --git a/packages/myst-roles/src/math.ts b/packages/myst-roles/src/math.ts
index baa53a7ca..abe3972d5 100644
--- a/packages/myst-roles/src/math.ts
+++ b/packages/myst-roles/src/math.ts
@@ -1,12 +1,16 @@
 import type { RoleSpec, RoleData, GenericNode } from 'myst-common';
+import { addCommonRoleOptions, commonRoleOptions } from './utils.js';
 
 export const mathRole: RoleSpec = {
   name: 'math',
+  options: { ...commonRoleOptions('math') },
   body: {
     type: String,
     required: true,
   },
   run(data: RoleData): GenericNode[] {
-    return [{ type: 'inlineMath', value: data.body as string }];
+    const node: GenericNode = { type: 'inlineMath', value: data.body as string };
+    addCommonRoleOptions(data, node);
+    return [node];
   },
 };
diff --git a/packages/myst-roles/src/smallcaps.ts b/packages/myst-roles/src/smallcaps.ts
index 0f2de760d..323e67f55 100644
--- a/packages/myst-roles/src/smallcaps.ts
+++ b/packages/myst-roles/src/smallcaps.ts
@@ -1,13 +1,17 @@
 import type { RoleSpec, RoleData, GenericNode } from 'myst-common';
+import { addCommonRoleOptions, commonRoleOptions } from './utils.js';
 
 export const smallcapsRole: RoleSpec = {
   name: 'smallcaps',
   alias: ['sc'],
+  options: { ...commonRoleOptions('smallcaps') },
   body: {
     type: 'myst',
     required: true,
   },
   run(data: RoleData): GenericNode[] {
-    return [{ type: 'smallcaps', children: data.body as GenericNode[] }];
+    const node = { type: 'smallcaps', children: data.body as GenericNode[] };
+    addCommonRoleOptions(data, node);
+    return [node];
   },
 };
diff --git a/packages/myst-roles/src/span.ts b/packages/myst-roles/src/span.ts
new file mode 100644
index 000000000..f744278e6
--- /dev/null
+++ b/packages/myst-roles/src/span.ts
@@ -0,0 +1,18 @@
+import type { RoleSpec, RoleData, GenericNode } from 'myst-common';
+import { addCommonRoleOptions, commonRoleOptions } from './utils.js';
+
+export const spanRole: RoleSpec = {
+  name: 'span',
+  options: { ...commonRoleOptions('span') },
+  body: {
+    type: 'myst',
+  },
+  run(data: RoleData): GenericNode[] {
+    const node: GenericNode = { type: 'span' };
+    if (data.body) {
+      node.children = data.body as GenericNode[];
+    }
+    addCommonRoleOptions(data, node);
+    return [node];
+  },
+};
diff --git a/packages/myst-roles/src/subscript.ts b/packages/myst-roles/src/subscript.ts
index bcb2f34d9..e5ea9df19 100644
--- a/packages/myst-roles/src/subscript.ts
+++ b/packages/myst-roles/src/subscript.ts
@@ -1,13 +1,17 @@
 import type { RoleSpec, RoleData, GenericNode } from 'myst-common';
+import { addCommonRoleOptions, commonRoleOptions } from './utils.js';
 
 export const subscriptRole: RoleSpec = {
   name: 'subscript',
   alias: ['sub'],
+  options: { ...commonRoleOptions('subscript') },
   body: {
     type: 'myst',
     required: true,
   },
   run(data: RoleData): GenericNode[] {
-    return [{ type: 'subscript', children: data.body as GenericNode[] }];
+    const node = { type: 'subscript', children: data.body as GenericNode[] };
+    addCommonRoleOptions(data, node);
+    return [node];
   },
 };
diff --git a/packages/myst-roles/src/superscript.ts b/packages/myst-roles/src/superscript.ts
index 0f0a20bc0..b2d3cae75 100644
--- a/packages/myst-roles/src/superscript.ts
+++ b/packages/myst-roles/src/superscript.ts
@@ -1,13 +1,17 @@
 import type { RoleSpec, RoleData, GenericNode } from 'myst-common';
+import { addCommonRoleOptions, commonRoleOptions } from './utils.js';
 
 export const superscriptRole: RoleSpec = {
   name: 'superscript',
   alias: ['sup'],
+  options: { ...commonRoleOptions('superscript') },
   body: {
     type: 'myst',
     required: true,
   },
   run(data: RoleData): GenericNode[] {
-    return [{ type: 'superscript', children: data.body as GenericNode[] }];
+    const node = { type: 'superscript', children: data.body as GenericNode[] };
+    addCommonRoleOptions(data, node);
+    return [node];
   },
 };
diff --git a/packages/myst-roles/src/underline.ts b/packages/myst-roles/src/underline.ts
index 49a2a5903..dc7a99e4e 100644
--- a/packages/myst-roles/src/underline.ts
+++ b/packages/myst-roles/src/underline.ts
@@ -1,13 +1,17 @@
 import type { RoleSpec, RoleData, GenericNode } from 'myst-common';
+import { addCommonRoleOptions, commonRoleOptions } from './utils.js';
 
 export const underlineRole: RoleSpec = {
   name: 'underline',
   alias: ['u'],
+  options: { ...commonRoleOptions('underline') },
   body: {
     type: 'myst',
     required: true,
   },
   run(data: RoleData): GenericNode[] {
-    return [{ type: 'underline', children: data.body as GenericNode[] }];
+    const node = { type: 'underline', children: data.body as GenericNode[] };
+    addCommonRoleOptions(data, node);
+    return [node];
   },
 };
diff --git a/packages/myst-roles/src/utils.ts b/packages/myst-roles/src/utils.ts
new file mode 100644
index 000000000..871f16b50
--- /dev/null
+++ b/packages/myst-roles/src/utils.ts
@@ -0,0 +1,50 @@
+import { normalizeLabel, type RoleData, type RoleSpec, type GenericNode } from 'myst-common';
+
+export function classRoleOption(nodeType = 'node') {
+  return {
+    class: {
+      type: String,
+      doc: `Annotate the ${nodeType} with a set of space-delimited class names.`,
+    },
+  };
+}
+
+export function labelRoleOption(nodeType = 'node') {
+  return {
+    label: {
+      type: String,
+      alias: ['name'],
+      doc: `Label the ${nodeType} to be cross-referenced or explicitly linked to.`,
+    },
+  };
+}
+
+/**
+ * Adds `class`, `label`
+ */
+export function commonRoleOptions(nodeType = 'node'): Required<RoleSpec>['options'] {
+  return {
+    ...classRoleOption(nodeType),
+    ...labelRoleOption(nodeType),
+  };
+}
+
+export function addClassOptions(data: RoleData, node: GenericNode): GenericNode {
+  if (typeof data.options?.class === 'string') {
+    node.class = data.options.class;
+  }
+  return node;
+}
+
+export function addLabelOptions(data: RoleData, node: GenericNode): GenericNode {
+  const { label, identifier } = normalizeLabel(data.options?.label as string | undefined) || {};
+  if (label) node.label = label;
+  if (identifier) node.identifier = identifier;
+  return node;
+}
+
+export function addCommonRoleOptions(data: RoleData, node: GenericNode) {
+  addClassOptions(data, node);
+  addLabelOptions(data, node);
+  return node;
+}
diff --git a/packages/myst-transforms/src/admonitions.spec.ts b/packages/myst-transforms/src/admonitions.spec.ts
index 99fd04640..d23f14696 100644
--- a/packages/myst-transforms/src/admonitions.spec.ts
+++ b/packages/myst-transforms/src/admonitions.spec.ts
@@ -1,6 +1,10 @@
 import { describe, expect, test } from 'vitest';
 import { u } from 'unist-builder';
-import { admonitionBlockquoteTransform, admonitionHeadersTransform } from './admonitions';
+import {
+  admonitionBlockquoteTransform,
+  admonitionHeadersTransform,
+  admonitionQmdTransform,
+} from './admonitions';
 import type { GenericParent } from 'myst-common';
 
 describe('Test admonitionBlockquoteTransform', () => {
@@ -41,4 +45,22 @@ describe('Test admonitionBlockquoteTransform', () => {
       ]),
     );
   });
+  test('QMD admonitions', async () => {
+    const mdast = u('root', [
+      u('div', { class: 'callout-tip' }, [
+        u('heading', { depth: 1 }, [u('text', 'Tip with Title')]),
+        u('paragraph', [u('text', 'This is an example of a callout with a title.')]),
+      ]),
+    ]);
+    admonitionQmdTransform(mdast as GenericParent);
+    admonitionHeadersTransform(mdast as GenericParent);
+    expect(mdast).toEqual(
+      u('root', [
+        u('admonition', { kind: 'tip' }, [
+          u('admonitionTitle', [u('text', 'Tip with Title')]),
+          u('paragraph', [u('text', 'This is an example of a callout with a title.')]),
+        ]),
+      ]),
+    );
+  });
 });
diff --git a/packages/myst-transforms/src/admonitions.ts b/packages/myst-transforms/src/admonitions.ts
index 538921384..86dc83344 100644
--- a/packages/myst-transforms/src/admonitions.ts
+++ b/packages/myst-transforms/src/admonitions.ts
@@ -101,6 +101,28 @@ function transformGitHubBracketedAdmonition(node: GenericNode): boolean {
   return true;
 }
 
+const QmdCallouts = [
+  'callout-note',
+  'callout-warning',
+  'callout-important',
+  'callout-tip',
+  'callout-caution',
+];
+
+export function admonitionQmdTransform(tree: GenericParent) {
+  const divs = selectAll('div', tree) as Admonition[];
+  divs.forEach((node) => {
+    const classNames = node.class?.split(/\s/).map((c) => c.trim());
+    if (!classNames) return;
+    const match = classNames?.find((s) => QmdCallouts.find((c) => c === s));
+    if (!match) return;
+    node.type = 'admonition';
+    node.kind = match.replace('callout-', '') as Admonition['kind'];
+    node.class = classNames.filter((c) => c && c !== match).join(' ');
+    if (!node.class) delete node.class;
+  });
+}
+
 /**
  * Visit all blockquote notes and add headers if necessary, support GitHub style admonitions
  */
@@ -124,3 +146,7 @@ export const admonitionBlockquotePlugin: Plugin<[], GenericParent, GenericParent
   () => (tree) => {
     admonitionBlockquoteTransform(tree);
   };
+
+export const admonitionQmdPlugin: Plugin<[], GenericParent, GenericParent> = () => (tree) => {
+  admonitionQmdTransform(tree);
+};
diff --git a/packages/myst-transforms/src/basic.ts b/packages/myst-transforms/src/basic.ts
index 2a0bd2c81..c07d70680 100644
--- a/packages/myst-transforms/src/basic.ts
+++ b/packages/myst-transforms/src/basic.ts
@@ -4,7 +4,11 @@ import type { GenericParent } from 'myst-common';
 import { liftMystDirectivesAndRolesTransform } from './liftMystDirectivesAndRoles.js';
 import { mystTargetsTransform, headingLabelTransform } from './targets.js';
 import { captionParagraphTransform } from './caption.js';
-import { admonitionBlockquoteTransform, admonitionHeadersTransform } from './admonitions.js';
+import {
+  admonitionBlockquoteTransform,
+  admonitionHeadersTransform,
+  admonitionQmdTransform,
+} from './admonitions.js';
 import { blockMetadataTransform, blockNestingTransform, blockToFigureTransform } from './blocks.js';
 import { htmlIdsTransform } from './htmlIds.js';
 import { imageAltTextTransform } from './images.js';
@@ -30,6 +34,7 @@ export function basicTransformations(tree: GenericParent, file: VFile, opts?: Re
   subequationTransform(tree, file);
   // Label headings after the targets-transform
   headingLabelTransform(tree);
+  admonitionQmdTransform(tree);
   admonitionBlockquoteTransform(tree); // Must be before header transforms
   admonitionHeadersTransform(tree);
   joinGatesTransform(tree, file); // This should be before block nesting
diff --git a/packages/myst-transforms/src/index.ts b/packages/myst-transforms/src/index.ts
index 17e57b6f9..82b416958 100644
--- a/packages/myst-transforms/src/index.ts
+++ b/packages/myst-transforms/src/index.ts
@@ -3,6 +3,8 @@ export {
   admonitionHeadersTransform,
   admonitionBlockquotePlugin,
   admonitionBlockquoteTransform,
+  admonitionQmdTransform,
+  admonitionQmdPlugin,
 } from './admonitions.js';
 export { captionParagraphPlugin, captionParagraphTransform } from './caption.js';
 export { footnotesPlugin, footnotesTransform } from './footnotes.js';