D.School Component Library

Detail: Detail 4 

<p class="o-detail o-detail--4">
      This is a detail-4 text example
  </p>
 
{% set base_class = detail.base_class|default('o-detail') %}
{% if detail %}
  <p class="{{ bem(base_class, detail.element, detail.modifiers, detail.extra) }}">
    {{ detail.text }}
  </p>
{% endif %}
 
{
  "detail": {
    "text": "This is a detail-4 text example",
    "modifiers": [
      "4"
    ]
  }
}
  • Content: 
    /* ------------------------------------ *\
  $DETAIL
\* ------------------------------------ */

.o-detail {
  @include o-typography-body--ui-detail-1();
  margin-top: var(--ds-space-sm);
}

// D.School detail styles (matching Typography spec/examples in Figma)

.o-detail--1 {
  @include o-typography-body--ui-detail-1();
}

.o-detail--2 {
  @include o-typography-body--ui-detail-2();
  text-transform: uppercase;
}

.o-detail--3 {
  @include o-typography-body--ui-detail-3();
}

.o-detail--4 {
  @include o-typography-body--ui-detail-4();
  text-transform: uppercase;
} 

.o-detail--5 {
  @include o-typography-body--ui-detail-5();
  text-transform: uppercase;
} 

.o-detail--6 {
  @include o-typography-body--ui-detail-6();
} 

.o-detail--7 {
  @include o-typography-body--ui-detail-7();
  text-transform: uppercase;
}
  • URL: /components/raw/detail/_detail.scss
  • Filesystem Path: components/01-atoms/text/detail/_detail.scss
  • Size: 823 Bytes

No notes defined.