University of Leeds Design System v1.0.15

Residence Details Page

Accommodation residence detail page pattern

Page content

The residence detail page shows information about a specific residence. This includes the following:

  • Standard header
  • Crumbtrail path
  • Prominent visual banner with title, image and summary line
  • Year of entry label
  • Apply button
  • Key facts
  • Section navigation (when more than one page)
  • Related content blocks (optional)
  • Main article content containing:
    • Title (must have)
    • Text content (optional)
    • In text calls to action (CTA) (optional)
    • Blockquote (optional)
    • Gallery (optional)
    • Map (optional)
    • Previous/next page navigation (when section navigation is present)
  • Cards (optional)

Config

The above is built using config like the below example. Note some data ommitted (eg. standard header, footer, article content, key facts detail) for readability.

'context': {
    'breadcrumbs': [
      {
        'title': 'Our residences',
        'href': '/'
      }
    ],
    'hero_banner': {
      'heading_level': 'h1',
      'title': 'Clarence Dock Village',
      'lead': 'Modern city centre living',
      'img': {
        'src': '/placeholders/banner/Liberty_Dock_Banner.jpg',
        'alt': 'Liberty_Dock image'
      }
    },
    'year_of_entry': {
      'label': 'Available for',
      'year': 'September 2023',
    },
    'links': [
      {
        "type": "link button",
        "content": "Apply now",
        "url": "/url",
        "style": "primary"
      },
    ],
    'facts': [
      {
        'term': 'Rooms',
        'data': [
          {
            'content': '488'
          }
        ]
      },
    ],
    'detail_nav': {
      'heading': {
        'intro': 'In this section',
        'text': 'Clarence Dock Village'
      },
      'links': [
        {
          'id': 'residence_details',
          'title': 'Residence details',
          'url': '#',
          'current': true
        }
      ],
    },
    'related_content': {
      'title': 'Related content',
      'items': [
        {
          'heading': {
            'text': 'Campus Life',
            'url': '/related'
          },
          'content': 'Explore our academic facilities, social spaces and campus landmarks.'
        },
        {
          'heading': {
            'text': 'Admissions Enquiries',
          },
          'links': [
            {
              'type': 'phone',
              'label': '+44 (0)113 3433213',
              'url': '+441133433212'
            },
            {
              'type': 'email',
              'label': 'Study@leeds.ac.uk',
              'url': 'study@leeds.ac.uk'
            }
          ]
        }
      ],
    },
    'articles': [
      {
        'id': 'overview',
        'style_lead': true,
        'content':
          `

          `
      }
    ],
    'all_page_nav': [
      {
        'id': 'content',
        'page_nav': [
          {
            'item_type': 'page',
            'nav_type': 'next',
            'url': '#security',
            'title': 'Safety and security',
          }
        ]
      },
    ],
    'widgets': [
      {
        'type': 'cards',
        'title': 'You may also like',
        'cards': {
          'image_layout': true,       
          'items': [
            {
              'image': {
                'src': '/placeholders/cards/sample-1.png',
                'alt': 'A super informative description'
              },
              'url': '#',
              'title': 'Sentinel Towers',
              'text': 'Modern accommodation in the west of the city'
            },
          ]
        }
      },
    ],
  }
}

{% extends '@uol-template-course'%}

{% block page_content %}

<section class="uol-course__content__section" id="section-{{ article.id }}">
  {% render '@uol-article-content', { article: article } %}
</section>

{% endblock %}
 
<div class="uol-header">
    <header class="uol-global-masthead-outer uol-global-masthead-outer--with-local-navigation">
        <div class="uol-global-masthead uol-content-container">
            <div class="uol-global-masthead__inner">
                <a class="uol-skip-link" href="#main">Skip to main content</a>
                <a class="uol-global-masthead__home" href="https://leeds.ac.uk">
                    <svg class="uol-logo-uol-inline" width="286px" height="40px" viewBox="0 0 286 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" aria-hidden="true">
                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <g class="uol-logo-uol-inline__img" transform="translate(-32.000000, -12.000000)" fill="#000000">
                                <g transform="translate(32.000000, 12.000000)">
                                    <path d="M29.5,13.85 L30.04,13.85 L30.04,13.38 L29.12,13.38 L29.12,14.85 L29.42,14.85 L29.5,13.85 Z M27.89,13.85 L28.43,13.85 L28.43,13.38 L27.62,13.38 L27.62,14.85 L28,14.85 L28,13.85 L27.89,13.85 Z M0,0 L0,40 L20.77,40 L20.77,28 L24.29,28 L24.29,40 L24.75,40 L24.75,26.85 L31.19,26.85 L31.19,40 L31.62,40 L31.62,28 L35.22,28 L35.22,40 L39.97,40 L39.97,0 L0,0 Z M28,6.81 L31.49,9 L24.49,9 L28,6.81 Z M24.44,9.36 L31.62,9.36 L31.95,12 L24.06,12 L24.44,9.36 Z M34.44,27.54 L31.72,27.54 L31.72,26.38 L24.37,26.38 L24.37,27.54 L21.62,27.54 L21.62,25.07 L22.08,25.07 L22.08,16.71 L22.84,16.71 L22.84,12.38 L33.18,12.38 L33.18,16.71 L33.95,16.71 L33.95,25 L34.41,25 L34.44,27.54 Z M29.69,25.07 L30.3,25.07 L30.3,19.57 L31.62,19.57 L31.62,18.57 L29.73,18.57 L29.69,25.07 Z M23.69,17.64 L32.2,17.64 L32.62,17.1 L23.37,17.1 L23.69,17.64 Z M26.99,25.07 L27.62,25.07 L27.62,19.57 L28.92,19.57 L28.92,18.57 L26.97,18.57 L26.99,25.07 Z M26.22,13.85 L26.76,13.85 L26.76,13.38 L25.92,13.38 L25.92,14.85 L26.22,14.85 L26.22,13.85 Z M24.37,25.07 L24.98,25.07 L24.98,19.57 L26.28,19.57 L26.28,18.57 L24.37,18.57 L24.37,25.07 Z M28.05,28.55 C27.2950895,28.5378224 26.6077131,28.9831944 26.3103442,29.6771757 C26.0129753,30.3711569 26.1646185,31.1760463 26.6941324,31.7142407 C27.2236463,32.2524352 28.0259637,32.4171451 28.7246881,32.131099 C29.4234126,31.8450529 29.8799018,31.1650087 29.88,30.41 C29.874812,29.3965391 29.0632426,28.5716653 28.05,28.55 L28.05,28.55 Z M28.05,31.8 C27.4802734,31.8121976 26.9600047,31.4778532 26.73441,30.954552 C26.5088152,30.4312508 26.6229172,29.8234297 27.0229366,29.4175706 C27.422956,29.0117115 28.0290597,28.888813 28.5555753,29.1068004 C29.0820908,29.3247877 29.4239399,29.8401565 29.42,30.41 L29.42,30.41 C29.4226618,30.7760016 29.279816,31.1280692 29.0228891,31.3887468 C28.7659622,31.6494245 28.4160018,31.7973574 28.05,31.8 Z" fill-rule="nonzero"></path>
                                    <path d="M67.74,21.56 L67.74,12.11 L64.52,12.11 L64.52,21.78 C64.5729285,22.6519371 64.2821511,23.5099099 63.71,24.17 C62.2015798,25.4907365 59.9484202,25.4907365 58.44,24.17 C57.8375091,23.4681634 57.5230989,22.5642339 57.56,21.64 L57.56,12.11 L54.36,12.11 L54.36,21.9 C54.2611083,23.4971923 54.8130316,25.066386 55.89,26.25 C57.3080282,27.4384118 59.1354122,28.0236055 60.98,27.88 C62.8798784,28.0022464 64.7494205,27.3574525 66.17,26.09 C67.2665719,24.8598816 67.8310989,23.2454064 67.74,21.6 L67.74,21.56 Z" fill-rule="nonzero"></path>
                                    <path d="M86.32,27.75 L86.32,12.25 L83.12,12.25 L83.12,20.16 C83.12,20.82 83.12,21.79 83.12,22.61 L83.12,22.61 C82.6700679,21.9172776 82.1826769,21.2496187 81.66,20.61 L75.13,12.28 L71.86,12.28 L71.86,27.78 L75.08,27.78 L75.08,19.26 C75.08,18.56 75.08,17.63 75.02,17.1 L75.08,17.1 C75.53,17.78 75.97,18.38 76.56,19.1 L83.3,27.71 L86.32,27.75 Z"></path>
                                    <polygon fill-rule="nonzero" points="93.91 27.75 93.91 12.24 90.67 12.24 90.67 27.75 93.91 27.75"></polygon>
                                    <path d="M111.16,12.19 L107.89,12.19 L104.39,20.53 C103.973063,21.4323296 103.615632,22.3609812 103.32,23.31 L103.32,23.31 C103,22.44 102.65,21.45 102.25,20.44 L99.08,12.19 L95.54,12.19 L101.91,27.81 L104.31,27.81 L111.16,12.19 Z" fill-rule="nonzero"></path>
                                    <polygon fill-rule="nonzero" points="121.99 27.75 121.99 25.11 116.24 25.11 116.24 21.15 121.18 21.15 121.18 18.5 116.24 18.5 116.24 14.88 121.16 14.88 122.02 12.24 113.02 12.24 113.02 27.75 121.99 27.75"></polygon>
                                    <path d="M137.49,27.75 C135.14,23.8 133.65,21.22 132.86,20.75 L132.86,20.75 C134.52497,20.1129167 135.639353,18.532231 135.68,16.75 C135.68,14.36 134.19,12.27 130.05,12.27 L125.52,12.27 L125.52,27.75 L128.78,27.75 L128.78,21.75 L129.92,21.75 C130.49,21.97 131.43,23.75 133.78,27.75 L137.49,27.75 Z M132.49,17.03 C132.512387,18.2982154 131.50799,19.3472518 130.24,19.38 L128.75,19.38 L128.75,14.92 L130.11,14.92 C130.7095,14.8426398 131.31339,15.0261093 131.768537,15.4238853 C132.223685,15.8216613 132.486376,16.39554 132.49,17 L132.49,17.03 Z"></path>
                                    <path d="M148.78,23.39 C148.78,18.49 142.11,18.76 142.11,16.04 C142.11,15.15 143,14.63 144.11,14.63 C145.425193,14.6783583 146.704585,15.071487 147.82,15.77 L147.82,12.98 C146.617964,12.3388574 145.27211,12.0153018 143.91,12.04 C140.49,12.04 138.63,14.1 138.63,16.47 C138.606448,17.4826835 138.96324,18.4674294 139.63,19.23 C141.53,21.37 145.29,21.72 145.29,23.78 C145.29,24.95 144.03,25.37 142.84,25.37 C141.564416,25.3277619 140.3296,24.9103591 139.29,24.17 L138.04,26.5 C139.513506,27.5085649 141.264687,28.0328708 143.05,28 C146.24,28 148.76,26.24 148.76,23.4 L148.78,23.39 Z" fill-rule="nonzero"></path>
                                    <polygon fill-rule="nonzero" points="154.63 27.75 154.63 12.24 151.4 12.24 151.4 27.75 154.63 27.75"></polygon>
                                    <polygon fill-rule="nonzero" points="169.59 12.24 156.9 12.24 156.9 14.88 161.44 14.88 161.44 27.75 164.7 27.75 164.7 14.88 168.86 14.88 169.59 12.24"></polygon>
                                    <path d="M183.77,12.25 L180.4,12.25 L178.03,16.62 C177.68,17.27 177.21,18.11 176.91,18.81 L176.91,18.81 C176.59,18.11 176.1,17.23 175.77,16.58 L173.36,12.25 L169.81,12.25 L175.18,21.62 L175.18,27.75 L178.38,27.75 L178.38,21.66 L183.77,12.25 Z" fill-rule="nonzero"></path>
                                    <path d="M206.12,20 C206.245834,18.0205657 205.578218,16.0725084 204.264697,14.5863532 C202.951177,13.1001981 201.099898,12.198307 199.12,12.08 L199.12,12.08 C198.786933,12.0611526 198.453067,12.0611526 198.12,12.08 C195.961198,12.0257615 193.874951,12.8609834 192.35,14.39 C190.865298,15.950778 190.059803,18.0364334 190.11,20.19 C190.031444,22.4287273 190.92044,24.5929231 192.55,26.13 C195.937737,28.8012328 200.76331,28.6190558 203.94,25.7 C205.369447,24.1531499 206.131218,22.1049922 206.06,20 L206.12,20 Z M202.7,20.07 C202.7,23.47 200.7,25.41 198.1,25.41 C195.5,25.41 193.46,23.47 193.46,20.07 C193.46,16.67 195.38,14.72 198.07,14.72 C200.76,14.72 202.67,16.72 202.67,20.07 L202.7,20.07 Z"></path>
                                    <polygon fill-rule="nonzero" points="218.11 12.24 209.08 12.24 209.08 27.75 212.32 27.75 212.32 21.2 217.23 21.2 217.22 18.56 212.32 18.56 212.32 14.88 217.28 14.88 218.11 12.24"></polygon>
                                    <polygon fill-rule="nonzero" points="234.6 27.73 234.6 25.07 229.16 25.07 229.16 12.27 225.95 12.27 225.95 27.73 234.6 27.73"></polygon>
                                    <polygon fill-rule="nonzero" points="245.68 27.73 245.68 25.09 239.94 25.09 239.94 21.15 244.86 21.15 244.86 18.5 239.94 18.5 239.94 14.89 244.84 14.89 245.7 12.27 236.71 12.27 236.71 27.73 245.68 27.73"></polygon>
                                    <polygon fill-rule="nonzero" points="257.43 27.73 257.43 25.09 251.69 25.09 251.69 21.15 256.62 21.15 256.62 18.5 251.69 18.5 251.69 14.89 256.59 14.89 257.43 12.27 248.46 12.27 248.46 27.73 257.43 27.73"></polygon>
                                    <path d="M273.98,19.86 C273.98,15.24 270.88,12.27 265.36,12.27 L260.21,12.27 L260.21,27.73 L265.1,27.73 C270.47,27.73 274.01,24.63 274.01,19.87 L273.98,19.86 Z M270.53,19.95 C270.53,22.66 269.03,25.07 265.2,25.07 L263.43,25.07 L263.43,14.93 L265.14,14.93 C268.69,14.93 270.53,16.91 270.53,20 L270.53,19.95 Z"></path>
                                    <path d="M285.62,23.37 C285.62,18.47 278.96,18.73 278.96,16.06 C278.96,15.16 279.85,14.64 281.01,14.64 C282.312256,14.700739 283.578073,15.0894273 284.69,15.77 L284.69,13 C283.499562,12.3319884 282.154998,11.9872284 280.79,12 C277.38,12 275.52,14.07 275.52,16.41 C275.503151,17.4215754 275.859097,18.4039867 276.52,19.17 C278.4,21.31 282.16,21.62 282.16,23.71 C282.16,24.88 280.88,25.34 279.76,25.34 C278.496079,25.2834172 277.277636,24.8517403 276.26,24.1 L275.01,26.42 C276.470725,27.3959037 278.193447,27.9050483 279.95,27.88 C283.15,27.94 285.62,26.18 285.62,23.37 Z" fill-rule="nonzero"></path>
                                </g>
                            </g>
                        </g>
                    </svg>

                    <span class="hide-accessible">University of Leeds homepage</span>
                </a>
            </div>

            <nav class="uol-quicklinks" aria-label="University links">
                <ul class="uol-quicklinks__list">

                    <li class="uol-quicklinks__group">
                        Students

                        <ul class="uol-quicklinks__group__list">

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="/mobile-app">Mobile App</a>
                            </li>

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="/minerva">Minerva</a>
                            </li>

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="/for-students">For Students</a>
                            </li>

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="https://library.leeds.ac.uk">Library</a>
                            </li>

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="/it">IT</a>
                            </li>

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="/campus-map">Campus map</a>
                            </li>

                        </ul>

                    </li>

                    <li class="uol-quicklinks__group">
                        Staff

                        <ul class="uol-quicklinks__group__list">

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="/staff/for-staff">For Staff</a>
                            </li>

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="/staff/services-a-z">Services A-Z</a>
                            </li>

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="/staff/staff-a-z">Staff A-Z</a>
                            </li>

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="/staff/faculty-a-z">Faculties A-Z</a>
                            </li>

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="/staff/student-education-service">Student Education Service</a>
                            </li>

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="/staff/hr">HR</a>
                            </li>

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="/staff/it">IT</a>
                            </li>

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="/campus-map">Campus map</a>
                            </li>

                        </ul>

                    </li>

                    <li class="uol-quicklinks__group">
                        Faculties

                        <ul class="uol-quicklinks__group__list">

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="/faculty/arts-humanities-cultures">Faculty of Arts, Humanities and Cultures</a>
                            </li>

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="/faculty/biological-sciences">Faculty of Biological Sciences</a>
                            </li>

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="/faculty/business">Faculty of Business</a>
                            </li>

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="/faculty/engineering-physical-sciences">Faculty of Engineering and Physical Sciences</a>
                            </li>

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="/faculty/environment">Faculty of Environment</a>
                            </li>

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="/faculty/medicine-health">Faculty of Medicine and Health</a>
                            </li>

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="/faculty/social-sciences">Faculty of Social Sciences</a>
                            </li>

                        </ul>

                    </li>

                </ul>
            </nav>

            <form id="uol-global-masthead__search-form" class="uol-global-masthead__search-form" action="/example-form-action">
                <label class="uol-global-masthead__search-label" for="global-masthead__search-field">Search leeds.ac.uk</label>
                <input class="uol-global-masthead__search-input" id="global-masthead__search-field" name="search-query" type="search" placeholder="Search leeds.ac.uk">
                <button class="uol-global-masthead__search-submit" type="submit">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" aria-hidden="true" focusable="false">
                        <path d="M20.67,18.67H19.61l-.37-.36a8.66,8.66,0,1,0-.93.93l.36.37v1.06l6.66,6.65,2-2Zm-8,0a6,6,0,1,1,6-6A6,6,0,0,1,12.67,18.67Z"></path>
                    </svg>
                    <span class="hide-accessible">Search all leeds.ac.uk</span>
                </button>
            </form>

        </div>

        <div class="uol-header-local-masthead">
            <div class="uol-header-local-masthead__inner">

                <a class="uol-header-local-masthead__link uol-header-local-masthead__link--title" href="/">
                    Accommodation
                    <span class="hide-accessible"> home page</span>
                </a>
            </div>
        </div>

    </header>

    <nav class="uol-header-local-navigation-wrapper uol-content-container" aria-label="Site navigation">
        <ul class="uol-header-local-navigation">

            <li class="uol-header-local-navigation__item " data-label="Home">

                <a class="uol-header-local-navigation__link" href="/">

                    Home

                </a>

            </li>

            <li class="uol-header-local-navigation__item " data-label="Our residences">

                <a class="uol-header-local-navigation__link" href="/our-residences">

                    Our residences

                </a>

            </li>

            <li class="uol-header-local-navigation__item " data-label="Prospective students">

                <a class="uol-header-local-navigation__link" href="/prospective-students">

                    Prospective students

                </a>

            </li>

            <li class="uol-header-local-navigation__item " data-label="Current residents">

                <a class="uol-header-local-navigation__link" href="/current-residents">

                    Current residents

                </a>

            </li>

            <li class="uol-header-local-navigation__item " data-label="Viewing day">

                <a class="uol-header-local-navigation__link" href="/viewing-day">

                    Viewing day

                </a>

            </li>

            <li class="uol-header-local-navigation__item " data-label="Staff accommodation">

                <a class="uol-header-local-navigation__link" href="/staff-accommodation">

                    Staff accommodation

                </a>

            </li>

            <li class="uol-header-local-navigation__item " data-label="Contact us">

                <a class="uol-header-local-navigation__link" href="/contact-us">

                    Contact us

                </a>

            </li>

        </ul>
    </nav>

</div>

<div class="uol-content-container uol-main-container uol-course-outer-template">

    <nav aria-label="Breadcrumb" class="uol-breadcrumb">
        <ol class="uol-breadcrumb__list">

            <li class="uol-breadcrumb__item">
                <a class="uol-breadcrumb__link" href="/">
                    Our residences
                </a>
            </li>

        </ol>
    </nav>

    <div class="uol-course">

        <div class="uol-col-container uol-course__header">
            <div class="uol-col-12">

                <section class="uol-hero-banner" aria-label="Hero banner">
                    <div class="uol-hero-banner--inner">
                        <div class="uol-hero-banner__text-container">
                            <h1 class="uol-hero-banner__title" aria-label="Hero banner">
                                Clarence Dock Village
                            </h1>

                            <p class="uol-hero-banner__lead">Modern city centre living</p>

                        </div>

                        <img class="uol-hero-banner__img" src="/placeholders/banner/Liberty_Dock_Banner.jpg" alt="Liberty_Dock image" loading="lazy">

                    </div>

                </section>

                <div class="uol-year-of-entry">
                    <h2 class="uol-year-of-entry__title">
                        Available for
                        <span class="uol-year-of-entry__date">September 2023</span>
                    </h2>

                </div>

                <div class="uol-link-button-container">

                    <a class="uol-button uol-link-button uol-button--primary
    " href="/url">Apply now</a>

                </div>

            </div>
        </div>

        <div class="uol-key-facts">
            <div class="uol-content-container">
                <div class="uol-col-container uol-col-container--key-facts">
                    <dl class="uol-key-facts__list">

                        <div class="uol-key-facts__group">
                            <dt class="uol-key-facts__term">Rooms</dt>

                            <dd class="uol-key-facts__data">488</dd>

                        </div>

                        <div class="uol-key-facts__group">
                            <dt class="uol-key-facts__term">Rent</dt>

                            <dd class="uol-key-facts__data">£151 per week</dd>

                        </div>

                        <div class="uol-key-facts__group">
                            <dt class="uol-key-facts__term">Self catered</dt>

                            <dd class="uol-key-facts__data">Yes. Details on <a href="/">self catering</a></dd>

                        </div>

                        <div class="uol-key-facts__group">
                            <dt class="uol-key-facts__term">En-suite</dt>

                            <dd class="uol-key-facts__data">Available</dd>

                        </div>

                        <div class="uol-key-facts__group">
                            <dt class="uol-key-facts__term">Rent inclusions</dt>

                            <dd class="uol-key-facts__data">Electricity, gas and water<br>High-speed Wi-FI<br> Off-peak sports and gym membership<br>Basic contents insurance cover</dd>

                        </div>

                    </dl>
                </div>
            </div>
        </div>

        <div id="course-content" class="uol-course-container uol-col-container uol-course__main">

            <div class="uol-side-nav-container">

                <nav class="uol-detail-nav">

                    <h2 class="uol-detail-nav__title">
                        <span class="uol-detail-nav__title__intro">In this section</span>
                        <span class="uol-detail-nav__title__text">Clarence Dock Village</span>
                    </h2>

                    <ul class="uol-detail-nav__list">

                        <li class="uol-detail-nav__list-item">

                            <a class="uol-detail-nav__list-link uol-detail-nav__active-link" href="#" aria-current="page">Residence details</a>

                        </li>

                        <li class="uol-detail-nav__list-item">

                            <a class="uol-detail-nav__list-link " href="#">Furniture and facilities</a>

                        </li>

                        <li class="uol-detail-nav__list-item">

                            <a class="uol-detail-nav__list-link " href="#">Safety and security</a>

                        </li>

                        <li class="uol-detail-nav__list-item">

                            <a class="uol-detail-nav__list-link " href="#">Meals</a>

                        </li>

                    </ul>
                </nav>

            </div>

            <main id="main" tabindex="-1" role="main" class="uol-course__content uol-page-width uol-article uol-course__content__section-container">

                <section class="uol-course__content__section" id="section-overview">

                    <div class="uol-rich-text uol-rich-text--with-lead uol-spacing">

                        <h2>Residence details</h2>
                        <p>Run in partnership with Unite Students, Clarence Dock Village provides en suite accommodation located right on the banks of the River Aire and offers a scenic short walk to the city centre.</p>
                        <div class="uol-in-text-cta">
                            <h2 class="uol-in-text-cta__heading">
                                <a class="uol-in-text-cta__link" href="/home">Find out more about living in the city centre </a>
                            </h2>
                        </div>
                        <p>
                            This residence has individual en suite rooms with junior double beds, organised into flats that are shared between five or six students. The residence also has its own common room to relax with friends in after a long day and a gym for your regular workouts. It’s just around the corner from Leeds Dock, a popular destination packed with stylish bars, cafes, and restaurants. For your essentials you’ll also find a mini supermarket on your doorstep.
                        </p>

                        <blockquote class="uol-typography-blockquote" cite="https://designsystemfoundations.com/">
                            <p>Block quote example lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

                            <footer>
                                <cite>

                                    Joe Hunter

                                </cite>
                            </footer>

                        </blockquote>

                        <p>There are regular buses that offer connections to the University campus from close by the residence. You’re also within easy reach of all local transport links, including Leeds railway station. There are additional charges for parking and spaces are limited. Parking is for permit holders only, to apply for a permit please download and complete the application form.</p>

                        <p>Read more about what you can expect to find in your room and flat.</p>

                        <h2>Facilities</h2>
                        <ul class="in-text-icons">

                            <li class="in-text-icon uol-icon uol-icon--mdiWifi">Fast Wi-Fi</li>
                            <li class="in-text-icon uol-icon uol-icon--mdiDumbbell">On-site gym</li>
                            <li class="in-text-icon uol-icon uol-icon--mdiSofaSingleOutline">Common room</li>
                            <li class="in-text-icon uol-icon uol-icon--mdiSoccer">University sport</li>
                            <li class="in-text-icon uol-icon uol-icon--mdiParking">Parking</li>
                            <li class="in-text-icon uol-icon uol-icon--mdiGrill">Outdoor social space</li>

                        </ul>
                        <h3>Rooms</h3>
                        <ul>

                            <li>Self catered en suite: 42 week contract</li>
                            <li>Due to refurbishment or vacation lettings some blocks may open later or close earlier than others and as a result, some contracts may be slightly shorter.</li>

                        </ul>

                        <section class="uol-gallery-container" aria-label="Gallery of 6 items">
                            <div class="uol-gallery uol-gallery--count-6">
                                <div class="uol-gallery__item  uol-gallery__item--image">
                                    <h2 class="uol-gallery__item__title">Caption one</h2>
                                    <figure class="uol-gallery__figure">
                                        <div class="uol-gallery__image-container">
                                            <img src="/placeholders/campus/medium/29940.jpeg" alt="Caption one" data-src-high-quality="/placeholders/campus/full/29940.jpeg">
                                        </div>
                                        <figcaption class="uol-gallery__image-caption">Caption one</figcaption>
                                    </figure>
                                </div>
                                <div class="uol-gallery__item  uol-gallery__item--image">
                                    <h2 class="uol-gallery__item__title">Caption two</h2>
                                    <figure class="uol-gallery__figure">
                                        <div class="uol-gallery__image-container">
                                            <img src="/placeholders/campus/medium/28573.jpeg" alt="Caption two" data-src-high-quality="/placeholders/campus/full/25873.jpeg">
                                        </div>
                                        <figcaption class="uol-gallery__image-caption">Caption two</figcaption>
                                    </figure>
                                </div>
                                <div class="uol-gallery__item  uol-gallery__item--image">
                                    <h2 class="uol-gallery__item__title">Caption three</h2>
                                    <figure class="uol-gallery__figure">
                                        <div class="uol-gallery__image-container">
                                            <img src="/placeholders/campus/medium/29936.jpeg" alt="Caption three" data-src-high-quality="/placeholders/campus/full/29936.jpeg">
                                        </div>
                                        <figcaption class="uol-gallery__image-caption">Caption three</figcaption>
                                    </figure>
                                </div>
                                <div class="uol-gallery__item  uol-gallery__item--image">
                                    <h2 class="uol-gallery__item__title">Caption four</h2>
                                    <figure class="uol-gallery__figure">
                                        <div class="uol-gallery__image-container">
                                            <img src="/placeholders/campus/medium/29921.jpeg" alt="Caption four" data-src-high-quality="/placeholders/campus/full/29921.jpeg">
                                        </div>
                                        <figcaption class="uol-gallery__image-caption">Caption four</figcaption>
                                    </figure>
                                </div>
                                <div class="uol-gallery__item  uol-gallery__item--image">
                                    <h2 class="uol-gallery__item__title">Caption five</h2>
                                    <figure class="uol-gallery__figure">
                                        <div class="uol-gallery__image-container">
                                            <img src="/placeholders/campus/medium/30092.jpeg" alt="Caption five" data-src-high-quality="/placeholders/campus/full/30092.jpeg">
                                        </div>
                                        <figcaption class="uol-gallery__image-caption">Caption five</figcaption>
                                    </figure>
                                </div>
                                <div class="uol-gallery__item  uol-gallery__item--image">
                                    <h2 class="uol-gallery__item__title">Caption six</h2>
                                    <figure class="uol-gallery__figure">
                                        <div class="uol-gallery__image-container">
                                            <img src="/placeholders/campus/medium/29878.jpeg" alt="Caption six" data-src-high-quality="/placeholders/campus/full/29878.jpeg">
                                        </div>
                                        <figcaption class="uol-gallery__image-caption">Caption six</figcaption>
                                    </figure>
                                </div>

                            </div>
                        </section>

                        <h3>AccessAble</h3>

                        <p>Providing independence and choice. <a href="#">View the access guide to Clarence Dock Village</a>.</p>

                        <h3>Residence details</h3>

                        <div class="uol-accordion">
                            <h3 class="uol-accordion__title">20 Clarendon Place</h3>
                            <div class="uol-accordion__content">
                                <div class="uol-rich-text">
                                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus saepe delectus quos quibusdam. Quos ducimus, nam consectetur ipsam illo laudantium quas, dignissimos voluptate neque est eligendi, alias et facere unde. Ex minima incidunt exercitationem mollitia ratione ut ducimus culpa nam.</p>
                                </div>
                            </div>
                        </div>

                        <div class="uol-accordion">
                            <h3 class="uol-accordion__title">28 Clarendon Place</h3>
                            <div class="uol-accordion__content">
                                <div class="uol-rich-text">
                                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus saepe delectus quos quibusdam. Quos ducimus, nam consectetur ipsam illo laudantium quas, dignissimos voluptate neque est eligendi, alias et facere unde. Ex minima incidunt exercitationem mollitia ratione ut ducimus culpa nam.</p>
                                </div>
                            </div>
                        </div>

                        <h3>Location, essentials and travel</h3>

                        <p>View the text version of location, essentials and travel information.</p>

                        <iframe class="uol-iframe" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d945.9441538079813!2d-1.5536401236388144!3d53.80749174258921!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48795ea98c000001%3A0xa460454678f77e00!2sThe%20Parkinson%20Building!5e0!3m2!1sen!2suk!4v1685529471450!5m2!1sen!2suk" title="The Parkinson building on a map."></iframe>

                    </div>

                </section>

                <div class="uol-course__content__page-nav-container" id="nav-content">

                    <nav class="uol-page-nav" aria-label="Pagination">

                        <a href="#security" class="uol-page-nav__item uol-page-nav__item--next">
                            <span class="uol-page-nav__item__identifier">Next page</span>
                            <span class="uol-page-nav__item__title">Safety and security</span>
                        </a>

                    </nav>

                </div>

                <div class="uol-course__content__cards-container">

                    <div class="uol-widget-container uol-widget-container__">
                        <div class="uol-widget">

                            <div class="uol-widget__left-col">

                                <div class="uol-widget__head">

                                    <h2 class="uol-widget__title">You may also like</h2>

                                </div>

                            </div>

                            <div class="uol-widget__content">

                                <ul class="uol-cards  uol-cards--count-3 uol-cards--image-layout ">

                                    <li class="uol-cards__card uol-cards__card--with-image">
                                        <div class="uol-cards__card__text-wrapper">
                                            <h3 class="uol-cards__card__title">
                                                <a class="uol-cards__card__link " href="#">

                                                    Sentinel Towers

                                                </a>
                                            </h3>

                                            <p class="uol-cards__card__text">Modern accommodation in the west of the city</p>

                                        </div>

                                        <div class="uol-cards__card__image-wrapper">

                                            <img class="uol-cards__card__image" src="/placeholders/cards/sample-1.png" alt="A super informative description">

                                        </div>

                                    </li>

                                    <li class="uol-cards__card uol-cards__card--with-image">
                                        <div class="uol-cards__card__text-wrapper">
                                            <h3 class="uol-cards__card__title">
                                                <a class="uol-cards__card__link " href="#">

                                                    James Baillie Park

                                                </a>
                                            </h3>

                                            <p class="uol-cards__card__text">A great location and beautiful surroundings</p>

                                        </div>

                                        <div class="uol-cards__card__image-wrapper">

                                            <img class="uol-cards__card__image" src="/placeholders/cards/sample-2.png" alt="A super informative description">

                                        </div>

                                    </li>

                                    <li class="uol-cards__card uol-cards__card--with-image">
                                        <div class="uol-cards__card__text-wrapper">
                                            <h3 class="uol-cards__card__title">
                                                <a class="uol-cards__card__link " href="#">

                                                    Devonshire Tower

                                                </a>
                                            </h3>

                                            <p class="uol-cards__card__text">A historic building with beautiful surroundings</p>

                                        </div>

                                        <div class="uol-cards__card__image-wrapper">

                                            <img class="uol-cards__card__image" src="/placeholders/cards/sample-3.png" alt="A super informative description">

                                        </div>

                                    </li>

                                </ul>

                            </div>
                        </div>
                    </div>

                </div>

            </main>

            <aside class="uol-content-switch-from-side-to-main uol-section-nav-related-content " aria-label="Related content">
                <h2 class="uol-section-nav-related-content__title">Related content</h2>
                <div class="uol-section-nav-related-content__list">

                    <div class="uol-section-nav-related__item">
                        <h3 class="uol-section-nav-related-content__item__title">

                            <a class="uol-section-nav-related-content__item__title__link" href="/related">Campus Life</a>

                        </h3>

                        <p class="uol-section-nav-related-content__item__text">Explore our academic facilities, social spaces and campus landmarks.</p>

                    </div>

                    <div class="uol-section-nav-related__item">
                        <h3 class="uol-section-nav-related-content__item__title">

                            Admissions Enquiries

                        </h3>

                        <div class="uol-section-nav-related-content__item__contact-wrapper">
                            <a class="uol-section-nav-related-content__contact uol-section-nav-related-content__contact--phone" href="tel:+441133433212">
                                +44 (0)113 3433213
                            </a>
                        </div>

                        <div class="uol-section-nav-related-content__item__contact-wrapper">
                            <a class="uol-section-nav-related-content__contact uol-section-nav-related-content__contact--email" href="mailto:study@leeds.ac.uk">
                                Study@leeds.ac.uk
                            </a>
                        </div>

                    </div>

                </div>
            </aside>

        </div>

    </div>

</div>
<footer class="uol-site-footer-outer">
    <div class="uol-site-footer uol-content-container">
        <div class="uol-site-footer__nav-container">
            <nav class="uol-site-footer__nav-outer" aria-labelledby="footer-nav-title">
                <h2 class="uol-site-footer__title" id="footer-nav-title">Footer navigation</h2>

                <div class="uol-site-footer__nav">
                    <nav class="nav-list-group" aria-label="Study and Courses">
                        <h3 class="nav-list-group__title">Study and Courses</h3>
                        <ul class="nav-list-group__list">

                            <li class="nav-list-group__item">
                                <a href="/footer-link-undergraduate" class="nav-list-group__link">Undergraduate</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-link-masters-courses" class="nav-list-group__link">Masters courses</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-link-very-long-title" class="nav-list-group__link">Research degrees with very long titles that wrap over two lines like this one its very very long</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-international" class="nav-list-group__link">International</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-course-search" class="nav-list-group__link">Course search</a>
                            </li>

                        </ul>
                    </nav>

                </div>

                <div class="uol-site-footer__nav">
                    <nav class="nav-list-group" aria-label="About us">
                        <h3 class="nav-list-group__title">About us</h3>
                        <ul class="nav-list-group__list">

                            <li class="nav-list-group__item">
                                <a href="/footer-campus-map" class="nav-list-group__link">Campus map</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-heritage" class="nav-list-group__link">Our heritage</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-faculties" class="nav-list-group__link">Faculties</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-governance" class="nav-list-group__link">Governance</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-values" class="nav-list-group__link">Values and responsibility</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-equality" class="nav-list-group__link">Equality</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-executive" class="nav-list-group__link">Executive team</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-news" class="nav-list-group__link">News</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-events" class="nav-list-group__link">Events</a>
                            </li>

                        </ul>
                    </nav>

                </div>

                <div class="uol-site-footer__nav">
                    <nav class="nav-list-group" aria-label="Quicklinks and contacts">
                        <h3 class="nav-list-group__title">Quicklinks and contacts</h3>
                        <ul class="nav-list-group__list">

                            <li class="nav-list-group__item">
                                <a href="/footer-jobs" class="nav-list-group__link">Jobs</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-term-dates" class="nav-list-group__link">Term dates</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-services-a-z" class="nav-list-group__link">Services A-Z</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-library" class="nav-list-group__link">Library</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-alumni" class="nav-list-group__link">Alumni</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-press" class="nav-list-group__link">Press</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-video-leeds" class="nav-list-group__link">VideoLeeds</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-staff-a-z" class="nav-list-group__link">Staff A-Z</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-contacts" class="nav-list-group__link">Contacts</a>
                            </li>

                            <li class="nav-list-group__item">
                                <a href="/footer-coronavirus" class="nav-list-group__link">Coronavirus</a>
                            </li>

                        </ul>
                    </nav>

                </div>

            </nav>
        </div>
        <div class="uol-site-footer__address-container ">

            <h2 class="uol-footer-contact__title">Contact information</h2>
            <address class="uol-footer-contact" vocab="https://schema.org/" typeof="Organization">
                <strong class="uol-footer-contact__name" property="name">University of Leeds</strong>

                <div class="uol-footer-contact__address" property="address" typeof="PostalAddress">

                    <div property="streetAddress">
                        <span class="uol-footer-contact__address__item">Woodhouse Lane</span>

                    </div>

                    <span class="uol-footer-contact__address__item" property="addressLocality">Leeds</span>
                    <span class="uol-footer-contact__address__item" property="addressRegion">West Yorkshire</span>
                    <span class="uol-footer-contact__address__item" property="postalCode">LS2 9JT</span>
                    <span class="uol-footer-contact__address__item" property="addressCountry">United Kingdom</span>
                </div>

                <dl class="uol-footer-contact__telephone-email-container">

                    <dt class="uol-footer-contact__telephone-email-label">Telephone</dt>
                    <dd class="uol-footer-contact__telephone-email-data">
                        <a class="uol-footer-contact__telephone" href="tel:+4401132431751" property="telephone">+44 0113 243 1751</a>
                    </dd>

                </dl>

            </address>

            <div class="uol-footer-social-media">

                <a class="uol-footer-social-media__item" href="https://youtube-nocookie.com/user/universityofleedsuk" aria-label="YouTube">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" focusable="false">
                        <path fill="#000000" fill-rule="nonzero" d="M9.6 17.25V6.45l7.2 5.4m4.8-9.12c-.72-.24-5.16-.48-9.6-.48l-9.6.456C.528 3.33 0 7.53 0 11.85c0 4.308.528 8.52 2.4 9.132.72.24 5.16.468 9.6.468l9.6-.468c1.872-.612 2.4-4.824 2.4-9.132 0-4.32-.528-8.508-2.4-9.12z"></path>
                    </svg>

                </a>

                <a class="uol-footer-social-media__item" href="https://twitter.com/UniversityLeeds" aria-label="Twitter">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" focusable="false">
                        <path fill-rule="nonzero" d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path>
                    </svg>

                </a>

                <a class="uol-footer-social-media__item" href="https://instagram.com/universityofleeds/?hl=en" aria-label="Instagram">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" focusable="false">
                        <path fill="#000000" fill-rule="nonzero" d="M6.96 0h10.08C20.88 0 24 3.12 24 6.96v10.08A6.96 6.96 0 0 1 17.04 24H6.96C3.12 24 0 20.88 0 17.04V6.96A6.96 6.96 0 0 1 6.96 0m-.24 2.4A4.32 4.32 0 0 0 2.4 6.72v10.56a4.32 4.32 0 0 0 4.32 4.32h10.56a4.32 4.32 0 0 0 4.32-4.32V6.72a4.32 4.32 0 0 0-4.32-4.32H6.72M18.3 4.2a1.5 1.5 0 1 1 0 3 1.5 1.5 0 1 1 0-3M12 6a6 6 0 1 1 0 12 6 6 0 1 1 0-12m0 2.4a3.6 3.6 0 0 0 0 7.2 3.6 3.6 0 0 0 0-7.2z"></path>
                    </svg>

                </a>

                <a class="uol-footer-social-media__item" href="https://www.linkedin.com/school/7244" aria-label="LinkedIn">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" focusable="false">
                        <path fill="#000000" fill-rule="nonzero" d="M24 24h-5.333v-9c0-1.413-1.587-2.587-3-2.587S13.333 13.587 13.333 15v9H8V8h5.333v2.667C14.213 9.24 16.48 8.32 18 8.32c3.333 0 6 2.72 6 6.013V24M5.333 24H0V8h5.333v16M2.667 0C4.14 0 5.333 1.194 5.333 2.667S4.14 5.333 2.667 5.333 0 4.14 0 2.667 1.194 0 2.667 0z"></path>
                    </svg>

                </a>

                <a class="uol-footer-social-media__item" href="https://www.facebook.com/universityofleeds/" aria-label="Facebook">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" focusable="false">
                        <path fill="#000000" fill-rule="nonzero" d="M18 0h0v4.8h-2.4c-.828 0-1.2.972-1.2 1.8v3H18v4.8h-3.6V24H9.6v-9.6H6V9.6h3.6V4.8A4.8 4.8 0 0 1 14.4 0H18z"></path>
                    </svg>

                </a>

                <a class="uol-footer-social-media__item" href="https://medium.com/university-of-leeds" aria-label="Medium">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" focusable="false">
                        <path fill="#000000" fill-rule="evenodd" d="M24 1.5h-6.687l-4.757 13.348L7.15 1.5H.005v.663l2.517 3.43-.034 13.245L0 22.623l.005.627h7.027l.018-.577-2.944-3.836.078-10.72 6.207 15.132h.75l5.513-15.5v12.6l-2.26 2.383v.508H24v-.61l-2.202-2.328-.03-16.02L24 2.167V1.5z"></path>
                    </svg>

                </a>

                <a class="uol-footer-social-media__item" href="https://www.weibo.com/leedsuniversityuk" aria-label="Weibo">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" focusable="false">
                        <path fill="#000000" fill-rule="nonzero" d="M10.9 20.894c-3.74.39-6.968-1.394-7.2-3.984s2.593-5.006 6.33-5.396 6.968 1.393 7.2 3.982-2.592 5.008-6.33 5.398m7.48-8.6c-.318-.1-.536-.17-.37-.6.36-.957.398-1.784.007-2.374-.733-1.105-2.74-1.046-5.04-.03 0-.001-.722.334-.537-.27.354-1.2.3-2.205-.25-2.786-1.247-1.318-4.566.05-7.41 3.05-2.13 2.25-3.368 4.633-3.368 6.694 0 3.942 4.79 6.338 9.477 6.338 6.143 0 10.23-3.766 10.23-6.756 0-1.807-1.442-2.832-2.738-3.256m4.08-7.213c-1.483-1.735-3.672-2.396-5.69-1.944h-.001c-.467.105-.765.59-.664 1.082s.56.807 1.026.702c1.437-.322 2.992.15 4.047 1.38s1.34 2.914.888 4.39v.001c-.147.48.102.994.557 1.15s.94-.107 1.09-.586c.633-2.08.233-4.44-1.25-6.175"></path>
                        <path d="M19.74 7.668c-.7-.766-1.738-1.057-2.693-.857a.71.71 0 0 0-.556.846c.084.383.468.63.858.546v.001a1.4 1.4 0 0 1 1.318.418c.343.374.435.886.288 1.333h.001a.71.71 0 0 0 .465.896c.38.12.788-.085.91-.46a2.75 2.75 0 0 0-.592-2.724m-8.817 8.113a.53.53 0 0 1-.628.228c-.217-.087-.284-.327-.162-.537s.397-.31.613-.227c.22.08.3.32.177.536m-1.158 1.463c-.35.552-1.104.794-1.67.54-.56-.25-.723-.892-.372-1.43S8.8 15.578 9.36 15.8c.57.24.752.876.406 1.433m1.32-3.905c-1.73-.443-3.684.405-4.434 1.904-.765 1.53-.026 3.226 1.72 3.782 1.8.574 3.942-.306 4.684-1.957.732-1.614-.18-3.275-1.97-3.73"></path>
                    </svg>

                </a>

            </div>

        </div>

        <div class="uol-site-footer__site-information-container">

            <nav class="footer-site-information" aria-label="Site information">
                <h2 class="hide-accessible">Site information</h2>
                <ul class="footer-site-information__list">
                    <li class="footer-site-information__item">&copy; 2024 University of Leeds</li>

                    <li class="footer-site-information__item"><a class="footer-site-information__link" href="/terms-and-conditions">Terms and conditions</a></li>

                    <li class="footer-site-information__item"><a class="footer-site-information__link" href="/accessibility">Accessibility</a></li>

                    <li class="footer-site-information__item"><a class="footer-site-information__link" href="/privacy">Privacy and cookies</a></li>

                    <li class="footer-site-information__item"><a class="footer-site-information__link" href="/freedom-of-information">Freedom of information</a></li>

                </ul>
            </nav>

        </div>

        <div class="uol-site-footer__logo-outer">
            <a href="https://leeds.ac.uk" class="uol-site-footer__logo" aria-label="University of Leeds">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 283.46 80.79" fill="#000000" focusable="false" aria-hidden="true">
                    <path fill-rule="evenodd" d="M268.9 17.85h.7v-.65h-1.12v1.93h.43zm-2.05 0h.67v-.65h-1.12v1.93h.45zM230.44 0v51.7h27.1V36.15h4.62V51.7h.64v-17h8.42v17h.57V36.15h4.63V51.7h6.2V0zm36.53 8.75l4.63 2.8h-9.24zm-4.65 3.33h9.3l.5 3.4h-10.24zM275.4 35.6h-3.62v-1.47h-9.63v1.47h-3.6v-3.25h.65V21.62h1v-5.57h13.54v5.57h1v10.74h.62zm-6.17-3.25h.76v-7.12h1.7v-1.28h-2.5zm-7.8-9.6h11.12l.54-.7h-12.13zm4.3 9.6h.77v-7.12h1.7v-1.28h-2.48zm-.93-14.5h.68v-.65h-1.12v1.93h.44zm-2.57 14.5h.77v-7.12h1.68v-1.28h-2.5zM267 36.9a2.35 2.35 0 1 0 1.662.688A2.35 2.35 0 0 0 267 36.91zm0 4.18a1.84 1.84 0 1 1 1.83-1.83 1.82 1.82 0 0 1-1.83 1.83zM16.4 73.1V61.5h-3.94v11.86a4.08 4.08 0 0 1-1 2.93 4.19 4.19 0 0 1-3.31 1.2 4.14 4.14 0 0 1-3.18-1.2 4.45 4.45 0 0 1-1.08-3.11V61.5H-.04v12a7.24 7.24 0 0 0 1.87 5.33c1.37 1.33 3.44 2 6.24 2s4.94-.78 6.36-2.2a7.62 7.62 0 0 0 1.92-5.51z"></path>
                    <path d="M39.17 80.5v-19h-3.93v9.7l.06 2.95h-.06l-1.8-2.5-8-10.15h-4v19h3.94V70.1l-.07-2.64h.07l1.8 2.5 8.26 10.56z"></path>
                    <path d="M48.47 80.5v-19H44.5v19h3.97zm21.13-19h-4l-4.3 10.22-1.27 3.4H60l-1.3-3.52-3.87-10.1H50.5l7.8 19.15h2.94l8.4-19.15zm13.3 19v-3.24h-7.06V72.4h6.06v-3.26h-6.06v-4.43h6.04l1.04-3.23H71.88v19h11z"></path>
                    <path fill-rule="evenodd" d="M101.88 80.5c-2.86-4.85-4.7-8.06-5.67-8.6h0a5.4 5.4 0 0 0 3.46-4.91c0-2.94-1.83-5.45-6.9-5.45H87.2v19h4v-7.38h1.4c.7.27 1.84 2.4 4.73 7.35zm-6.13-13.15a2.83 2.83 0 0 1-2.91 2.89h-1.67v-5.47h1.67c1.87 0 2.9 1.12 2.9 2.58z"></path>
                    <path d="M115.72 75.15c0-6-8.18-5.67-8.18-9 0-1.1 1.1-1.73 2.5-1.73a9.33 9.33 0 0 1 4.54 1.39l.06-3.42a9.84 9.84 0 0 0-4.79-1.15c-4.2 0-6.47 2.53-6.47 5.43a5 5 0 0 0 1.2 3.38c2.33 2.63 6.94 3.06 6.94 5.58 0 1.44-1.54 1.95-2.95 1.95a7.9 7.9 0 0 1-4.36-1.47l-1.53 2.86a10.71 10.71 0 0 0 6.06 1.79c3.9 0 7-2.16 7-5.64zm7.16 5.35v-19h-3.95v19h3.95zm18.34-19h-15.56v3.23h5.57V80.5h4V64.73h5.1l.9-3.23zm17.38 0h-4.13l-2.9 5.36-1.37 2.68h-.05l-1.4-2.73-2.9-5.3h-4.36L148.1 73v7.53h3.95v-7.47l6.58-11.54z"></path>
                    <path d="M185.96 70.97a9.15 9.15 0 0 0-9.83-9.7 9.64 9.64 0 0 0-7.07 2.83 10 10 0 0 0-2.75 7.11 9.53 9.53 0 0 0 3 7.27 10.78 10.78 0 0 0 13.95-.52 9.78 9.78 0 0 0 2.66-7zm-4.2.1c0 4.17-2.4 6.55-5.64 6.55s-5.7-2.38-5.7-6.55 2.4-6.55 5.7-6.55 5.64 2.45 5.64 6.55z"></path>
                    <path fill-rule="evenodd" d="M200.68 61.5h-11.06v19h3.97v-8.03h6v-3.24h-6v-4.5h6.08l1-3.23zm20.22 19v-3.26h-6.68v-15.7h-3.92V80.5h10.6zm13.57 0v-3.23h-7.03v-4.84h6.04v-3.25h-6.04v-4.42h6l1.05-3.2h-11V80.5h10.98zm14.4 0v-3.23h-7.03v-4.84h6.05v-3.25h-6.05v-4.42h6.02l1.02-3.2h-11V80.5h10.98z"></path>
                    <path fill-rule="evenodd" d="M269.17 70.85c0-5.66-3.8-9.3-10.57-9.3h-6.3V80.5h6c6.58 0 10.92-3.8 10.92-9.64zm-4.23.1c0 3.32-1.84 6.27-6.53 6.27h-2.17V64.8h2.1c4.35 0 6.6 2.42 6.6 6.15z"></path>
                    <path d="M283.47 75.16c0-6-8.16-5.68-8.16-8.95 0-1.1 1.1-1.74 2.5-1.74a9.41 9.41 0 0 1 4.52 1.38v-3.4a9.75 9.75 0 0 0-4.79-1.15c-4.17 0-6.45 2.54-6.45 5.4a5 5 0 0 0 1.22 3.38c2.3 2.62 6.9 3 6.9 5.56 0 1.44-1.56 1.95-2.94 1.95a7.76 7.76 0 0 1-4.34-1.47l-1.53 2.85a10.65 10.65 0 0 0 6.05 1.79c3.9 0 6.95-2.16 6.95-5.6z"></path>
                </svg>

            </a>
        </div>
    </div>
