Accessibility Options: Skip to Content Skip to Search Skip to Footer Institutional Accessibility Open Alternative Formats for this page
Accessibility Options: Skip to Content Skip to Search Skip to Footer Institutional Accessibility Open Alternative Formats for this page
To serve the needs of varying screen sizes, images are served at their native dimension but displayed in relative units within most components. As long as there is enough room in the container, as the browser window narrows, images will scale to fit, retaining the same aspect ratio. For this reason, the design system will take any image; however, it is suggested to maintain a 4:3 ratio. Below are recommended native image sizes per component.
image size: 932 by 240 pixels
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut fringilla augue at leo consectetur, vitae imperdiet neque rutrum. Nam et fringilla justo. Maecenas euismod, tellus ac blandit commodo, felis metus lacinia urna, sit amet mollis turpis tortor eu massa. Donec sapien elit, tempus vitae ornare sed, gravida eget quam. Suspendisse ac elit vitae tellus bibendum condimentum sed a erat. Morbi eget lectus rutrum, posuere sapien eget, lobortis felis.
image size: 426 by 350 pixels
Lorem ipsum dolor sit amet consectetur adipiscing elit sodales congue.
Parturient justo dui neque posuere nunc, proin imperdiet sociosqu nulla, tristique molestie magnis hac.
Lorem ipsum dolor sit amet consectetur adipiscing elit sodales congue, mattis mus suspendisse risus laoreet placerat commodo facilisis cursus, fusce sagittis malesuada montes semper felis augue ridiculus.
Elementum pellentesque interdum mattis eleifend aptent quam blandit tempor integer suscipit fringilla etiam, per cursus aenean faucibus hendrerit ac consequat.
image size: 426 by 270 pixels
Lorem ipsum dolor sit amet consectetur adipiscing elit sodales congue, mattis mus suspendisse risus laoreet placerat commodo facilisis cursus, fusce sagittis malesuada montes semper felis augue ridiculus.
Elementum pellentesque interdum mattis eleifend aptent quam blandit tempor integer suscipit fringilla etiam, per cursus aenean faucibus hendrerit ac consequat.
image size: 300 by 204 pixels
Lorem ipsum dolor sit amet consectetur adipiscing elit sodales congue, mattis mus suspendisse risus laoreet placerat commodo facilisis cursus, fusce sagittis malesuada montes semper felis augue ridiculus.
Lorem ipsum elementum pellentesque interdum mattis eleifend aptent quam blandit tempor integer suscipit fringilla etiam, per cursus aenean faucibus hendrerit ac consequat.
Lorem ipsum quam blandit tempor integer suscipit fringilla etiam, per cursus aenean faucibus elementum pellentesque interdum mattis eleifend aptent.
image size: 222 by 170 pixels
Lorem ipsum dolor sit amet consectetur adipiscing elit sodales congue, mattis mus suspendisse risus laoreet placerat commodo facilisis cursus, fusce sagittis malesuada.
Lorem ipsum elementum pellentesque interdum mattis eleifend aptent quam blandit tempor integer suscipit fringilla etiam, per cursus aenean.
Lorem ipsum quam blandit tempor integer suscipit fringilla etiam, per elementum pellentesque interdum mattis eleifend aptent cursus aenean faucibus.
Lorem ipsum quam fringilla etiam, per cursus aenean faucibus elementum pellentesque interdum mattis eleifend aptent blandit tempor integer suscipit.
suggested image size: 458 by 366 pixels (no height limit)
Lorem ipsum Lacinia lectus id congue aliquam auctor aptent risus vestibulum euismod, ornare sollicitudin parturient cubilia tempus fermentum lobortis integer, dictumst eget facilisi a laoreet est maecenas justo. Dolor sit amet consectetur adipiscing elit sodales congue, mattis mus suspendisse risus laoreet placerat commodo facilisis.
Lorem ipsum dolor sit amet consectetur adipiscing elit sodales congue, mattis mus suspendisse risus laoreet placerat commodo facilisis cursus, fusce sagittis malesuada montes semper felis augue ridiculus. Lacinia lectus id congue aliquam auctor aptent risus vestibulum euismod, ornare sollicitudin parturient cubilia tempus fermentum lobortis integer, dictumst eget facilisi a laoreet est maecenas justo.
suggested image size: 300 by 240 pixels (no height limit)
Lorem ipsum dolor sit amet consectetur adipiscing elit sodales congue, mattis mus suspendisse risus laoreet placerat commodo facilisis cursus, fusce sagittis malesuada montes semper felis augue ridiculus.
Lorem ipsum elementum pellentesque interdum mattis eleifend aptent quam blandit tempor integer suscipit fringilla etiam, per cursus aenean faucibus hendrerit ac consequat.
suggested image size: 222 by 180 pixels (no height limit)
Lorem ipsum dolor sit amet consectetur adipiscing elit sodales congue, mattis mus suspendisse risus laoreet placerat commodo facilisis cursus, fusce sagittis malesuada.
Lorem ipsum elementum pellentesque interdum mattis eleifend aptent quam blandit tempor integer suscipit fringilla etiam, per cursus aenean.
Lorem ipsum quam fringilla etiam, per cursus aenean faucibus elementum pellentesque interdum mattis eleifend aptent blandit tempor integer suscipit.
Suggested image size: 932 by 700 pixels (no height limit)
Content/Image
Suggested image size: 450 by 360 pixels (no height limit)
Lorem ipsum dolor sit amet consectetur adipiscing elit sodales congue.
Image/Content
Suggested image size: 600 by 476 pixels (no height limit)
Parturient justo dui neque posuere nunc, proin imperdiet sociosqu nulla, tristique molestie magnis hac.
Content/Image
Suggested image size: 312 by 250 pixels (no height limit)
Elementum pellentesque interdum mattis eleifend aptent quam blandit tempor integer suscipit fringilla.
image size: 150 by 145 pixels
image size: 222 by 180 pixels
image size: 720 by 540 pixels (no height limit)
Aptent quam blandit tempor integer suscipit fringilla proin imperdiet sociosqu nulla, tristique molestie magnis hac.
image size: 294 by 150 pixels
image size: 250 by 200 pixels
image size: 440 by 200 pixels
image size: 130 by 130 pixels
image size: 1080 by 1080 pixels
