إنتقل إلى المحتوى الرئيسي

جدار الشعارات

ترجمة لـالمواصفات بالإنجليزية. إن اختلفت الترجمة عن الأصل، فالإنجليزية هي المرجع.

من يستخدمه: شعاراتهم بلون واحد، بقدر ما يتسع الصف.

CSS: css/components/logos.css. الأصناف: .al-logos، .al-logos__wordmark.

في صفحته، بالإنجليزية والعربية

البنية​

HTML
<ul class="al-logos" aria-label="من يبني به">
  <li><img src="organisation-a.svg" alt="المؤسسة أ"></li>
  <li><svg role="img" aria-labelledby="org-b"><title id="org-b">المؤسسة ب</title>…</svg></li>
  <li><span class="al-logos__wordmark">المؤسسة ج</span></li>
</ul>

وفي React: Logos (label وlogos) وLogoWordmark.

الأنواع والأحجام​

شعارات صورًا (تظهر بالرمادي)، أو SVG (تُرسم بـcurrentColor، لون النص الخافت)، أو شعارًا نصيًا مع أيقونة، لشعار لا تملكه ملفًا. بارتفاع 2rem كحد أقصى؛ وبقدر ما يتسع الصف منها بعرض 9rem.

الحالات​

لا شيء: ثابتة. ولا شريط متحرك أبدًا.

لوحة المفاتيح​

لا شيء، إلا إن كان الشعار رابطًا إلى قصته؛ فيصل Tab إلى كل رابط.

ARIA​

قائمة، مسمّاة (aria-label) حين لا يسمّيها عنوان. ونص alt لكل صورة هو الاسم، لا «شعار»؛ ولعنصر SVG role="img" و<title>.

من اليمين إلى اليسار​

تتبع القائمة اتجاه القراءة. وتحتفظ الشعارات والأسماء بخطها واتجاهها (lang).

افعل ولا تفعل​

افعل
  • لا تعرض إلا من وافق على عرضه.
  • اجعلها بالارتفاع نفسه، فلا يطغى أحدها.
لا تفعل
  • تحريكها عبر الصفحة.
  • خلط شعارات بألوانها مع شعارات بالرمادي.

الرموز​

الرموز التي يستخدمها (7)

--al-color-text-muted، --al-font-display، --al-space-6، --al-space-8، --al-text-lg، --al-tracking-tight، --al-weight-medium