Closed alexcarol closed 3 days ago
Migrated from: https://github.com/aemsites/esri/issues/32
Implement Esri's text pairing pattern.
Current implementation uses the following classes: .esri-text .esri-text-container, .esri-text__iconContainer, .esri-text__category, .esri-text__title, .esri-text__subtitle, .esri-text__description
.esri-text
.esri-text-container
.esri-text__iconContainer
.esri-text__category
.esri-text__title
.esri-text__subtitle
.esri-text__description
/* works with text-pairings.css */ /* Default size +4 */ :root { --category-size: var(--font--2); --title-size: var(--font-4); --subtitle-size: var(--font-2); --description-size: var(--font-0); --content-spacing: var(--space-2); --content-end-spacing: var(--space-6); } .esri-text-container { max-width: 80ch; word-break: break-word; margin-bottom: var(--content-spacing); } :is(.text-center, .centered-text, .hbgv2-text--centered) .esri-text-container { margin-inline: auto; } .esri-text__iconContainer { margin-block-end: var(--content-spacing); } .esri-text__iconContainer :where(svg, .icon-ui-svg, .icons-ui-svg, .svg) { inline-size: 48px; block-size: 48px; } .esri-text__iconContainer :where(img) { block-size: 48px; inline-size: auto; } .esri-text__category { font-weight: var(--calcite-font-weight-bold); text-transform: uppercase; color: var(--calcite-ui-text-2); font-size: var(--category-size); margin-block-end: var(--content-spacing); } .esri-text__title { color: var(--calcite-ui-text-1); font-size: var(--title-size); margin-block-end: var(--content-spacing); } .esri-text__subtitle { color: var(--calcite-ui-text-2); font-size: var(--subtitle-size); margin-block-end: var(--content-spacing); } .esri-text__description { color: var(--calcite-ui-text-1); font-size: var(--description-size); margin-block-end: var(--content-end-spacing); } html[dir="rtl"] .esri-text__description p[dir=ltr] { display: table; }
/* Size 0-4 = cards only, see card-pairings.css */ /* Size 3-8 = components */ :where(.size-8) { --category-size: var(--font-0); --title-size: var(--font-8); --subtitle-size: var(--font-4); --description-size: var(--font-2); --content-spacing: var(--space-3); --content-end-spacing: var(--space-10); } :where(.size-7) { --category-size: var(--font--1); --title-size: var(--font-7); --subtitle-size: var(--font-4); --description-size: var(--font-2); } :where(.size-6) { --category-size: var(--font--1); --title-size: var(--font-6); --subtitle-size: var(--font-3); --description-size: var(--font-2); } :where(.size-5) { --category-size: var(--font--1); --title-size: var(--font-5); --subtitle-size: var(--font-3); --description-size: var(--font-1); } :where(.size-7, .size-6, .size-5) { --content-spacing: var(--space-2); --content-end-spacing: var(--space-8); } :where(.size-4) { --category-size: var(--font--2); --title-size: var(--font-4); --subtitle-size: var(--font-2); --description-size: var(--font-0); } :where(.size-3) { --category-size: var(--font--2); --title-size: var(--font-3); --subtitle-size: var(--font-1); --description-size: var(--font-0); } :where(.size-4, .size-3) { --content-spacing: var(--space-2); --content-end-spacing: var(--space-6); } :where(.size-2) { --category-size: var(--font--2); --title-size: var(--font-2); --subtitle-size: var(--font--1); --description-size: var(--font--1); } :where(.size-1) { --category-size: var(--font--2); --title-size: var(--font-1); --subtitle-size: var(--font--1); --description-size: var(--font--1); } :where(.size-0) { --category-size: var(--font--3); --title-size: var(--font-0); --subtitle-size: var(--font--2); --description-size: var(--font--1); } :where(.size-2, .size-1, .size-0) { --content-spacing: var(--space-2); --content-end-spacing: var(--space-5); } /* Icon size */ :where(.size-6, .size-7, .size-8) .esri-text__iconContainer :is(img, svg, .icon-ui-svg, .icons-ui-svg) { inline-size: 64px; block-size: 64px; }
Migrated from: https://github.com/aemsites/esri/issues/32
Implement Esri's text pairing pattern.
Current implementation uses the following classes:
.esri-text
.esri-text-container
,.esri-text__iconContainer
,.esri-text__category
,.esri-text__title
,.esri-text__subtitle
,.esri-text__description
Text pairings