Elements can be aligned left and right within the normal flow of paragraph content using the classes align-left and align-right. Where no specific size is selected, they'll default to size-md at small screens, and size-sm at larger screens width. This is normally fine.

As these elements are floated, always make sure there is enough copy to flow all the way around the element to 'clear' it.

Sizes

Elements can be given a size to restrict their width. Normally you don't need to, by default things will be size-md at small screens, and size-sm at larger screens, but if you want to make something explicitly larger or smaller than its default width at all times, add one of:

Demo

The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.

Staffordshire University is going global with a programme packed full of free events to start the new decade.

It's normally a good idea to delay adding a heading until you've added enough copy to clear a left-aligned figure, else it can look weird.

Right aligned after a heading

Staffordshire University is going global with a programme packed full of free events to start the new decade. The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.

In constrained content column

2020 marks the International Year of the Nurse and Midwife, and Staffordshire University is joining colleagues across the globe to shine a spotlight on the sector. Celebrations kick off with a talk this week by Visiting Professor Ann-Marie Cannaby, Chief Nurse at the Royal Wolverhampton Hospital, at the University’s Centre of Excellence in Healthcare Education, Stafford.Two hundred years may have passed since the birth of Florence Nightingale, but patient care and safety remain the most important influencing factors within the fields of nursing and midwifery. Professor Cannaby will use her keynote presentation to explore curriculum developments.

Staffordshire University is going global with a programme packed full of free events to start the new decade.

It's normally a good idea to delay adding a heading until you've added enough copy to clear a left-aligned figure, else it can look weird.