University of Leeds Design System v1.0.16

Content Block

No notes defined.

<div {% if id %}id="{{ id }}"{% endif %} class="uol-content-block">
  
  {% if topic %}<p class="uol-content-block__topic">{{topic}}</p>{% endif %}
  
  {% set headingTag = 'h' + heading.level if heading.level else 'h3' %}
  <{{headingTag}} class="uol-content-block__heading">{{heading.title}}</{{ headingTag }}>
  
  {% if date %}<p class="uol-content-block__date">{{date}}</p>{% endif %}
  
  {% if copy %}<p class="uol-content-block__copy">{{copy}}</p>{% endif %}
  
  {% if link %}<p><a href="{{link.url}}" class="uol-content-block__link">{{link.title}}</a></p>{% endif %}
  
  {% if arrowLink %}<p><a href="{{arrowLink.url}}" class="uol-content-block__arrow-link uol-arrow-link">{{arrowLink.title}}</a></p>{% endif %}
  
  {% if button %}{% render '@uol-button', button %}{% endif %}
 </div>
 
<div class="uol-content-block">

    <h2 class="uol-content-block__heading">Mandatory title</h2>

</div>
  • Content: 
    .uol-content-block {
  * {
    margin: 0 0 $spacing-4;
  }
  
  h1 {@extend .uol-typography-heading-1;}
  
  h2 {@extend .uol-typography-heading-2;}

  h3 {@extend .uol-typography-heading-3;}

  h4 {@extend .uol-typography-heading-4;}

  &__topic {   
    @extend .uol-typography-paragraph-small;
    margin-bottom: $spacing-2;
  }

  &__date {   
    @extend .uol-typography-paragraph-small;
  }

  &__copy {   
    @extend .uol-typography-paragraph;
  }

  &__link {   
    @extend .uol-typography-paragraph;

    display: block;
  }

  &__arrow-link {   
    @extend .uol-typography-paragraph;

    display: block;
  }

  .uol-button {
    margin-top: $spacing-2;
  }

}
  • URL: /components/raw/uol-content-block/_content-block.scss
  • Filesystem Path: src/library/02-components/content-block/_content-block.scss
  • Size: 673 Bytes 
{
  "heading": {
    "level": "2",
    "title": "Mandatory title"
  }
}