Joined list

Connected items, one below another

How we design them

  • Keep copy short
  • Start each line with a capital letter (unless using words like “giffgaff” and “goodybag”)
  • Don’t put a full stop at the end of each line
  • Numbers in ordered lists must be decimal and have a full stop

How it looks

Apply the class gg-c-joined-list to the <ul> tag.

Use gg-c-joined-list__icon class on a <div> inside the <li>. Inside that <div>, put the svg code of the icon that you wish to be shown.

Outside of that <div>, but a <span> with the text that you want shown.

View demo Open in new window
Open in new window
320 x 568
View code 
    
<ul class="gg-c-joined-list gg-u-mb-small">
                    <li>
                        <div class="gg-c-joined-list__icon">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 6.12c.11-1.54-1.19-2.25-2.43-2.82a15.73 15.73 0 00-5.14-1.79.52.52 0 00-.48.22 8.67 8.67 0 00-2.67 3.45 3.56 3.56 0 00-2.93 0 2 2 0 00-.85 1.67 1.56 1.56 0 00-.4.15 2.06 2.06 0 00-.8 2.34h-.2a2.15 2.15 0 00-1.27 2.2 1.82 1.82 0 00-.71.82 1.57 1.57 0 00.14 1.77 3.94 3.94 0 001.29.87l-.28.46a.63.63 0 000 .3s0 .05-.06.09a2.36 2.36 0 00.55 2.47 13.25 13.25 0 002.39 1.52l-.21.37c-.46.67.63 1.3 1.08.64A23.33 23.33 0 009 17c.34-.81 1.32-4.19 2.66-4a.31.31 0 00.11.08c.73.32.05 2.36-.06 3.11a8.44 8.44 0 00-.07 1.88c-.23.7.77 1.27 1.1.56A15.28 15.28 0 0117 13.35c.45-.37.1-.94-.36-1 .08-.05.05 0 .11-.13l.05-.09c.25-.44.48-.89.72-1.34 1.91 4.12-2.44 7-2.77 11-.07.8 1.18.79 1.25 0 .24-2.57 2.39-4.55 3-7.08a6.36 6.36 0 00-.78-5.25c.51-1 1-2 1.58-2.94a.6.6 0 00.2-.4zm-12.65 0a3.64 3.64 0 011.35.18c-.23.47-.45.89-.67 1.29A10.29 10.29 0 006.74 7c-.14-.42.26-.79.61-.87zM5.91 8.07a3.81 3.81 0 011.49.6l-.74 1.21a2.43 2.43 0 00-1.12-.59c-.08-.43-.23-1.19.37-1.22zm0 2.81l.08.06c-.22.36-.43.72-.65 1.07a3.67 3.67 0 00-1.3-.57c-.04-1.06 1.31-1.22 1.89-.56zM3.2 13c.24-.79 1.1-.31 1.54 0l-.53.88C3.79 13.79 3 13.54 3.2 13zm12.57-1.52a.62.62 0 00.47.92l-.12.07A16.29 16.29 0 0013 15.75a10.7 10.7 0 01.31-1.24A2 2 0 0012.4 12h-.07a.5.5 0 01-.31-.11c-1.63-.29-2.4.93-3 2.27a46.42 46.42 0 01-2.17 4.63c-1-.58-2.87-1.16-2.35-2.55a.49.49 0 000-.2c1.24-2.08 2.54-4.2 3.81-6.3.69-1.22 1.37-2.42 2.07-3.63.55-1 1.26-2.75 2.21-3.32a11 11 0 013.05 1c.88.36 2.92.94 3.08 2.09z"></path><path d="M15.23 5c-.31-.07-.6-.21-.91-.28a4.32 4.32 0 00-.88 0 .52.52 0 00-.39.25.52.52 0 00-.34.65.3.3 0 000 .1c.16.3.35.29.64.36a8.58 8.58 0 01.83.35 1.41 1.41 0 001.55-.26c.53-.55.04-1.04-.5-1.17z"></path></svg>
                        </div>
                        <span class="gg-u-text-speak-up">Text PAC to 65075 from your current SIM. You’ll get a code in 60 seconds. Text PAC</span>
                    </li>
                    <li>
                        <div class="gg-c-joined-list__icon">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.5 14.2c.2-.4.4-.8.7-1.3 1.1-.9 1.6-2.8.3-3.8-.6-.4-1.5-.5-2.3-.1-.6.5-1.2 1.1-1.5 1.8v-.6c.3-1.6 2.5-5.4.6-6.8-.5-.2-1-.3-1.6-.2h-.2c-.2.1-.5.2-.7.3-.9.7-1.1 2.1-1.4 3.1V7c-.2.7-.5 1.5-.6 2.2-.1-.3-.1-.6-.1-1 .1-1.3 0-2.6-.2-3.9-.1-.8-.6-1.5-1.4-1.8-.3-.3-.6-.4-1-.3-1.1.4-1.3 2.7-1.2 5.1h-.2c-.9-1.9-2-3.5-3.3-2.9-1 .3-1 1.7-.6 3.3v.1c.2.7.4 1.5.6 2.2-.6.8-1.2 1.7-1.6 2.7-.2.5-.3 1-.1 1.5-.4-.2-.8-.2-1.2-.2h-.3c-.6 0-1.2.5-1.2 1.2-.1 1.3 1.3 2.6 2.1 3.3.8.7 1.7 1.3 2.5 2 .4.3.6.8 1.2 1.1.6.2 1.4-.2.8-.9-1-1.1-2.1-2.1-3.1-3.1-.4-.4-2.2-1.4-2.1-2 .1-.6.9-.3 1.2 0 .4.2 1.1.4 1.8.7 1.1.8 2.3 1.5 3.3 2.2 1.8 1.3 3.5 2.7 5.3 3.8 2.9 1.8 5.2-3.6 6.6-5.5.1-.2.2-.4.1-.5.1-1.2-.3-1.5-1.2-2.1zm-2.2-1.9c.3-.5.9-1.2 1.1-1.5.2-.2.4-.4.6-.5.2-.1.5-.1.8 0 .7.5-.4 2.2-1.2 3.3-.6-.4-1.1-.8-1.6-1.2.1 0 .2 0 .3-.1zm-3-3.5c.2-.5 1.2-5.4 2.2-4.1.2.3.2.7.1 1-.3.8-.6 1.6-.8 2.4-.1.6-.2 1.2-.2 1.8V10.2c0 .4-.1.8-.1 1.2-.6-.4-1.1-.8-1.7-1.2.2-.5.3-1 .5-1.4zM11 4.3c.1-.3.3-.4.6-.5.3 0 .5.2.6.4.1.2.1.5.1.8 0 1.1.1 2.2.1 3.2-.4-.2-.9-.5-1.3-.6 0-.9-.1-1.7-.1-2.5-.1-.2-.1-.5 0-.8zM7.8 6.1c.1.2.1.4.2.6l.5 1c-.1.1-.2.1-.3.2-.3.3-.6.6-.9 1-.3-.9-.5-1.8-.6-2.7-.1-.8.7-.9 1.1-.1zM16.9 21c-1 .7-1.2.1-2.2-.7l-5-3.6c-.1-.1-.2-.1-.3-.2-.1 0-.2-.1-.2-.1s-.1 0-.1-.1l-.3-.2c-.8-.6-2.9-1.5-2.9-2.6 0-.9 2.7-4.2 3.4-4.7s1.7.3 2.8 1.1l5.7 4.1c1 .7 2.4 1.4 2.6 2.3-1 1.4-2.1 3.8-3.5 4.7z"></path><path d="M9.9 11.1l.3 4.3c.1.9 1.4.9 1.3 0l-.3-4.3c0-.8-1.3-.8-1.3 0zM12.8 13l.3 4.3c.1.9 1.4.9 1.3 0l-.3-4.3c-.1-.9-1.4-.9-1.3 0zM1.7 6.6L3.8 8c.8.5 1.5-.7.7-1.2L2.4 5.4c-.7-.5-1.4.7-.7 1.2zM4.5 9.2l-2.3-.4c-.8-.2-1.2 1.2-.3 1.3l2.2.4c.9.3 1.3-1.1.4-1.3z"></path></svg>
                        </div>
                        <span class="gg-u-text-speak-up">Order your SIM and activate it as soon as it arrives</span>
                    </li>
                    <li>
                        <div class="gg-c-joined-list__icon">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.8363 14.0046C14.1073 14.0086 14.3793 14.0176 14.6493 14.0296V15.9446H13.8873C13.8863 15.2956 13.8743 14.6486 13.8363 14.0046ZM11.3923 14.0316C11.5183 14.0386 11.6443 14.0356 11.7703 14.0446C12.0293 14.0276 12.2893 14.0286 12.5483 14.0206C12.5593 14.6586 12.5833 15.3006 12.5993 15.9446H11.3873C11.3503 15.3076 11.3493 14.6686 11.3923 14.0316ZM8.70032 14.0276C9.18132 14.0046 9.66232 13.9866 10.1433 13.9896C10.0983 14.6406 10.0993 15.2936 10.1373 15.9446H8.70032V14.0276ZM14.6493 9.78658C13.5583 9.78658 12.4683 9.79358 11.3783 9.81158C11.3493 9.10658 11.3733 8.40158 11.3783 7.70458H14.6493V9.78658ZM11.7703 12.7946C10.7483 12.7256 9.72332 12.7286 8.70032 12.7776V11.1476C10.6863 11.0606 12.6643 11.0256 14.6493 11.0366V12.7796C13.6903 12.7366 12.7293 12.7346 11.7703 12.7946ZM8.94632 7.69458C8.95832 7.69658 8.96832 7.70258 8.98032 7.70458H10.1403C10.1913 8.41558 10.1343 9.13258 10.1313 9.85158C9.65432 9.86658 9.17732 9.87258 8.70032 9.89758V7.69458H8.94632ZM15.2793 6.45458H9.00332C8.99132 6.45258 8.98232 6.44558 8.97032 6.44458H8.08032C7.73632 6.45458 7.46032 6.73158 7.45032 7.07458V16.5746C7.45532 16.9146 7.73032 17.1896 8.07032 17.1946H15.2793C15.6243 17.1896 15.8993 16.9086 15.8993 16.5646V7.08458C15.8993 6.74058 15.6243 6.46058 15.2793 6.45458Z" fill="white"/><mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="5" y="2" width="14" height="19"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 2.5H18.4538V20.1547H5V2.5Z" fill="white"/></mask><g mask="url(#mask0)"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.1996 7.33478L17.1406 18.8348H9.76063C8.58963 18.7298 7.41263 18.7328 6.24163 18.8188C6.36463 18.0498 6.36463 17.2648 6.24063 16.4948V4.77478C6.21463 4.42178 6.22863 4.06778 6.24063 3.71478H6.84063C6.92063 3.76878 7.00963 3.81178 7.10963 3.82478H13.5296C13.6586 3.80878 13.7646 3.74578 13.8566 3.66678L17.2456 7.18478C17.2256 7.23278 17.2066 7.28078 17.1996 7.33478ZM18.2796 6.45478V6.48478L14.5996 2.64478C14.2966 2.49278 14.1276 2.46778 13.8816 2.53578C13.8136 2.49978 13.7806 2.56278 13.7026 2.55278L13.5296 2.52478L7.50663 2.57178C7.44663 2.59778 7.37863 2.61378 7.29963 2.61378C7.22663 2.61378 7.16463 2.59778 7.10763 2.57478H5.63063C5.28563 2.57478 5.00563 2.85078 4.99963 3.19478C5.03963 8.64778 5.03963 14.0918 4.99963 19.5238C4.99963 19.8688 5.27563 20.1488 5.61963 20.1548L17.7606 20.0848C18.1046 20.0408 18.3496 19.7258 18.3056 19.3808C18.3036 19.3648 18.2956 19.3528 18.2926 19.3368C18.3406 19.2608 18.3786 19.1788 18.3896 19.0848L18.4496 7.33478C18.4406 7.26578 18.4146 7.20378 18.3866 7.14378C18.4906 6.93478 18.4876 6.67278 18.2796 6.45478Z" fill="white"/></g></svg>
                        </div>
                        <span class="gg-u-text-speak-up">Give us your PAC code and we’ll bring your number. Easy.</span>
                    </li>
                </ul>