Add inline-image style for BPMN icon images (#4647)

* Add inline-image style for BPMN icon images * Add text clarifier
camunda · Nov 26, 2024 · a9db86f · a9db86f
1 parent 8615d0d
commit a9db86f
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/docs/components/best-practices/modeling/creating-readable-process-models.md b/docs/components/best-practices/modeling/creating-readable-process-models.md
@@ -107,7 +107,7 @@ Make your models easier to understand by modeling _explicitly_, which most often
 
 #### Using gateways instead of conditional flows
 
-Model splitting the process flow by always using _gateway symbols_ like <img src="/img/bpmn-elements/inclusive-gateway.svg" className="inline-image" /> instead of conditional flows <img src="/img/bpmn-elements/conditional-flow.svg" className="inline-image" />.
+Model splitting the process flow by always using _gateway symbols_ such as <img src="/img/bpmn-elements/inclusive-gateway.svg" className="inline-image" /> instead of conditional flows <img src="/img/bpmn-elements/conditional-flow.svg" className="inline-image" />.
 
 <div bpmn="best-practices/creating-readable-process-models-assets/explicit-gateways-instead-of-conditional-flows.bpmn" callouts="inclusive_gateway" />
 

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -407,6 +407,14 @@ span.callout + p::after {
   border: none;
 }
 
+/* Use for inline images within text, such as BPMN symbols */
+.theme-doc-markdown img.inline-image {
+  border: none;
+  max-height: 1.8rem;
+  margin: 0;
+  padding: 0;
+}
+
 /* Unsupported versions in the versions selector */
 .dropdown-separator {
   margin: 0.3rem 0;