Hadith Formatting Examples

Hadith Formatting Examples

Using Direct CSS Classes (Recommended Approach)

بسم الله أرقيك ,من كلّ شيء يؤذيك ,من شر كلّ نفس أو عين حاسد ,الله يشفيك, بسم الله أرقيك

Sahih Muslim

Bismillahi arqika, min kulli shay’in yu’thika, min sharri kulli nafsin aw ‘aynin hasidin, Allahu yashfika, bismillahi arqika.

”In the name of Allah I perform ruqyah for you, from everything that is harming you, from the evil of every soul or envious eye, may Allah heal you, in the name of Allah I perform ruqyah for you.”

For Reference: Old Style (Not Working)

Sahih Muslim

بسم الله أرقيك ,من كلّ شيء يؤذيك ,من شر كلّ نفس أو عين حاسد ,الله يشفيك, بسم الله أرقيك

Bismillahi arqika, min kulli shay’in yu’thika, min sharri kulli nafsin aw ‘aynin hasidin, Allahu yashfika, bismillahi arqika.

“In the name of Allah I perform ruqyah for you, from everything that is harming you, from the evil of every soul or envious eye, may Allah heal you, in the name of Allah I perform ruqyah for you.”

How to Properly Format Hadiths

1. Always use the direct CSS classes approach:

   <div class="starlight-aside starlight-aside--hadith">
     <p>Arabic text here</p>
   </div>
   
   <div class="starlight-aside starlight-aside--reference">
     <p>Translation and reference here</p>
   </div>

2. Make sure to import the styles at the top of your MDX file: