University of Leeds Design System v1.0.20

Ds 2 Home

No notes defined.

<div class="ds2Template">  
  {% render '@ds2-wireframe', primary %}

  <div class="ds2TopHero">
    {% render '@ds2-hero-banner', banner %}
  </div>

  {% render '@ds2-wireframe', secondary %}

  <div class="ds2MainContent">
    {% for item in main_content %}
      
      {# temp wireframe #}
      {% if item.wireframe %}
        {% if item.wireframe.width == "max" %}
          <div class="ds2FullWidth">
            {% render '@ds2-wireframe', item.wireframe %}
          </div>
        {% endif %}
        {% if item.wireframe.width == "edge" %}
          <div class="ds2Edge">
            {% render '@ds2-wireframe', item.wireframe %}
          </div>
        {% endif %}
      {% endif %}

      {# banner #}
      {% if item.banner %}
        <div class="ds2Edge">
          {% render '@ds2-hero-banner', item.banner %}
        </div>
      {% endif %}

      {% if item.facts %}
        <div class="ds2FullWidth">
          {% render '@uol-facts-figures-v2' %}
        </div>
      {% endif %}

      {% if item.video %}
        <div class="ds2FullWidth">
          {% render '@uol-widget-featured-content--with-video-highlighted' %}
        </div>
      {% endif %}

      {% if item.student_stories %}
        <div class="ds2FullWidth">
          {% render '@student-stories' %}
        </div>
      {% endif %}

      {% if item.image_quote %}
        <div class="ds2FullWidth">
          {% render '@uol-image-quote', image_quote %}
        </div>
      {% endif %}

      {% if item.research_cards %}
        <div class="ds2FullWidth">
          {% render '@cards-horizontal-scrolling', research_cards %}
        </div>
      {% endif %}
    
    {% endfor %}
  </div>	


  <div class="ds2Footer">
    <div class="ds2MaxWidth">
      DS2 footer
    </div>
  </div>
</div>
 
<div class="ds2Template">
    <div class="ds2Skeleton" style="height: px ">
        <p class="ds2SkeletonText">Wireframe component text</p>
    </div>

    <div class="ds2TopHero">
        <div class="ds2BannerOverlay ds2Hero ds2BannerColour ">

            <div class="ds2HeroSingle" style='background-image: linear-gradient(rgba(0, 0, 0,0.5), rgba(0, 0, 0, 0.5)), url("/placeholders/ds2/heroFullWidth/Web-DSC03468.jpg"); width: 100%'></div>

            <div class="ds2HeroContent">
                <div class="ds2ContentBlock">

                    <h2>Compulsory title</h2>

                </div>

            </div>

        </div>
    </div>

    <div class="ds2Skeleton" style="height: px ">
        <p class="ds2SkeletonText">Wireframe component text</p>
    </div>

    <div class="ds2MainContent">

    </div>

    <div class="ds2Footer">
        <div class="ds2MaxWidth">
            DS2 footer
        </div>
    </div>
</div>
  • Content: 
    .ds2Template {
  // To 1440px width
  .ds2FullWidth {  
    width: calc(100% - 48px);
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px;
  }

  // To edge of browser window
  .ds2Edge {  
    width: 100%;
    margin: 0 auto;
    padding: 0;
  }
}
  • URL: /components/raw/ds2-template-homepage/_ds2-home.scss
  • Filesystem Path: src/library/04-templates/ds2-home/_ds2-home.scss
  • Size: 257 Bytes 
{
  "page_title": "University of Leeds | Home"
}