The Loop Design System provides design guidelines and code to help teams quickly create beautiful accessible products that align with the World Bank’s external digital brand.
Goals
- To unify The World Bank’s external digital products to have a consistent user interface and visual language across all devices.
- Streamline the development process across teams by providing pre-built components that can be quickly assembled into web products.
- Bring together designers and developers to share experiences, designs and code to integrate into The Loop design system.
Developers
Download the complete system zip file, or peruse the system assets to copy code for specific components.
Download Loop Design System (1.1.0)
Then, add the following folders into a relevant place in your code base — likely a directory where you keep third-party libraries:
loop-1.1.0/
├── js/
│ ├── loop.min.js.map
│ ├── loop.min.js
│ └── loop.js
├── css/
│ ├── loop.min.css.map
│ ├── loop.min.css
│ └── loop.css
└── fonts/
Refer to these files by adding the following <link> and <script> elements into your HTML pages:
Add this to your <head> element:
<link rel="stylesheet" type="text/css" href="/path/to/your/css/loop.min.css">
Add this before the closing </body> tag:
<script src="/path/to/your/js/loop.min.js"></script>
Loop Server link
Skip the download with the loop server link to deliver cached version of Loop compiled CSS and JS to your project.
<link rel="stylesheet" type="text/css" href="http://theloop.worldbank.org/content/dam/loop/assets/css/loop.min.css">
If you’re using our compiled JavaScript, don’t forget to include CDN versions of jQuery before it.
<script type="text/javascript" href="http://theloop.worldbank.org/content/dam/loop/assets/js/loop-min.js"></script>
Designers
Working in sketch? We’ve got you covered. Download the complete sketch file that includes all the artwork shown in The Loop.
Download sketch file
Version 1.0.0
Accessibility
All of our designs meet the W3C accessibility guidelines and are tested for all device types. If you chose to modify any of the designs please continue to make sure that they meet these standards.
Read more on accessiblity in our Practices section.