</footer>
 
{
  "local_navigation": [
    {
      "title": "Home",
      "url": "/"
    },
    {
      "title": "Our residences",
      "url": "/our-residences"
    },
    {
      "title": "Prospective students",
      "url": "/prospective-students"
    },
    {
      "title": "Current residents",
      "url": "/current-residents"
    },
    {
      "title": "Viewing day",
      "url": "/viewing-day"
    },
    {
      "title": "Staff accommodation",
      "url": "/staff-accommodation"
    },
    {
      "title": "Contact us",
      "url": "/contact-us"
    }
  ],
  "local_masthead": {
    "site_name": "Accommodation",
    "site_url": "/"
  },
  "hero_banner": {
    "heading_level": "h1",
    "title": "Clarence Dock Village",
    "lead": "Modern city centre living",
    "img": {
      "src": "/placeholders/banner/Liberty_Dock_Banner.jpg",
      "alt": "Liberty_Dock image"
    }
  },
  "links": [
    {
      "type": "link button",
      "content": "Apply now",
      "url": "/url",
      "style": "primary"
    }
  ],
  "year_of_entry": {
    "label": "Available for",
    "year": "September 2023"
  },
  "breadcrumbs": [
    {
      "title": "Our residences",
      "href": "/"
    }
  ],
  "facts": [
    {
      "term": "Rooms",
      "data": [
        {
          "content": "488"
        }
      ]
    },
    {
      "term": "Rent",
      "data": [
        {
          "content": "£151 per week"
        }
      ]
    },
    {
      "term": "Self catered",
      "data": [
        {
          "content": "Yes. Details on <a href=\"/\">self catering</a>"
        }
      ]
    },
    {
      "term": "En-suite",
      "data": [
        {
          "content": "Available"
        }
      ]
    },
    {
      "term": "Rent inclusions",
      "data": [
        {
          "content": "Electricity, gas and water<br>High-speed Wi-FI<br> Off-peak sports and gym membership<br>Basic contents insurance cover"
        }
      ]
    }
  ],
  "detail_nav": {
    "heading": {
      "intro": "In this section",
      "text": "Clarence Dock Village"
    },
    "links": [
      {
        "id": "residence_details",
        "title": "Residence details",
        "url": "#",
        "current": true
      },
      {
        "id": "furniture_and_facilities",
        "title": "Furniture and facilities",
        "url": "#"
      },
      {
        "id": "Safety_and_security",
        "title": "Safety and security",
        "url": "#"
      },
      {
        "id": "Meals",
        "title": "Meals",
        "url": "#"
      }
    ]
  },
  "related_content": {
    "title": "Related content",
    "items": [
      {
        "heading": {
          "text": "Campus Life",
          "url": "/related"
        },
        "content": "Explore our academic facilities, social spaces and campus landmarks."
      },
      {
        "heading": {
          "text": "Admissions Enquiries"
        },
        "links": [
          {
            "type": "phone",
            "label": "+44 (0)113 3433213",
            "url": "+441133433212"
          },
          {
            "type": "email",
            "label": "Study@leeds.ac.uk",
            "url": "study@leeds.ac.uk"
          }
        ]
      }
    ]
  },
  "articles": [
    {
      "id": "overview",
      "style_lead": true,
      "content": "\n          <h2>Residence details</h2>\n          <p>Run in partnership with Unite Students, Clarence Dock Village provides en suite accommodation located right on the banks of the River Aire and offers a scenic short walk to the city centre.</p>\n          <div class=\"uol-in-text-cta\">\n            <h2 class=\"uol-in-text-cta__heading\">\n                <a class=\"uol-in-text-cta__link\" href=\"/home\">Find out more about living in the city centre </a>\n            </h2>\n          </div><p>\n          This residence has individual en suite rooms with junior double beds, organised into flats that are shared between five or six students. The residence also has its own common room to relax with friends in after a long day and a gym for your regular workouts. It’s just around the corner from Leeds Dock, a popular destination packed with stylish bars, cafes, and restaurants. For your essentials you’ll also find a mini supermarket on your doorstep.\n          </p>\n\n          <blockquote class=\"uol-typography-blockquote\" cite=\"https://designsystemfoundations.com/\">\n            <p>Block quote example lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n\n            <footer>\n                <cite>\n\n                    Joe Hunter\n\n                </cite>\n            </footer>\n\n          </blockquote>\n\n          <p>There are regular buses that offer connections to the University campus from close by the residence. You’re also within easy reach of all local transport links, including Leeds railway station. There are additional charges for parking and spaces are limited. Parking is for permit holders only, to apply for a permit please download and complete the application form.</p>\n\n          <p>Read more about what you can expect to find in your room and flat.</p>\n\n          <h2>Facilities</h2>\n          <ul class=\"in-text-icons\">\n\n          <li class=\"in-text-icon uol-icon uol-icon--mdiWifi\">Fast Wi-Fi</li>\n          <li class=\"in-text-icon uol-icon uol-icon--mdiDumbbell\">On-site gym</li>\n          <li class=\"in-text-icon uol-icon uol-icon--mdiSofaSingleOutline\">Common room</li>\n          <li class=\"in-text-icon uol-icon uol-icon--mdiSoccer\">University sport</li>\n          <li class=\"in-text-icon uol-icon uol-icon--mdiParking\">Parking</li>\n          <li class=\"in-text-icon uol-icon uol-icon--mdiGrill\">Outdoor social space</li>\n\n          </ul>\n          <h3>Rooms</h3>\n          <ul>\n\n            <li>Self catered en suite: 42 week contract</li>\n            <li>Due to refurbishment or vacation lettings some blocks may open later or close earlier than others and as a result, some contracts may be slightly shorter.</li>\n\n          </ul>\n\n\n          <section class=\"uol-gallery-container\" aria-label=\"Gallery of 6 items\">\n            <div class=\"uol-gallery uol-gallery--count-6\">\n              <div class=\"uol-gallery__item  uol-gallery__item--image\">\n                <h2 class=\"uol-gallery__item__title\">Caption one</h2>\n                <figure class=\"uol-gallery__figure\">\n                  <div class=\"uol-gallery__image-container\">\n                    <img src=\"/placeholders/campus/medium/29940.jpeg\" alt=\"Caption one\" data-src-high-quality=\"/placeholders/campus/full/29940.jpeg\">\n                  </div>\n                  <figcaption class=\"uol-gallery__image-caption\">Caption one</figcaption>\n                </figure>\n              </div>\n              <div class=\"uol-gallery__item  uol-gallery__item--image\">\n                <h2 class=\"uol-gallery__item__title\">Caption two</h2>\n                <figure class=\"uol-gallery__figure\">\n                  <div class=\"uol-gallery__image-container\">\n                    <img src=\"/placeholders/campus/medium/28573.jpeg\" alt=\"Caption two\" data-src-high-quality=\"/placeholders/campus/full/25873.jpeg\">\n                  </div>\n                  <figcaption class=\"uol-gallery__image-caption\">Caption two</figcaption>\n                </figure>\n              </div>\n              <div class=\"uol-gallery__item  uol-gallery__item--image\">\n                <h2 class=\"uol-gallery__item__title\">Caption three</h2>\n                <figure class=\"uol-gallery__figure\">\n                  <div class=\"uol-gallery__image-container\">\n                    <img src=\"/placeholders/campus/medium/29936.jpeg\" alt=\"Caption three\" data-src-high-quality=\"/placeholders/campus/full/29936.jpeg\">\n                  </div>\n                  <figcaption class=\"uol-gallery__image-caption\">Caption three</figcaption>\n                </figure>\n              </div>\n              <div class=\"uol-gallery__item  uol-gallery__item--image\">\n                <h2 class=\"uol-gallery__item__title\">Caption four</h2>\n                <figure class=\"uol-gallery__figure\">\n                  <div class=\"uol-gallery__image-container\">\n                    <img src=\"/placeholders/campus/medium/29921.jpeg\" alt=\"Caption four\" data-src-high-quality=\"/placeholders/campus/full/29921.jpeg\">\n                  </div>\n                  <figcaption class=\"uol-gallery__image-caption\">Caption four</figcaption>\n                </figure>\n              </div>\n              <div class=\"uol-gallery__item  uol-gallery__item--image\">\n                <h2 class=\"uol-gallery__item__title\">Caption five</h2>\n                <figure class=\"uol-gallery__figure\">\n                  <div class=\"uol-gallery__image-container\">\n                    <img src=\"/placeholders/campus/medium/30092.jpeg\" alt=\"Caption five\" data-src-high-quality=\"/placeholders/campus/full/30092.jpeg\">\n                  </div>\n                  <figcaption class=\"uol-gallery__image-caption\">Caption five</figcaption>\n                </figure>\n              </div>\n              <div class=\"uol-gallery__item  uol-gallery__item--image\">\n                <h2 class=\"uol-gallery__item__title\">Caption six</h2>\n                <figure class=\"uol-gallery__figure\">\n                  <div class=\"uol-gallery__image-container\">\n                    <img src=\"/placeholders/campus/medium/29878.jpeg\" alt=\"Caption six\" data-src-high-quality=\"/placeholders/campus/full/29878.jpeg\">\n                  </div>\n                  <figcaption class=\"uol-gallery__image-caption\">Caption six</figcaption>\n                </figure>\n              </div>\n\n\n            </div>\n          </section>\n\n          <h3>AccessAble</h3>\n\n          <p>Providing independence and choice. <a href=\"#\">View the access guide to Clarence Dock Village</a>.</p>\n\n          <h3>Residence details</h3>\n\n          <div class=\"uol-accordion\"> <h3 class=\"uol-accordion__title\">20 Clarendon Place</h3> <div class=\"uol-accordion__content\"> <div class=\"uol-rich-text\"><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus saepe delectus quos quibusdam. Quos ducimus, nam consectetur ipsam illo laudantium quas, dignissimos voluptate neque est eligendi, alias et facere unde. Ex minima incidunt exercitationem mollitia ratione ut ducimus culpa nam.</p> </div> </div> </div>\n\n          <div class=\"uol-accordion\"> <h3 class=\"uol-accordion__title\">28 Clarendon Place</h3> <div class=\"uol-accordion__content\"> <div class=\"uol-rich-text\"><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus saepe delectus quos quibusdam. Quos ducimus, nam consectetur ipsam illo laudantium quas, dignissimos voluptate neque est eligendi, alias et facere unde. Ex minima incidunt exercitationem mollitia ratione ut ducimus culpa nam.</p> </div> </div> </div>\n\n          <h3>Location, essentials and travel</h3>\n\n          <p>View the text version of location, essentials and travel information.</p>\n\n          <iframe class=\"uol-iframe\" src=\"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d945.9441538079813!2d-1.5536401236388144!3d53.80749174258921!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48795ea98c000001%3A0xa460454678f77e00!2sThe%20Parkinson%20Building!5e0!3m2!1sen!2suk!4v1685529471450!5m2!1sen!2suk\" title=\"The Parkinson building on a map.\"></iframe>\n          "
    }
  ],
  "all_page_nav": [
    {
      "id": "content",
      "page_nav": [
        {
          "item_type": "page",
          "nav_type": "next",
          "url": "#security",
          "title": "Safety and security"
        }
      ]
    }
  ],
  "widgets": [
    {
      "type": "cards",
      "title": "You may also like",
      "cards": {
        "image_layout": true,
        "items": [
          {
            "image": {
              "src": "/placeholders/cards/sample-1.png",
              "alt": "A super informative description"
            },
            "url": "#",
            "title": "Sentinel Towers",
            "text": "Modern accommodation in the west of the city"
          },
          {
            "image": {
              "src": "/placeholders/cards/sample-2.png",
              "alt": "A super informative description"
            },
            "url": "#",
            "title": "James Baillie Park",
            "text": "A great location and beautiful surroundings"
          },
          {
            "image": {
              "src": "/placeholders/cards/sample-3.png",
              "alt": "A super informative description"
            },
            "url": "#",
            "title": "Devonshire Tower",
            "text": "A historic building with beautiful surroundings"
          }
        ]
      }
    }
  ]
}