> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# عنوان

> اعرض عناوين دلالية بأحجام مرئية مستقلة.

## نظرة عامة

يعرض `Heading` عنصر `h2` افتراضياً. استخدم `children` للمحتوى، و`level` لبنية المستند، و`size` للمظهر.

**Light**

[مثال على العنوان (light)](https://storybook.twenty.com/iframe.html?id=ui-typography-heading--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[مثال على العنوان (dark)](https://storybook.twenty.com/iframe.html?id=ui-typography-heading--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-typography-heading--display)

## استخدام

اختر المستويات وفق ترتيب المستند. لا يغيّر الحجم المرئي الأصغر المستوى الذي تعلنه التقنية المساعدة.

```tsx theme={null}
import { Heading } from 'twenty-ui/primitives/typography';

export const WorkspaceTitle = () => <Heading>Workspace settings</Heading>;
```

تستخدم الأحجام `xs` و`sm` و`md` و`lg` و`xl` و`xxl` رموز الخط المطابقة. تستخدم الأحجام الأكبر `1.54rem` و`1.85rem` على التوالي. تحافظ جميع الأحجام على وزن شبه عريض وارتفاع سطر قدره `1.1`. يقبل `Section.Header` و`Dialog.Title` قيم الأحجام نفسها. لا تحتوي العناوين على هامش خارجي؛ إذ يتولى التخطيط المحيط بها المسافات.

## اللون والتكوين

**Light**

[أحجام العناوين وألوانها (light)](https://storybook.twenty.com/iframe.html?id=ui-typography-heading--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[أحجام العناوين وألوانها (dark)](https://storybook.twenty.com/iframe.html?id=ui-typography-heading--catalog\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-typography-heading--catalog)

استخدم `color="secondary"` للعناوين الأقل بروزاً. يتوفر `tertiary` أيضاً، لكن تباينه يعتمد على حجم الخط والسمة والخلفية. تحقق من سهولة القراءة عند استخدامه.

تُمرَّر السمات الأصلية والأنماط وأسماء الفئات والمراجع إلى العنوان. استخدم `render` للتركيب باستخدام عنصر أو مكوّن مخصص؛ ويتحمل ذلك العنصر مسؤولية الحفاظ على دلالات العنوان.

للعنوان الذي يتضمن نصًا داعمًا أو إجراءات، استخدم [Section](https://docs.twenty.com/ar/ui/components/layout/section.md).

## الإزاحة

**color** `"primary" | "secondary" | "tertiary"` (default: primary)

Theme font color. Defaults to `primary`.

**level** `1 | 2 | 3 | 4 | 5 | 6` (default: 2)

Semantic heading level, from `h1` through `h6`. Does not change the visual size. Defaults to `2`.

**render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, \{\}\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**size** `"lg" | "md" | "sm" | "xl" | "xs" | "xxl"` (default: md)

Visual font size from `xs` through `xxl`, independent of the heading level. Uses the matching font token. Defaults to `md`.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.