BETA This is a new service — your feedback will help us to improve it.

Back to components

Step by step list in main content

Example

Apply for council housing: step by step

Check if you are eligible, find out how to apply and search for available council and housing association properties.

  1. Check if you are eligble

    You must be 16 years old or over to apply for council housing.

    Eligibility can also depend on your nationality, immigration status and if you’ve recently lived abroad. This is because the law says that there are some people who arrive in the UK from abroad that we cannot rehouse.

    We will not accept applications if you have a history of unacceptable housing-related behaviour. This includes:

    • rent arrears
    • anti-social behaviour
    • criminal activity or damage to property

    If we reject your application, we will write to you to explain why.

  2. Register for council housing membership

    To apply for council housing, you need to register online for a Leeds Homes membership.

    You will need to provide:

    • your national insurance number
    • the national insurance number of any joint applicants
    • your email address
    Register for Leeds Homes membershipExternal link
  3. Search for a property

    When your application is approved, you will be given a Leeds Homes membership number. This will allow you to bid on available properties advertised on the Leeds Homes website, which include properties owned by the council and housing associations. 

    New properties are advertised every Wednesday from 8am to the following Monday at 5pm. You can bid on up to three properties a week.

    You can search for available properties online on the Leeds Homes Website. We also advertise available properties in our weekly Leeds Homes flyer, which is published every Wednesday and is available in all Community Hubs, Housing Offices and One Stop Centres.

    Search for available propertiesExternal link

Instructions

  • Include as many <li> items as you like, the increasing numbers will be generated in CSS
  • Do not include any heading HTML mark-up where the snippet says "title goes here", only include actual text and no extra HTML. Including heading mark-up will stop some screen readers from announcing if the dropdown content is open or closed.

HTML Snippet for step by step list

<ol class="stepped-list"> 

    <li class="stepped-list__list-item" property="step">
        <details class="stepped-list__details">
            <summary class="stepped-list__details-summary">
                <span class="stepped-list__title">
                    <span class="stepped-list__title-span">
                        Title goes here
                    </span>
                </span>
            </summary>
            <div class="stepped-list__details-content">
                Content goes here                 
            </div>
        </details>                      
    </li>

    <li class="stepped-list__list-item" property="step">
        <details class="stepped-list__details">
            <summary class="stepped-list__details-summary">
                <span class="stepped-list__title">
                    <span class="stepped-list__title-span">
                        Title goes here
                    </span>
                </span>
            </summary>
            <div class="stepped-list__details-content">
                <p>Content goes here</p>                   
            </div>
        </details>                      
    </li>

    <li class="stepped-list__list-item" property="step">
        <details class="stepped-list__details">
            <summary class="stepped-list__details-summary">
                <span class="stepped-list__title">
                    <span class="stepped-list__title-span">
                        Title goes here
                    </span>
                </span>
            </summary>
            <div class="stepped-list__details-content">
                Content goes here                 
            </div>
        </details>                      
    </li>

</ol>
    

Step by step list in sidebar

The HTML for step by step lists that appear in sidebars is slightly different to step by step lists that appear in normal content.

As space in the sidebar is limited we have reduced the size of the numbering, the amount of space around each number and the font size of text within each dropdown area.

Example
  1. Check if you are eligble
  2. Register for council housing membership
  3. Search for a property

Instructions

  • Include as many <li> items as you like, the increasing numbers will be generated in CSS
  • Do not include any heading HTML mark-up where the snippet says "title goes here", only include actual text and no extra HTML. Including heading mark-up will stop some screen readers from announcing if the dropdown content is open or closed.

HTML Snippet for step by step list small

<ol class="stepped-list stepped-list-small"> 

    <li class="stepped-list__list-item" property="step">
        <details class="stepped-list__details">
            <summary class="stepped-list__details-summary">
                <span class="stepped-list__title">
                    <span class="stepped-list__title-span">
                        Title goes here
                    </span>
                </span>
            </summary>
            <div class="stepped-list__details-content">
                Content goes here                 
            </div>
        </details>                      
    </li>

    <li class="stepped-list__list-item" property="step">
        <details class="stepped-list__details">
            <summary class="stepped-list__details-summary">
                <span class="stepped-list__title">
                    <span class="stepped-list__title-span">
                        Title goes here
                    </span>
                </span>
            </summary>
            <div class="stepped-list__details-content">
                <p>Content goes here</p>                   
            </div>
        </details>                      
    </li>

    <li class="stepped-list__list-item" property="step">
        <details class="stepped-list__details">
            <summary class="stepped-list__details-summary">
                <span class="stepped-list__title">
                    <span class="stepped-list__title-span">
                        Title goes here
                    </span>
                </span>
            </summary>
            <div class="stepped-list__details-content">
                Content goes here                 
            </div>
        </details>                      
    </li>

</ol>
    
Back to top