<div class="alert-box alert-info">
<b>معلومة:</b> هذا النص هو مجرد مثال لتوضيح شكل صندوق المعلومات. يمكنك وضع أي نص أو روابط هنا.
</div>

<div class="alert-box alert-success">
<b>نجاح:</b> هذا النص هو مجرد مثال لتوضيح شكل صندوق النجاح. يمكنك وضع أي نص أو روابط هنا.
</div>

<div class="alert-box alert-warning">
<b>تحذير:</b> هذا النص هو مجرد مثال لتوضيح شكل صندوق التحذير. يمكنك وضع أي نص أو روابط هنا.
</div>

<div class="alert-box alert-error">
<b>خطأ:</b> هذا النص هو مجرد مثال لتوضيح شكل صندوق الخطأ. يمكنك وضع أي نص أو روابط هنا.
</div>

<p>&nbsp;</p><h3 _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box; font-family: Inter, sans-serif; margin: 0px;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeod-LXKc2WQF9m6xSBveACoKRHlnvhLyqNwSOVmEdioIafbwa136hECMwgl7wv-CP2POk21RDG9Kuv5Ja5F4jJ9pKCvmldJqeCsuipArsnjwHSaA0ZbztKKBG1Zp8Yt-aci6uU1Qd72EItfB7CIOm_ZQlAQEc2RcFopzMF5-ZiUOrCmWZf97EM_1BHo0/s1024/%D8%B1%D9%85%D8%B2%20%D8%AA%D8%B4%D8%BA%D9%8A%D9%84%20%D9%85%D8%AA%D8%B9%D8%AF%D8%AF%20%D8%A7%D9%84%D8%A3%D9%84%D9%88%D8%A7%D9%86.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1024" data-original-width="1024" height="640" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeod-LXKc2WQF9m6xSBveACoKRHlnvhLyqNwSOVmEdioIafbwa136hECMwgl7wv-CP2POk21RDG9Kuv5Ja5F4jJ9pKCvmldJqeCsuipArsnjwHSaA0ZbztKKBG1Zp8Yt-aci6uU1Qd72EItfB7CIOm_ZQlAQEc2RcFopzMF5-ZiUOrCmWZf97EM_1BHo0/w640-h640-rw/%D8%B1%D9%85%D8%B2%20%D8%AA%D8%B4%D8%BA%D9%8A%D9%84%20%D9%85%D8%AA%D8%B9%D8%AF%D8%AF%20%D8%A7%D9%84%D8%A3%D9%84%D9%88%D8%A7%D9%86.png" width="640" /></a></div><br /><span _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box;"><br /></span></h3><h3 _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box; font-family: Inter, sans-serif; margin: 0px;"><span _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box;">الخطوة الثانية: كيفية الاستخدام (الشرح الذي ستقدمه لمشتري القالب)</span></h3><p _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box; font-family: Inter, sans-serif; font-optical-sizing: auto; font-size: 14px; line-height: 20px; margin-bottom: 18px;"><ms-cmark-node _ngcontent-ng-c4139270029="" _nghost-ng-c4139270029="" style="box-sizing: border-box; display: contents;"><span _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box;">الآن، لاستخدام هذه الصناديق، كل ما على الكاتب فعله هو الانتقال إلى وضع&nbsp;</span><strong _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box;">"عرض HTML" (HTML view)</strong><span _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box;">&nbsp;في محرر مقالات بلوجر ولصق الأكواد التالية:</span></ms-cmark-node></p><p _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box; font-family: Inter, sans-serif; font-optical-sizing: auto; font-size: 14px; line-height: 20px; margin-bottom: 18px;"><ms-cmark-node _ngcontent-ng-c4139270029="" _nghost-ng-c4139270029="" style="box-sizing: border-box; display: contents;"><strong _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box;">1. صندوق المعلومات (Info):</strong></ms-cmark-node></p><ms-code-block _ngcontent-ng-c4139270029="" _nghost-ng-c408037419="" class="ng-star-inserted" style="box-sizing: border-box; font-family: Inter, sans-serif; font-size: 14px; position: relative;"><div _ngcontent-ng-c408037419="" class="container" style="--mat-expansion-container-background-color: var(--color-v3-surface-container); --mat-expansion-container-elevation-shadow: none; --mat-expansion-header-collapsed-state-height: 36px; --mat-expansion-header-disabled-state-text-color: var(--color-v3-text); --mat-expansion-header-expanded-state-height: 36px; --mat-expansion-header-indicator-display: none; border-radius: 12px; border: 1px solid var(--color-v3-outline-var); box-shadow: var(--v3-shadow-xs); box-sizing: border-box; font-optical-sizing: auto; line-height: 20px; margin-bottom: 12px;"><mat-expansion-panel _ngcontent-ng-c408037419="" class="mat-expansion-panel sticky-header mat-expanded mat-expansion-panel-animations-enabled" style="border-radius: 12px; box-shadow: var(--mat-expansion-container-elevation-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)); box-sizing: content-box; color: var(--mat-expansion-container-text-color, var(--mat-sys-on-surface)); display: block; margin: 0px; overflow-x: unset; overflow-y: clip; position: relative; transition: margin 225ms cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1) 0s;"><div class="mat-expansion-panel-content-wrapper" style="box-sizing: border-box; display: grid; font-optical-sizing: auto; grid-template-columns: 100%; grid-template-rows: 1fr; line-height: 20px; transition: grid-template-rows 225ms cubic-bezier(0.4, 0, 0.2, 1) 0s;"><div aria-labelledby="mat-expansion-panel-header-21" class="mat-expansion-panel-content" id="cdk-accordion-child-21" role="region" style="box-sizing: border-box; display: flex; flex-direction: column; font-family: var(--mat-expansion-container-text-font, var(--mat-sys-body-large-font)); font-optical-sizing: auto; font-size: var(--mat-expansion-container-text-size, var(--mat-sys-body-large-size)); font-weight: var(--mat-expansion-container-text-weight, var(--mat-sys-body-large-weight)); letter-spacing: var(--mat-expansion-container-text-tracking, var(--mat-sys-body-large-tracking)); line-height: var(--mat-expansion-container-text-line-height, var(--mat-sys-body-large-line-height)); min-height: 0px; overflow: visible; transition: visibility 190ms linear 0s; visibility: visible;"><div class="mat-expansion-panel-body" style="box-sizing: border-box; display: flex; flex-direction: column; font-optical-sizing: auto; line-height: 20px; padding: 0px;"><pre _ngcontent-ng-c408037419="" class="ng-star-inserted" style="box-sizing: border-box; color: var(--color-v3-text); display: inline-flex; line-height: 22px; margin-bottom: 0px; overflow-x: auto; padding: 0px 16px 12px 12px;"><code _ngcontent-ng-c408037419="" style="box-sizing: border-box; font-size: 13px;"><span class="hljs-tag" style="box-sizing: border-box;">&lt;<span class="hljs-name" style="box-sizing: border-box; color: #22863a;">div</span> <span class="hljs-attr" style="box-sizing: border-box; color: #005cc5;">class</span>=<span class="hljs-string" style="box-sizing: border-box; color: #032f62;">"alert-box alert-info"</span>&gt;</span> <span class="hljs-tag" style="box-sizing: border-box;">&lt;<span class="hljs-name" style="box-sizing: border-box; color: #22863a;">b</span>&gt;</span>معلومة:<span class="hljs-tag" style="box-sizing: border-box;">&lt;/<span class="hljs-name" style="box-sizing: border-box; color: #22863a;">b</span>&gt;</span> هذا النص هو مجرد مثال لتوضيح شكل صندوق المعلومات. يمكنك وضع أي نص أو روابط هنا. <span class="hljs-tag" style="box-sizing: border-box;">&lt;/<span class="hljs-name" style="box-sizing: border-box; color: #22863a;">div</span>&gt;</span></code><code _ngcontent-ng-c408037419="" style="box-sizing: border-box; font-size: 13px;"><span class="hljs-tag" style="box-sizing: border-box;"><br /></span></code></pre></div></div></div></mat-expansion-panel></div></ms-code-block><p _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box; font-family: Inter, sans-serif; font-optical-sizing: auto; font-size: 14px; line-height: 20px; margin-bottom: 18px;"><ms-cmark-node _ngcontent-ng-c4139270029="" _nghost-ng-c4139270029="" style="box-sizing: border-box; display: contents;"><strong _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box;"></strong></ms-cmark-node></p><div class="alert-box alert-info"><strong _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box;"> <b>معلومة:</b> هذا النص هو مجرد مثال لتوضيح شكل صندوق المعلومات. يمكنك وضع أي نص أو روابط هنا. </strong></div><p></p><p _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box; font-family: Inter, sans-serif; font-optical-sizing: auto; font-size: 14px; line-height: 20px; margin-bottom: 18px;"><ms-cmark-node _ngcontent-ng-c4139270029="" _nghost-ng-c4139270029="" style="box-sizing: border-box; display: contents;"><strong _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box;">2. صندوق النجاح (Success):</strong></ms-cmark-node></p><ms-code-block _ngcontent-ng-c4139270029="" _nghost-ng-c408037419="" class="ng-star-inserted" style="box-sizing: border-box; font-family: Inter, sans-serif; font-size: 14px; position: relative;"><div _ngcontent-ng-c408037419="" class="container" style="--mat-expansion-container-background-color: var(--color-v3-surface-container); --mat-expansion-container-elevation-shadow: none; --mat-expansion-header-collapsed-state-height: 36px; --mat-expansion-header-disabled-state-text-color: var(--color-v3-text); --mat-expansion-header-expanded-state-height: 36px; --mat-expansion-header-indicator-display: none; border-radius: 12px; border: 1px solid var(--color-v3-outline-var); box-shadow: var(--v3-shadow-xs); box-sizing: border-box; font-optical-sizing: auto; line-height: 20px; margin-bottom: 12px;"><mat-expansion-panel _ngcontent-ng-c408037419="" class="mat-expansion-panel sticky-header mat-expanded mat-expansion-panel-animations-enabled" style="border-radius: 12px; box-shadow: var(--mat-expansion-container-elevation-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)); box-sizing: content-box; color: var(--mat-expansion-container-text-color, var(--mat-sys-on-surface)); display: block; margin: 0px; overflow-x: unset; overflow-y: clip; position: relative; transition: margin 225ms cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1) 0s;"><mat-expansion-panel-header _ngcontent-ng-c408037419="" aria-controls="cdk-accordion-child-22" aria-disabled="false" aria-expanded="true" class="mat-expansion-panel-header mat-focus-indicator sticky mat-expanded" id="mat-expansion-panel-header-22" role="button" style="align-items: center; border-radius: 12px; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: row; font-family: var(--mat-expansion-header-text-font, var(--mat-sys-title-medium-font)); font-size: var(--mat-expansion-header-text-size, var(--mat-sys-title-medium-size)); font-weight: var(--mat-expansion-header-text-weight, var(--mat-sys-title-medium-weight)); height: var(--mat-expansion-header-expanded-state-height, 64px); letter-spacing: var(--mat-expansion-header-text-tracking, var(--mat-sys-title-medium-tracking)); line-height: var(--mat-expansion-header-text-line-height, var(--mat-sys-title-medium-line-height)); padding-inline: 12px 6px; padding: 0px 24px; position: sticky; top: calc(var(--ms-autoscroll-container-padding-top, 20px)*-1); transition: height 225ms cubic-bezier(0.4, 0, 0.2, 1) 0s;" tabindex="0"><span class="mat-expansion-indicator ng-star-inserted" style="box-sizing: border-box; transform: rotate(180deg); transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0s;"></span></mat-expansion-panel-header><div class="mat-expansion-panel-content-wrapper" style="box-sizing: border-box; display: grid; font-optical-sizing: auto; grid-template-columns: 100%; grid-template-rows: 1fr; line-height: 20px; transition: grid-template-rows 225ms cubic-bezier(0.4, 0, 0.2, 1) 0s;"><div aria-labelledby="mat-expansion-panel-header-22" class="mat-expansion-panel-content" id="cdk-accordion-child-22" role="region" style="box-sizing: border-box; display: flex; flex-direction: column; font-family: var(--mat-expansion-container-text-font, var(--mat-sys-body-large-font)); font-optical-sizing: auto; font-size: var(--mat-expansion-container-text-size, var(--mat-sys-body-large-size)); font-weight: var(--mat-expansion-container-text-weight, var(--mat-sys-body-large-weight)); letter-spacing: var(--mat-expansion-container-text-tracking, var(--mat-sys-body-large-tracking)); line-height: var(--mat-expansion-container-text-line-height, var(--mat-sys-body-large-line-height)); min-height: 0px; overflow: visible; transition: visibility 190ms linear 0s; visibility: visible;"><div class="mat-expansion-panel-body" style="box-sizing: border-box; display: flex; flex-direction: column; font-optical-sizing: auto; line-height: 20px; padding: 0px;"><pre _ngcontent-ng-c408037419="" class="ng-star-inserted" style="box-sizing: border-box; color: var(--color-v3-text); display: inline-flex; line-height: 22px; margin-bottom: 0px; overflow-x: auto; padding: 0px 16px 12px 12px;"><code _ngcontent-ng-c408037419="" style="box-sizing: border-box; font-size: 13px;"><span class="hljs-tag" style="box-sizing: border-box;">&lt;<span class="hljs-name" style="box-sizing: border-box; color: #22863a;">div</span> <span class="hljs-attr" style="box-sizing: border-box; color: #005cc5;">class</span>=<span class="hljs-string" style="box-sizing: border-box; color: #032f62;">"alert-box alert-success"</span>&gt;</span> <span class="hljs-tag" style="box-sizing: border-box;">&lt;<span class="hljs-name" style="box-sizing: border-box; color: #22863a;">b</span>&gt;</span>نجاح:<span class="hljs-tag" style="box-sizing: border-box;">&lt;/<span class="hljs-name" style="box-sizing: border-box; color: #22863a;">b</span>&gt;</span> هذا النص هو مجرد مثال لتوضيح شكل صندوق النجاح. يمكنك وضع أي نص أو روابط هنا. <span class="hljs-tag" style="box-sizing: border-box;">&lt;/<span class="hljs-name" style="box-sizing: border-box; color: #22863a;">div</span>&gt;</span></code></pre></div></div></div></mat-expansion-panel></div></ms-code-block><p _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box; font-family: Inter, sans-serif; font-optical-sizing: auto; font-size: 14px; line-height: 20px; margin-bottom: 18px;"><ms-cmark-node _ngcontent-ng-c4139270029="" _nghost-ng-c4139270029="" style="box-sizing: border-box; display: contents;"></ms-cmark-node></p><div class="alert-box alert-success"> <b>نجاح:</b> هذا النص هو مجرد مثال لتوضيح شكل صندوق النجاح. يمكنك وضع أي نص أو روابط هنا. </div><p></p><p _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box; font-family: Inter, sans-serif; font-optical-sizing: auto; font-size: 14px; line-height: 20px; margin-bottom: 18px;"><ms-cmark-node _ngcontent-ng-c4139270029="" _nghost-ng-c4139270029="" style="box-sizing: border-box; display: contents;"><strong _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box;">3. صندوق التحذير (Warning):</strong></ms-cmark-node></p><ms-code-block _ngcontent-ng-c4139270029="" _nghost-ng-c408037419="" class="ng-star-inserted" style="box-sizing: border-box; font-family: Inter, sans-serif; font-size: 14px; position: relative;"><div _ngcontent-ng-c408037419="" class="container" style="--mat-expansion-container-background-color: var(--color-v3-surface-container); --mat-expansion-container-elevation-shadow: none; --mat-expansion-header-collapsed-state-height: 36px; --mat-expansion-header-disabled-state-text-color: var(--color-v3-text); --mat-expansion-header-expanded-state-height: 36px; --mat-expansion-header-indicator-display: none; border-radius: 12px; border: 1px solid var(--color-v3-outline-var); box-shadow: var(--v3-shadow-xs); box-sizing: border-box; font-optical-sizing: auto; line-height: 20px; margin-bottom: 12px;"><mat-expansion-panel _ngcontent-ng-c408037419="" class="mat-expansion-panel sticky-header mat-expanded mat-expansion-panel-animations-enabled" style="border-radius: 12px; box-shadow: var(--mat-expansion-container-elevation-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)); box-sizing: content-box; color: var(--mat-expansion-container-text-color, var(--mat-sys-on-surface)); display: block; margin: 0px; overflow-x: unset; overflow-y: clip; position: relative; transition: margin 225ms cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1) 0s;"><mat-expansion-panel-header _ngcontent-ng-c408037419="" aria-controls="cdk-accordion-child-23" aria-disabled="false" aria-expanded="true" class="mat-expansion-panel-header mat-focus-indicator sticky mat-expanded" id="mat-expansion-panel-header-23" role="button" style="align-items: center; border-radius: 12px; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: row; font-family: var(--mat-expansion-header-text-font, var(--mat-sys-title-medium-font)); font-size: var(--mat-expansion-header-text-size, var(--mat-sys-title-medium-size)); font-weight: var(--mat-expansion-header-text-weight, var(--mat-sys-title-medium-weight)); height: var(--mat-expansion-header-expanded-state-height, 64px); letter-spacing: var(--mat-expansion-header-text-tracking, var(--mat-sys-title-medium-tracking)); line-height: var(--mat-expansion-header-text-line-height, var(--mat-sys-title-medium-line-height)); padding-inline: 12px 6px; padding: 0px 24px; position: sticky; top: calc(var(--ms-autoscroll-container-padding-top, 20px)*-1); transition: height 225ms cubic-bezier(0.4, 0, 0.2, 1) 0s;" tabindex="0"><span class="mat-expansion-indicator ng-star-inserted" style="box-sizing: border-box; transform: rotate(180deg); transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0s;"></span></mat-expansion-panel-header><div class="mat-expansion-panel-content-wrapper" style="box-sizing: border-box; display: grid; font-optical-sizing: auto; grid-template-columns: 100%; grid-template-rows: 1fr; line-height: 20px; transition: grid-template-rows 225ms cubic-bezier(0.4, 0, 0.2, 1) 0s;"><div aria-labelledby="mat-expansion-panel-header-23" class="mat-expansion-panel-content" id="cdk-accordion-child-23" role="region" style="box-sizing: border-box; display: flex; flex-direction: column; font-family: var(--mat-expansion-container-text-font, var(--mat-sys-body-large-font)); font-optical-sizing: auto; font-size: var(--mat-expansion-container-text-size, var(--mat-sys-body-large-size)); font-weight: var(--mat-expansion-container-text-weight, var(--mat-sys-body-large-weight)); letter-spacing: var(--mat-expansion-container-text-tracking, var(--mat-sys-body-large-tracking)); line-height: var(--mat-expansion-container-text-line-height, var(--mat-sys-body-large-line-height)); min-height: 0px; overflow: visible; transition: visibility 190ms linear 0s; visibility: visible;"><div class="mat-expansion-panel-body" style="box-sizing: border-box; display: flex; flex-direction: column; font-optical-sizing: auto; line-height: 20px; padding: 0px;"><pre _ngcontent-ng-c408037419="" class="ng-star-inserted" style="box-sizing: border-box; color: var(--color-v3-text); display: inline-flex; line-height: 22px; margin-bottom: 0px; overflow-x: auto; padding: 0px 16px 12px 12px;"><code _ngcontent-ng-c408037419="" style="box-sizing: border-box; font-size: 13px;"><span class="hljs-tag" style="box-sizing: border-box;">&lt;<span class="hljs-name" style="box-sizing: border-box; color: #22863a;">div</span> <span class="hljs-attr" style="box-sizing: border-box; color: #005cc5;">class</span>=<span class="hljs-string" style="box-sizing: border-box; color: #032f62;">"alert-box alert-warning"</span>&gt;</span> <span class="hljs-tag" style="box-sizing: border-box;">&lt;<span class="hljs-name" style="box-sizing: border-box; color: #22863a;">b</span>&gt;</span>تحذير:<span class="hljs-tag" style="box-sizing: border-box;">&lt;/<span class="hljs-name" style="box-sizing: border-box; color: #22863a;">b</span>&gt;</span> هذا النص هو مجرد مثال لتوضيح شكل صندوق التحذير. يمكنك وضع أي نص أو روابط هنا. <span class="hljs-tag" style="box-sizing: border-box;">&lt;/<span class="hljs-name" style="box-sizing: border-box; color: #22863a;">div</span>&gt;</span></code></pre></div></div></div></mat-expansion-panel></div></ms-code-block><p _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box; font-family: Inter, sans-serif; font-optical-sizing: auto; font-size: 14px; line-height: 20px; margin-bottom: 18px;"><ms-cmark-node _ngcontent-ng-c4139270029="" _nghost-ng-c4139270029="" style="box-sizing: border-box; display: contents;"><strong _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box;"></strong></ms-cmark-node></p><div class="alert-box alert-warning"><strong _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box;"> <b>تحذير:</b> هذا النص هو مجرد مثال لتوضيح شكل صندوق التحذير. يمكنك وضع أي نص أو روابط هنا. </strong></div><p></p><p _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box; font-family: Inter, sans-serif; font-optical-sizing: auto; font-size: 14px; line-height: 20px; margin-bottom: 18px;"><ms-cmark-node _ngcontent-ng-c4139270029="" _nghost-ng-c4139270029="" style="box-sizing: border-box; display: contents;"><strong _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box;">4. صندوق الخطأ (Error):</strong></ms-cmark-node></p><ms-code-block _ngcontent-ng-c4139270029="" _nghost-ng-c408037419="" class="ng-star-inserted" style="box-sizing: border-box; font-family: Inter, sans-serif; font-size: 14px; position: relative;"><div _ngcontent-ng-c408037419="" class="container" style="--mat-expansion-container-background-color: var(--color-v3-surface-container); --mat-expansion-container-elevation-shadow: none; --mat-expansion-header-collapsed-state-height: 36px; --mat-expansion-header-disabled-state-text-color: var(--color-v3-text); --mat-expansion-header-expanded-state-height: 36px; --mat-expansion-header-indicator-display: none; border-radius: 12px; border: 1px solid var(--color-v3-outline-var); box-shadow: var(--v3-shadow-xs); box-sizing: border-box; font-optical-sizing: auto; line-height: 20px; margin-bottom: 12px;"><mat-expansion-panel _ngcontent-ng-c408037419="" class="mat-expansion-panel sticky-header mat-expanded mat-expansion-panel-animations-enabled" style="border-radius: 12px; box-shadow: var(--mat-expansion-container-elevation-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)); box-sizing: content-box; color: var(--mat-expansion-container-text-color, var(--mat-sys-on-surface)); display: block; margin: 0px; overflow-x: unset; overflow-y: clip; position: relative; transition: margin 225ms cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1) 0s;"><mat-expansion-panel-header _ngcontent-ng-c408037419="" aria-controls="cdk-accordion-child-24" aria-disabled="false" aria-expanded="true" class="mat-expansion-panel-header mat-focus-indicator sticky mat-expanded" id="mat-expansion-panel-header-24" role="button" style="align-items: center; border-radius: 12px; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: row; font-family: var(--mat-expansion-header-text-font, var(--mat-sys-title-medium-font)); font-size: var(--mat-expansion-header-text-size, var(--mat-sys-title-medium-size)); font-weight: var(--mat-expansion-header-text-weight, var(--mat-sys-title-medium-weight)); height: var(--mat-expansion-header-expanded-state-height, 64px); letter-spacing: var(--mat-expansion-header-text-tracking, var(--mat-sys-title-medium-tracking)); line-height: var(--mat-expansion-header-text-line-height, var(--mat-sys-title-medium-line-height)); padding-inline: 12px 6px; padding: 0px 24px; position: sticky; top: calc(var(--ms-autoscroll-container-padding-top, 20px)*-1); transition: height 225ms cubic-bezier(0.4, 0, 0.2, 1) 0s;" tabindex="0"><span class="mat-expansion-indicator ng-star-inserted" style="box-sizing: border-box; transform: rotate(180deg); transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0s;"></span></mat-expansion-panel-header><div class="mat-expansion-panel-content-wrapper" style="box-sizing: border-box; display: grid; font-optical-sizing: auto; grid-template-columns: 100%; grid-template-rows: 1fr; line-height: 20px; transition: grid-template-rows 225ms cubic-bezier(0.4, 0, 0.2, 1) 0s;"><div aria-labelledby="mat-expansion-panel-header-24" class="mat-expansion-panel-content" id="cdk-accordion-child-24" role="region" style="box-sizing: border-box; display: flex; flex-direction: column; font-family: var(--mat-expansion-container-text-font, var(--mat-sys-body-large-font)); font-optical-sizing: auto; font-size: var(--mat-expansion-container-text-size, var(--mat-sys-body-large-size)); font-weight: var(--mat-expansion-container-text-weight, var(--mat-sys-body-large-weight)); letter-spacing: var(--mat-expansion-container-text-tracking, var(--mat-sys-body-large-tracking)); line-height: var(--mat-expansion-container-text-line-height, var(--mat-sys-body-large-line-height)); min-height: 0px; overflow: visible; transition: visibility 190ms linear 0s; visibility: visible;"><div class="mat-expansion-panel-body" style="box-sizing: border-box; display: flex; flex-direction: column; font-optical-sizing: auto; line-height: 20px; padding: 0px;"><pre _ngcontent-ng-c408037419="" class="ng-star-inserted" style="box-sizing: border-box; color: var(--color-v3-text); display: inline-flex; line-height: 22px; margin-bottom: 0px; overflow-x: auto; padding: 0px 16px 12px 12px;"><code _ngcontent-ng-c408037419="" style="box-sizing: border-box; font-size: 13px;"><span class="hljs-tag" style="box-sizing: border-box;">&lt;<span class="hljs-name" style="box-sizing: border-box; color: #22863a;">div</span> <span class="hljs-attr" style="box-sizing: border-box; color: #005cc5;">class</span>=<span class="hljs-string" style="box-sizing: border-box; color: #032f62;">"alert-box alert-error"</span>&gt;</span> <span class="hljs-tag" style="box-sizing: border-box;">&lt;<span class="hljs-name" style="box-sizing: border-box; color: #22863a;">b</span>&gt;</span>خطأ:<span class="hljs-tag" style="box-sizing: border-box;">&lt;/<span class="hljs-name" style="box-sizing: border-box; color: #22863a;">b</span>&gt;</span> هذا النص هو مجرد مثال لتوضيح شكل صندوق الخطأ. يمكنك وضع أي نص أو روابط هنا. <span class="hljs-tag" style="box-sizing: border-box;">&lt;/<span class="hljs-name" style="box-sizing: border-box; color: #22863a;">div</span>&gt;</span></code></pre></div></div></div></mat-expansion-panel></div></ms-code-block><p _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box; font-family: Inter, sans-serif; font-optical-sizing: auto; font-size: 14px; line-height: 20px; margin-bottom: 18px;"><ms-cmark-node _ngcontent-ng-c4139270029="" _nghost-ng-c4139270029="" style="box-sizing: border-box; display: contents;"><strong _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box;"></strong></ms-cmark-node></p><div class="alert-box alert-error"><strong _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box;"> <b>خطأ:</b> هذا النص هو مجرد مثال لتوضيح شكل صندوق الخطأ. يمكنك وضع أي نص أو روابط هنا. </strong></div><p></p><p _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box; font-family: Inter, sans-serif; font-optical-sizing: auto; font-size: 14px; line-height: 20px; margin-bottom: 18px;"><ms-cmark-node _ngcontent-ng-c4139270029="" _nghost-ng-c4139270029="" style="box-sizing: border-box; display: contents;"><strong _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box;">جرب بنفسك!</strong><span _ngcontent-ng-c4139270029="" class="ng-star-inserted" style="box-sizing: border-box;">&nbsp;اذهب وأنشئ مقالًا جديدًا، انتقل إلى وضع "عرض HTML"، والصق أحد هذه الأكواد. ثم عد إلى "عرض وضع الإنشاء" وستجد الصندوق ظاهرًا أمامك.</span></ms-cmark-node></p>