md-divider spec card
Identity · when to use / when NOT · decision cues · behavioural contract · do/don't · anti-patterns · full API. Paste into your agent when you're implementing with this component.
Divider
A thin rule that separates content. Full-bleed or inset, horizontal or
vertical. Four boolean props, no events, no methods, no slots — and, unusually
for this library, no density prop.
Live preview Open in Storybook
Show code for each technology
<!-- index.html — register the AWC UI elements once -->
<script type="module">
import '@awc-ui/core/define';
</script>
<div style="inline-size: 340px; background: var(--md-sys-color-surface); border-radius: 12px; overflow: hidden;">
<div style="padding: 16px;">Item above the divider</div>
<md-divider></md-divider>
<div style="padding: 16px;">Item below the divider</div>
</div>import { MdDivider } from '@awc-ui/react';
export function Demo() {
return (
<>
<div style={{ inlineSize: '340px', background: 'var(--md-sys-color-surface)', borderRadius: '12px', overflow: 'hidden' }}>
<div style={{ padding: '16px' }}>Item above the divider</div>
<MdDivider></MdDivider>
<div style={{ padding: '16px' }}>Item below the divider</div>
</div>
</>
);
}// app.module.ts — register the AWC UI elements once
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { AwcUiModule } from '@awc-ui/angular';
@NgModule({
imports: [AwcUiModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}
<!-- app.component.html -->
<div style="inline-size: 340px; background: var(--md-sys-color-surface); border-radius: 12px; overflow: hidden;">
<div style="padding: 16px;">Item above the divider</div>
<md-divider></md-divider>
<div style="padding: 16px;">Item below the divider</div>
</div><script setup>
import '@awc-ui/core/define';
</script>
<template>
<div style="inline-size: 340px; background: var(--md-sys-color-surface); border-radius: 12px; overflow: hidden;">
<div style="padding: 16px;">Item above the divider</div>
<md-divider></md-divider>
<div style="padding: 16px;">Item below the divider</div>
</div>
</template><script>
import '@awc-ui/core/define';
</script>
<div style="inline-size: 340px; background: var(--md-sys-color-surface); border-radius: 12px; overflow: hidden;">
<div style="padding: 16px;">Item above the divider</div>
<md-divider></md-divider>
<div style="padding: 16px;">Item below the divider</div>
</div>Install
Section titled “Install”
Already installed? See the
Installation guide for one-time package setup
(core + tokens, fonts). Each tab below shows two patterns for using
md-divider in your project: Option A registers every AWC UI
component at once (simplest), Option B imports only this component for
tree-shake-friendly bundles.
<!-- ─── Option A: global registration (all components) ─── -->
<script type="module">
import '@awc-ui/core/define';
</script>
<!-- ─── Option B: single import (tree-shake only md-divider) ─── -->
<script type="module">
import '@awc-ui/core/components/md-divider';
</script>
<md-divider></md-divider>// ─── Option A: typed React wrapper (registers all components) ───
// Importing from '@awc-ui/react' calls defineCustomElements() as a
// side effect, so every md-* element becomes available in the browser.
import { MdDivider } from '@awc-ui/react';
export function Example() {
return <MdDivider></MdDivider>;
}
// ─── Option B: single import (tree-shake to only md-divider) ───
// Skip the wrapper and use the raw custom element. Smallest bundle,
// but you lose typed props/events on JSX.
import '@awc-ui/core/components/md-divider';
export function ExampleTreeShaken() {
return <md-divider></md-divider>;
}// ─── Option A: schema module (any md-* element accepted) ───
// Pair with `defineCustomElements(window)` in main.ts.
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { AwcUiModule } from '@awc-ui/angular';
@Component({
standalone: true,
imports: [AwcUiModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
template: `<md-divider></md-divider>`,
})
export class ExampleComponent {}
// ─── Option B: typed directive (tree-shake friendly) ───
// Pair with `import '@awc-ui/core/components/md-divider'` in main.ts.
import { Component } from '@angular/core';
import { MdDivider } from '@awc-ui/angular';
@Component({
standalone: true,
imports: [MdDivider],
template: `<md-divider></md-divider>`,
})
export class ExampleTreeShakenComponent {}<!-- ─── Option A: typed Vue wrapper (registers all components) ─── -->
<script setup lang="ts">
import { MdDivider } from '@awc-ui/vue';
</script>
<template>
<MdDivider></MdDivider>
</template>
<!-- ─── Option B: single import (tree-shake to only md-divider) ─── -->
<script setup lang="ts">
import '@awc-ui/core/components/md-divider';
</script>
<template>
<md-divider></md-divider>
</template><!-- ─── Option A: global registration (done once in main entry) ─── -->
<!-- main.ts: -->
<!-- import { defineCustomElements } from '@awc-ui/svelte'; -->
<!-- defineCustomElements(window); -->
<md-divider></md-divider>
<!-- ─── Option B: single import (tree-shake to only md-divider) ─── -->
<script lang="ts">
import '@awc-ui/core/components/md-divider';
</script>
<md-divider></md-divider>When to use
Section titled “When to use”- Separating interactive from non-interactive areas of a container — a card’s actions row from its content.
- Marking a hierarchy boundary in a list or menu, where whitespace alone isn’t enough.
When not to use
Section titled “When not to use”| Situation | Use instead |
|---|---|
| Spacing between unrelated blocks | Whitespace / margin |
| A section heading | A heading element |
| A decorative flourish | Nothing |
| A container edge | The container’s own border or elevation |
| Every row of a list | Nothing — M3 warns against the clutter |
| A progress track | md-progress-indicator |
Insets
Section titled “Insets”inset is exactly inset-start + inset-end. The distances come from
--md-divider-inset-start / --md-divider-inset-end, so an icon column that
isn’t 16px wide is a one-property override, not a new variant.
| Need | Setting |
|---|---|
| Full-bleed rule | no attributes |
| Indented both ends (rows with leading icons) | inset |
| Indented at the leading end only | inset-start |
| Indented at the trailing end only | inset-end |
Full-bleed, inset-start, inset, inset-end and a custom inset Open in Storybook
Show code for each technology
<!-- index.html — register the AWC UI elements once -->
<script type="module">
import '@awc-ui/core/define';
</script>
<div style="inline-size: 320px; background: var(--md-sys-color-surface); border-radius: 12px; overflow: hidden;">
<div style="padding: 12px 16px;">Full-bleed (no attributes)</div>
<md-divider></md-divider>
<div style="padding: 12px 16px;">Inset start</div>
<md-divider inset-start></md-divider>
<div style="padding: 12px 16px;">Inset (both ends)</div>
<md-divider inset></md-divider>
<div style="padding: 12px 16px;">Inset end</div>
<md-divider inset-end></md-divider>
<div style="padding: 12px 16px;">Custom 72px start inset</div>
<md-divider inset-start style="--md-divider-inset-start: 72px;"></md-divider>
<div style="padding: 12px 16px;">Last row</div>
</div>import { MdDivider } from '@awc-ui/react';
export function Demo() {
return (
<>
<div style={{ inlineSize: '320px', background: 'var(--md-sys-color-surface)', borderRadius: '12px', overflow: 'hidden' }}>
<div style={{ padding: '12px 16px' }}>Full-bleed (no attributes)</div>
<MdDivider></MdDivider>
<div style={{ padding: '12px 16px' }}>Inset start</div>
<MdDivider inset-start></MdDivider>
<div style={{ padding: '12px 16px' }}>Inset (both ends)</div>
<MdDivider inset></MdDivider>
<div style={{ padding: '12px 16px' }}>Inset end</div>
<MdDivider inset-end></MdDivider>
<div style={{ padding: '12px 16px' }}>Custom 72px start inset</div>
<MdDivider insetStart style={{ '--md-divider-inset-start': '72px' }}></MdDivider>
<div style={{ padding: '12px 16px' }}>Last row</div>
</div>
</>
);
}// app.module.ts — register the AWC UI elements once
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { AwcUiModule } from '@awc-ui/angular';
@NgModule({
imports: [AwcUiModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}
<!-- app.component.html -->
<div style="inline-size: 320px; background: var(--md-sys-color-surface); border-radius: 12px; overflow: hidden;">
<div style="padding: 12px 16px;">Full-bleed (no attributes)</div>
<md-divider></md-divider>
<div style="padding: 12px 16px;">Inset start</div>
<md-divider inset-start></md-divider>
<div style="padding: 12px 16px;">Inset (both ends)</div>
<md-divider inset></md-divider>
<div style="padding: 12px 16px;">Inset end</div>
<md-divider inset-end></md-divider>
<div style="padding: 12px 16px;">Custom 72px start inset</div>
<md-divider inset-start style="--md-divider-inset-start: 72px;"></md-divider>
<div style="padding: 12px 16px;">Last row</div>
</div><script setup>
import '@awc-ui/core/define';
</script>
<template>
<div style="inline-size: 320px; background: var(--md-sys-color-surface); border-radius: 12px; overflow: hidden;">
<div style="padding: 12px 16px;">Full-bleed (no attributes)</div>
<md-divider></md-divider>
<div style="padding: 12px 16px;">Inset start</div>
<md-divider inset-start></md-divider>
<div style="padding: 12px 16px;">Inset (both ends)</div>
<md-divider inset></md-divider>
<div style="padding: 12px 16px;">Inset end</div>
<md-divider inset-end></md-divider>
<div style="padding: 12px 16px;">Custom 72px start inset</div>
<md-divider inset-start style="--md-divider-inset-start: 72px;"></md-divider>
<div style="padding: 12px 16px;">Last row</div>
</div>
</template><script>
import '@awc-ui/core/define';
</script>
<div style="inline-size: 320px; background: var(--md-sys-color-surface); border-radius: 12px; overflow: hidden;">
<div style="padding: 12px 16px;">Full-bleed (no attributes)</div>
<md-divider></md-divider>
<div style="padding: 12px 16px;">Inset start</div>
<md-divider inset-start></md-divider>
<div style="padding: 12px 16px;">Inset (both ends)</div>
<md-divider inset></md-divider>
<div style="padding: 12px 16px;">Inset end</div>
<md-divider inset-end></md-divider>
<div style="padding: 12px 16px;">Custom 72px start inset</div>
<md-divider inset-start style="--md-divider-inset-start: 72px;"></md-divider>
<div style="padding: 12px 16px;">Last row</div>
</div>Vertical
Section titled “Vertical” Vertical separators — the parent supplies the height Open in Storybook
Draft
Show code for each technology
<!-- index.html — register the AWC UI elements once -->
<script type="module">
import '@awc-ui/core/define';
</script>
<div style="display: flex; align-items: stretch; block-size: 40px; gap: 16px; padding: 0 16px; background: var(--md-sys-color-surface); border-radius: 12px;">
<span style="display: flex; align-items: center;">Draft</span>
<md-divider vertical></md-divider>
<span style="display: flex; align-items: center;">Edited 2m ago</span>
<md-divider vertical inset></md-divider>
<span style="display: flex; align-items: center;">3 comments</span>
</div>import { MdDivider } from '@awc-ui/react';
export function Demo() {
return (
<>
<div style={{ display: 'flex', alignItems: 'stretch', blockSize: '40px', gap: '16px', padding: '0 16px', background: 'var(--md-sys-color-surface)', borderRadius: '12px' }}>
<span style={{ display: 'flex', alignItems: 'center' }}>Draft</span>
<MdDivider vertical></MdDivider>
<span style={{ display: 'flex', alignItems: 'center' }}>Edited 2m ago</span>
<MdDivider vertical inset></MdDivider>
<span style={{ display: 'flex', alignItems: 'center' }}>3 comments</span>
</div>
</>
);
}// app.module.ts — register the AWC UI elements once
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { AwcUiModule } from '@awc-ui/angular';
@NgModule({
imports: [AwcUiModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}
<!-- app.component.html -->
<div style="display: flex; align-items: stretch; block-size: 40px; gap: 16px; padding: 0 16px; background: var(--md-sys-color-surface); border-radius: 12px;">
<span style="display: flex; align-items: center;">Draft</span>
<md-divider vertical></md-divider>
<span style="display: flex; align-items: center;">Edited 2m ago</span>
<md-divider vertical inset></md-divider>
<span style="display: flex; align-items: center;">3 comments</span>
</div><script setup>
import '@awc-ui/core/define';
</script>
<template>
<div style="display: flex; align-items: stretch; block-size: 40px; gap: 16px; padding: 0 16px; background: var(--md-sys-color-surface); border-radius: 12px;">
<span style="display: flex; align-items: center;">Draft</span>
<md-divider vertical></md-divider>
<span style="display: flex; align-items: center;">Edited 2m ago</span>
<md-divider vertical inset></md-divider>
<span style="display: flex; align-items: center;">3 comments</span>
</div>
</template><script>
import '@awc-ui/core/define';
</script>
<div style="display: flex; align-items: stretch; block-size: 40px; gap: 16px; padding: 0 16px; background: var(--md-sys-color-surface); border-radius: 12px;">
<span style="display: flex; align-items: center;">Draft</span>
<md-divider vertical></md-divider>
<span style="display: flex; align-items: center;">Edited 2m ago</span>
<md-divider vertical inset></md-divider>
<span style="display: flex; align-items: center;">3 comments</span>
</div>In a list
Section titled “In a list”M3’s hierarchy rule in one demo: an inset rule groups rows that share the icon column, a full-bleed rule marks the boundary between sections. Note that the inset is pushed out to 56px so it lines up with the text, not with the icon.
Inset for grouping, full-bleed for sections Open in Storybook
Show code for each technology
<!-- index.html <head> — the icon font the components draw from -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap">
<!-- index.html — register the AWC UI elements once -->
<script type="module">
import '@awc-ui/core/define';
</script>
<md-list label="Mail" style="inline-size: 320px;">
<md-list-item type="button" headline="Inbox" leading-icon="inbox" trailing-supporting-text="24"></md-list-item>
<md-divider inset-start style="--md-divider-inset-start: 56px;"></md-divider>
<md-list-item type="button" headline="Sent" leading-icon="send"></md-list-item>
<md-divider></md-divider>
<md-list-item type="button" headline="Settings" leading-icon="settings"></md-list-item>
</md-list>// Icons need the Material Symbols stylesheet in index.html — see Installation.
import { MdDivider, MdList, MdListItem } from '@awc-ui/react';
export function Demo() {
return (
<>
<MdList label="Mail" style={{ inlineSize: '320px' }}>
<MdListItem type="button" headline="Inbox" leadingIcon="inbox" trailingSupportingText="24"></MdListItem>
<MdDivider insetStart style={{ '--md-divider-inset-start': '56px' }}></MdDivider>
<MdListItem type="button" headline="Sent" leadingIcon="send"></MdListItem>
<MdDivider></MdDivider>
<MdListItem type="button" headline="Settings" leadingIcon="settings"></MdListItem>
</MdList>
</>
);
}// Icons need the Material Symbols stylesheet in index.html — see Installation.
// app.module.ts — register the AWC UI elements once
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { AwcUiModule } from '@awc-ui/angular';
@NgModule({
imports: [AwcUiModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}
<!-- app.component.html -->
<md-list label="Mail" style="inline-size: 320px;">
<md-list-item type="button" headline="Inbox" leading-icon="inbox" trailing-supporting-text="24"></md-list-item>
<md-divider inset-start style="--md-divider-inset-start: 56px;"></md-divider>
<md-list-item type="button" headline="Sent" leading-icon="send"></md-list-item>
<md-divider></md-divider>
<md-list-item type="button" headline="Settings" leading-icon="settings"></md-list-item>
</md-list><script setup>
// Icons need the Material Symbols stylesheet in index.html — see Installation.
import '@awc-ui/core/define';
</script>
<template>
<md-list label="Mail" style="inline-size: 320px;">
<md-list-item type="button" headline="Inbox" leading-icon="inbox" trailing-supporting-text="24"></md-list-item>
<md-divider inset-start style="--md-divider-inset-start: 56px;"></md-divider>
<md-list-item type="button" headline="Sent" leading-icon="send"></md-list-item>
<md-divider></md-divider>
<md-list-item type="button" headline="Settings" leading-icon="settings"></md-list-item>
</md-list>
</template><script>
// Icons need the Material Symbols stylesheet in index.html — see Installation.
import '@awc-ui/core/define';
</script>
<md-list label="Mail" style="inline-size: 320px;">
<md-list-item type="button" headline="Inbox" leading-icon="inbox" trailing-supporting-text="24"></md-list-item>
<md-divider inset-start style="--md-divider-inset-start: 56px;"></md-divider>
<md-list-item type="button" headline="Sent" leading-icon="send"></md-list-item>
<md-divider></md-divider>
<md-list-item type="button" headline="Settings" leading-icon="settings"></md-list-item>
</md-list>API Reference
Section titled “API Reference”Properties
| Property | Attribute | Type | Default | Reflects |
|---|---|---|---|---|
inset | inset | boolean | false | Yes |
insetStart | inset-start | boolean | false | Yes |
insetEnd | inset-end | boolean | false | Yes |
vertical | vertical | boolean | false | Yes |
CSS Custom Properties
Override on the host element for per-instance theming:
| Property | Description |
|---|---|
--md-divider-color | Divider line color |
--md-divider-thickness | Line thickness (default 1px) |
--md-divider-inset-start | Start-side inset margin |
--md-divider-inset-end | End-side inset margin |
CSS Shadow Parts
Style internal elements through shadow DOM with ::part():
| Part | Description |
|---|---|
divider | The divider element itself (host) |
Accessibility
Section titled “Accessibility”- A purely decorative rule needs no role. It stays invisible to assistive tech, which is the correct outcome.
- Where the rule conveys a real structural boundary — between groups in a
menu, say — add
role="separator"on the host so the grouping is perceivable. Don’t add it to every rule; that turns a visual nicety into screen-reader noise. - Never let a divider be the only signal of grouping. Headings and
aria-labelled groups carry that meaning properly.
RTL, density & i18n
Section titled “RTL, density & i18n”RTL — inset-start / inset-end are logical, so they follow the document
direction automatically. See RTL.
The same inset-start in both directions Open in Storybook
LTR — inset-start
RTL — the same inset-start, mirrored
Show code for each technology
<!-- index.html — register the AWC UI elements once -->
<script type="module">
import '@awc-ui/core/define';
</script>
<div style="display: grid; gap: 20px; inline-size: 100%; max-inline-size: 360px;">
<div>
<p style="margin: 0 0 6px; font: 500 12px system-ui, sans-serif; color: var(--md-sys-color-on-surface-variant);">LTR — inset-start</p>
<div style="background: var(--md-sys-color-surface-container-low); border-radius: 12px; overflow: hidden;">
<div style="padding: 10px 16px;">Above</div>
<md-divider inset-start></md-divider>
<div style="padding: 10px 16px;">Below</div>
</div>
</div>
<div dir="rtl">
<p style="margin: 0 0 6px; font: 500 12px system-ui, sans-serif; color: var(--md-sys-color-on-surface-variant);">RTL — the same inset-start, mirrored</p>
<div style="background: var(--md-sys-color-surface-container-low); border-radius: 12px; overflow: hidden;">
<div style="padding: 10px 16px;">فوق</div>
<md-divider inset-start></md-divider>
<div style="padding: 10px 16px;">تحت</div>
</div>
</div>
</div>import { MdDivider } from '@awc-ui/react';
export function Demo() {
return (
<>
<div style={{ display: 'grid', gap: '20px', inlineSize: '100%', maxInlineSize: '360px' }}>
<div>
<p style={{ margin: '0 0 6px', font: '500 12px system-ui, sans-serif', color: 'var(--md-sys-color-on-surface-variant)' }}>LTR — inset-start</p>
<div style={{ background: 'var(--md-sys-color-surface-container-low)', borderRadius: '12px', overflow: 'hidden' }}>
<div style={{ padding: '10px 16px' }}>Above</div>
<MdDivider inset-start></MdDivider>
<div style={{ padding: '10px 16px' }}>Below</div>
</div>
</div>
<div dir="rtl">
<p style={{ margin: '0 0 6px', font: '500 12px system-ui, sans-serif', color: 'var(--md-sys-color-on-surface-variant)' }}>RTL — the same inset-start, mirrored</p>
<div style={{ background: 'var(--md-sys-color-surface-container-low)', borderRadius: '12px', overflow: 'hidden' }}>
<div style={{ padding: '10px 16px' }}>فوق</div>
<MdDivider inset-start></MdDivider>
<div style={{ padding: '10px 16px' }}>تحت</div>
</div>
</div>
</div>
</>
);
}// app.module.ts — register the AWC UI elements once
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { AwcUiModule } from '@awc-ui/angular';
@NgModule({
imports: [AwcUiModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}
<!-- app.component.html -->
<div style="display: grid; gap: 20px; inline-size: 100%; max-inline-size: 360px;">
<div>
<p style="margin: 0 0 6px; font: 500 12px system-ui, sans-serif; color: var(--md-sys-color-on-surface-variant);">LTR — inset-start</p>
<div style="background: var(--md-sys-color-surface-container-low); border-radius: 12px; overflow: hidden;">
<div style="padding: 10px 16px;">Above</div>
<md-divider inset-start></md-divider>
<div style="padding: 10px 16px;">Below</div>
</div>
</div>
<div dir="rtl">
<p style="margin: 0 0 6px; font: 500 12px system-ui, sans-serif; color: var(--md-sys-color-on-surface-variant);">RTL — the same inset-start, mirrored</p>
<div style="background: var(--md-sys-color-surface-container-low); border-radius: 12px; overflow: hidden;">
<div style="padding: 10px 16px;">فوق</div>
<md-divider inset-start></md-divider>
<div style="padding: 10px 16px;">تحت</div>
</div>
</div>
</div><script setup>
import '@awc-ui/core/define';
</script>
<template>
<div style="display: grid; gap: 20px; inline-size: 100%; max-inline-size: 360px;">
<div>
<p style="margin: 0 0 6px; font: 500 12px system-ui, sans-serif; color: var(--md-sys-color-on-surface-variant);">LTR — inset-start</p>
<div style="background: var(--md-sys-color-surface-container-low); border-radius: 12px; overflow: hidden;">
<div style="padding: 10px 16px;">Above</div>
<md-divider inset-start></md-divider>
<div style="padding: 10px 16px;">Below</div>
</div>
</div>
<div dir="rtl">
<p style="margin: 0 0 6px; font: 500 12px system-ui, sans-serif; color: var(--md-sys-color-on-surface-variant);">RTL — the same inset-start, mirrored</p>
<div style="background: var(--md-sys-color-surface-container-low); border-radius: 12px; overflow: hidden;">
<div style="padding: 10px 16px;">فوق</div>
<md-divider inset-start></md-divider>
<div style="padding: 10px 16px;">تحت</div>
</div>
</div>
</div>
</template><script>
import '@awc-ui/core/define';
</script>
<div style="display: grid; gap: 20px; inline-size: 100%; max-inline-size: 360px;">
<div>
<p style="margin: 0 0 6px; font: 500 12px system-ui, sans-serif; color: var(--md-sys-color-on-surface-variant);">LTR — inset-start</p>
<div style="background: var(--md-sys-color-surface-container-low); border-radius: 12px; overflow: hidden;">
<div style="padding: 10px 16px;">Above</div>
<md-divider inset-start></md-divider>
<div style="padding: 10px 16px;">Below</div>
</div>
</div>
<div dir="rtl">
<p style="margin: 0 0 6px; font: 500 12px system-ui, sans-serif; color: var(--md-sys-color-on-surface-variant);">RTL — the same inset-start, mirrored</p>
<div style="background: var(--md-sys-color-surface-container-low); border-radius: 12px; overflow: hidden;">
<div style="padding: 10px 16px;">فوق</div>
<md-divider inset-start></md-divider>
<div style="padding: 10px 16px;">تحت</div>
</div>
</div>
</div>Density — no density prop. Adjust --md-divider-thickness and the inset
properties directly.
i18n — the component renders no text, so there is nothing to translate. Inset distances may still need revisiting if a translated icon column changes width. The responsiveness story covers narrow containers, where a 16px inset eats a larger share of the row.
Theming
Section titled “Theming”| Custom property | Purpose | Default |
|---|---|---|
--md-divider-color | Line colour | outline-variant |
--md-divider-thickness | Line thickness | 1px |
--md-divider-inset-start | Leading inset distance | 16px |
--md-divider-inset-end | Trailing inset distance | 16px |
Themed instances Open in Storybook
Show code for each technology
<!-- index.html — register the AWC UI elements once -->
<script type="module">
import '@awc-ui/core/define';
</script>
<div style="inline-size: 320px; background: var(--md-sys-color-surface); border-radius: 12px; overflow: hidden;">
<div style="padding: 12px 16px;">Default rule</div>
<md-divider></md-divider>
<div style="padding: 12px 16px;">Thicker, primary-tinted</div>
<md-divider style="--md-divider-thickness: 3px; --md-divider-color: var(--md-sys-color-primary);"></md-divider>
<div style="padding: 12px 16px;">Last row</div>
</div>import { MdDivider } from '@awc-ui/react';
export function Demo() {
return (
<>
<div style={{ inlineSize: '320px', background: 'var(--md-sys-color-surface)', borderRadius: '12px', overflow: 'hidden' }}>
<div style={{ padding: '12px 16px' }}>Default rule</div>
<MdDivider></MdDivider>
<div style={{ padding: '12px 16px' }}>Thicker, primary-tinted</div>
<MdDivider style={{ '--md-divider-thickness': '3px', '--md-divider-color': 'var(--md-sys-color-primary)' }}></MdDivider>
<div style={{ padding: '12px 16px' }}>Last row</div>
</div>
</>
);
}// app.module.ts — register the AWC UI elements once
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { AwcUiModule } from '@awc-ui/angular';
@NgModule({
imports: [AwcUiModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}
<!-- app.component.html -->
<div style="inline-size: 320px; background: var(--md-sys-color-surface); border-radius: 12px; overflow: hidden;">
<div style="padding: 12px 16px;">Default rule</div>
<md-divider></md-divider>
<div style="padding: 12px 16px;">Thicker, primary-tinted</div>
<md-divider style="--md-divider-thickness: 3px; --md-divider-color: var(--md-sys-color-primary);"></md-divider>
<div style="padding: 12px 16px;">Last row</div>
</div><script setup>
import '@awc-ui/core/define';
</script>
<template>
<div style="inline-size: 320px; background: var(--md-sys-color-surface); border-radius: 12px; overflow: hidden;">
<div style="padding: 12px 16px;">Default rule</div>
<md-divider></md-divider>
<div style="padding: 12px 16px;">Thicker, primary-tinted</div>
<md-divider style="--md-divider-thickness: 3px; --md-divider-color: var(--md-sys-color-primary);"></md-divider>
<div style="padding: 12px 16px;">Last row</div>
</div>
</template><script>
import '@awc-ui/core/define';
</script>
<div style="inline-size: 320px; background: var(--md-sys-color-surface); border-radius: 12px; overflow: hidden;">
<div style="padding: 12px 16px;">Default rule</div>
<md-divider></md-divider>
<div style="padding: 12px 16px;">Thicker, primary-tinted</div>
<md-divider style="--md-divider-thickness: 3px; --md-divider-color: var(--md-sys-color-primary);"></md-divider>
<div style="padding: 12px 16px;">Last row</div>
</div>A divider is one of the few components where the dark theme genuinely changes
the design decision, not just the colour: outline-variant sits much closer to
the surface on dark, so a rule that reads as a firm separator on light can all
but vanish. See the
dark-theme story.
CSS part — divider.
md-divider::part(divider) { opacity: 0.6;}Related
Section titled “Related”md-list ·
md-list-item ·
md-card ·
md-menu ·
md-menu-item-group ·
md-toolbar
AI / LLM Context
Section titled “AI / LLM Context”
For AI Agents — md-divider
Two artefacts to give your AI agent so it generates correct UI with this component. The per-component spec answers "how do I use this exact tag?". The main-llm spec answers "which tag should I pick in the first place?".
AWC UI Operator's Manual
System-prompt preamble · decision matrix · token reference · page recipes · anti-patterns. Paste into the system prompt at the start of a piece of work.