Skip to main content

Convivial for GovCMS is an advanced starting point for GovCMS8 sites.

Responsive images

Responsive images are images which are able to adapt to the device they are being shown in. They will change in size depending on the width and resolution of the device. Convivial ships with a wide range of different images and captions which are able to perform well in a variety of situations and devices.

Halves without caption

Praesent quis ultrices velit. Sed dignissim orci tellus, et pulvinar velit efficitur a. Nullam rhoncus a eros eu commodo. Integer vestibulum dictum feugiat. Integer finibus odio sit amet velit laoreet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed iaculis nunc nec nulla eleifend, a viverra nibh sagittis. Donec finibus nisl et nulla scelerisque, a aliquet justo tempor. Curabitur ac augue maximus, fermentum eros nec, elementum eros. Duis pretium ullamcorper arcu, eget tincidunt nibh tincidunt a. Nulla et nisi placerat, consequat mauris ut, laoreet nunc. Nunc dictum nunc rhoncus porta fermentum. Nam tellus nibh, efficitur vitae finibus a, iaculis nec dui. In sed viverra massa. Sed sit amet pharetra velit.

Butterfly on blooming blossom

Quisque eros erat, mollis a turpis et, hendrerit pulvinar elit. Mauris eu sem nec dui consectetur placerat. Ut est erat, porta in eros eu, tincidunt tincidunt ante. Phasellus quam ligula, laoreet a sem vel, accumsan congue urna. Etiam imperdiet tempus erat ut bibendum. Fusce mattis sapien vel dui efficitur accumsan. Integer at sem id quam fermentum dictum. Donec eleifend dolor libero, id bibendum enim accumsan nec. Quisque viverra pharetra eros, a rutrum neque sodales quis. Suspendisse viverra ex eu imperdiet laoreet. Ut aliquam neque in ante lacinia, nec accumsan ipsum facilisis. Nulla facilisi. Suspendisse finibus augue id sodales congue.

Bee on blooming blossom

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et risus mattis, dapibus orci nec, semper nisl. Morbi molestie pharetra tincidunt. Donec ut scelerisque ipsum. Cras semper eros et sollicitudin varius. Curabitur quis dui et arcu aliquam commodo. Ut ac turpis nec odio ornare auctor. Ut et magna et purus placerat luctus et et turpis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et risus mattis, dapibus orci nec, semper nisl. Morbi molestie pharetra tincidunt. Donec ut scelerisque ipsum. Cras semper eros et sollicitudin varius. Curabitur quis dui et arcu aliquam commodo. Ut ac turpis nec odio ornare auctor. Ut et magna et purus placerat luctus et et turpis.  

Bloom blooming

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et risus mattis, dapibus orci nec, semper nisl. Morbi molestie pharetra tincidunt. Donec ut scelerisque ipsum. Cras semper eros et sollicitudin varius. Curabitur quis dui et arcu aliquam commodo. Ut ac turpis nec odio ornare auctor. Ut et magna et purus placerat luctus et et turpis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et risus mattis, dapibus orci nec, semper nisl. Morbi molestie pharetra tincidunt. Donec ut scelerisque ipsum. Cras semper eros et sollicitudin varius. Curabitur quis dui et arcu aliquam commodo. Ut ac turpis nec odio ornare auctor. Ut et magna et purus placerat luctus et et turpis. 

Halves with caption

Praesent quis ultrices velit. Sed dignissim orci tellus, et pulvinar velit efficitur a. Nullam rhoncus a eros eu commodo. Integer vestibulum dictum feugiat. Integer finibus odio sit amet velit laoreet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed iaculis nunc nec nulla eleifend, a viverra nibh sagittis. Donec finibus nisl et nulla scelerisque, a aliquet justo tempor. Curabitur ac augue maximus, fermentum eros nec, elementum eros. Duis pretium ullamcorper arcu, eget tincidunt nibh tincidunt a. Nulla et nisi placerat, consequat mauris ut, laoreet nunc. Nunc dictum nunc rhoncus porta fermentum. Nam tellus nibh, efficitur vitae finibus a, iaculis nec dui. In sed viverra massa. Sed sit amet pharetra velit.

Butterfly on blooming blossom
Half centered with caption

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et risus mattis, dapibus orci nec, semper nisl. Morbi molestie pharetra tincidunt. Donec ut scelerisque ipsum. Cras semper eros et sollicitudin varius. Curabitur quis dui et arcu aliquam commodo. Ut ac turpis nec odio ornare auctor. Ut et magna et purus placerat luctus et et turpis.

Quisque eros erat, mollis a turpis et, hendrerit pulvinar elit. Mauris eu sem nec dui consectetur placerat. Ut est erat, porta in eros eu, tincidunt tincidunt ante. Phasellus quam ligula, laoreet a sem vel, accumsan congue urna. Etiam imperdiet tempus erat ut bibendum. Fusce mattis sapien vel dui efficitur accumsan. Integer at sem id quam fermentum dictum. Donec eleifend dolor libero, id bibendum enim accumsan nec. Quisque viverra pharetra eros, a rutrum neque sodales quis. Suspendisse viverra ex eu imperdiet laoreet. Ut aliquam neque in ante lacinia, nec accumsan ipsum facilisis. Nulla facilisi. Suspendisse finibus augue id sodales congue.

Bee on blooming blossom
Half floated to left with caption

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et risus mattis, dapibus orci nec, semper nisl. Morbi molestie pharetra tincidunt. Donec ut scelerisque ipsum. Cras semper eros et sollicitudin varius. Curabitur quis dui et arcu aliquam commodo. Ut ac turpis nec odio ornare auctor. Ut et magna et purus placerat luctus et et turpis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et risus mattis, dapibus orci nec, semper nisl. Morbi molestie pharetra tincidunt. Donec ut scelerisque ipsum. Cras semper eros et sollicitudin varius. Curabitur quis dui et arcu aliquam commodo. Ut ac turpis nec odio ornare auctor. Ut et magna et purus placerat luctus et et turpis. 

Bloom blooming
Half floated to right with caption

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et risus mattis, dapibus orci nec, semper nisl. Morbi molestie pharetra tincidunt. Donec ut scelerisque ipsum. Cras semper eros et sollicitudin varius. Curabitur quis dui et arcu aliquam commodo. Ut ac turpis nec odio ornare auctor. Ut et magna et purus placerat luctus et et turpis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et risus mattis, dapibus orci nec, semper nisl. Morbi molestie pharetra tincidunt. Donec ut scelerisque ipsum. Cras semper eros et sollicitudin varius. Curabitur quis dui et arcu aliquam commodo. Ut ac turpis nec odio ornare auctor. Ut et magna et purus placerat luctus et et turpis. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et risus mattis, dapibus orci nec, semper nisl. Morbi molestie pharetra tincidunt. Donec ut scelerisque ipsum. Cras semper eros et sollicitudin varius. Curabitur quis dui et arcu aliquam commodo. Ut ac turpis nec odio ornare auctor. Ut et magna et purus placerat luctus et et turpis.

Test images (large, medium, small, tiny) with caption

Integer volutpat blandit ex, et pellentesque purus blandit eget. Praesent facilisis sapien sed eleifend fermentum. Maecenas egestas pretium odio elementum congue. Cras varius ante nibh. Phasellus pellentesque massa ut leo porta, vitae varius nulla fermentum. Nulla ullamcorper risus ac ullamcorper posuere. Praesent interdum erat dui, ac sagittis orci euismod vel. In a nisi vulputate, tempus turpis non, viverra sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas porta justo, quis ultricies ligula imperdiet vitae. Aliquam erat volutpat. Curabitur sed volutpat ipsum. Vivamus in massa in purus tempus vehicula a at ex. Aliquam vulputate condimentum bibendum.

Tree at the beach
Large with caption

Nulla ac tempus nisl. Praesent quis auctor ex. Sed ultrices vestibulum odio, placerat convallis tortor porta non. Quisque vestibulum risus ante. Duis elementum ligula non lectus aliquet, vel hendrerit nisl molestie. Nulla ac ultrices nibh. Nam sed euismod nunc. Mauris porta tellus lectus, in bibendum felis eleifend ut.

Sed eget nunc quis libero venenatis interdum. Proin efficitur massa vel tortor gravida tristique. Aliquam accumsan fringilla augue, eu sagittis elit scelerisque vel. In congue velit eu nisl laoreet euismod. Aenean elementum nibh leo, nec ullamcorper nunc vulputate at. Nunc orci lectus, consectetur ut maximus eget, efficitur ac dolor. Integer diam elit, ornare sed viverra et, varius ac est.

Arch bridge
Medium with caption

Mauris neque felis, iaculis ut rutrum nec, dictum eu sem. Proin ex eros, iaculis non porta in, consectetur vitae erat. Pellentesque euismod lorem dapibus nibh finibus pellentesque. Donec sagittis luctus ex ut scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam id lorem non nisl pellentesque gravida. Praesent nec molestie ex. Ut sit amet fringilla velit. Suspendisse potenti. Fusce non feugiat magna. Suspendisse ultricies lacinia euismod. Praesent consectetur, purus sit amet imperdiet malesuada, sapien urna lacinia diam, eget sollicitudin nisi purus sit amet lorem. Sed turpis nunc, finibus nec consectetur ut, malesuada at dolor.

Alps
Small with caption

Integer volutpat blandit ex, et pellentesque purus blandit eget. Praesent facilisis sapien sed eleifend fermentum. Maecenas egestas pretium odio elementum congue. Cras varius ante nibh. Phasellus pellentesque massa ut leo porta, vitae varius nulla fermentum. Nulla ullamcorper risus ac ullamcorper posuere. Praesent interdum erat dui, ac sagittis orci euismod vel. In a nisi vulputate, tempus turpis non, viverra sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas porta justo, quis ultricies ligula imperdiet vitae. Aliquam erat volutpat. Curabitur sed volutpat ipsum. Vivamus in massa in purus tempus vehicula a at ex. Aliquam vulputate condimentum bibendum.

Integer volutpat blandit ex, et pellentesque purus blandit eget. Praesent facilisis sapien sed eleifend fermentum. Maecenas egestas pretium odio elementum congue. Cras varius ante nibh. Phasellus pellentesque massa ut leo porta, vitae varius nulla fermentum. Nulla ullamcorper risus ac ullamcorper posuere. Praesent interdum erat dui, ac sagittis orci euismod vel. In a nisi vulputate, tempus turpis non, viverra sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas porta justo, quis ultricies ligula imperdiet vitae. Aliquam erat volutpat. Curabitur sed volutpat ipsum. Vivamus in massa in purus tempus vehicula a at ex. Aliquam vulputate condimentum bibendum.

Leaves
Tiny with caption

Integer volutpat blandit ex, et pellentesque purus blandit eget. Praesent facilisis sapien sed eleifend fermentum. Maecenas egestas pretium odio elementum congue. Cras varius ante nibh. Phasellus pellentesque massa ut leo porta, vitae varius nulla fermentum. Nulla ullamcorper risus ac ullamcorper posuere. Praesent interdum erat dui, ac sagittis orci euismod vel. In a nisi vulputate, tempus turpis non, viverra sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas porta justo, quis ultricies ligula imperdiet vitae. Aliquam erat volutpat. Curabitur sed volutpat ipsum. Vivamus in massa in purus tempus vehicula a at ex. Aliquam vulputate condimentum bibendum

Full

Blooming blur

Integer volutpat blandit ex, et pellentesque purus blandit eget. Praesent facilisis sapien sed eleifend fermentum. Maecenas egestas pretium odio elementum congue. Cras varius ante nibh. Phasellus pellentesque massa ut leo porta, vitae varius nulla fermentum. Nulla ullamcorper risus ac ullamcorper posuere. Praesent interdum erat dui, ac sagittis orci euismod vel. In a nisi vulputate, tempus turpis non, viverra sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas porta justo, quis ultricies ligula imperdiet vitae. Aliquam erat volutpat. Curabitur sed volutpat ipsum. Vivamus in massa in purus tempus vehicula a at ex. Aliquam vulputate condimentum bibendum.

Integer volutpat blandit ex, et pellentesque purus blandit eget. Praesent facilisis sapien sed eleifend fermentum. Maecenas egestas pretium odio elementum congue. Cras varius ante nibh. Phasellus pellentesque massa ut leo porta, vitae varius nulla fermentum. Nulla ullamcorper risus ac ullamcorper posuere. Praesent interdum erat dui, ac sagittis orci euismod vel. In a nisi vulputate, tempus turpis non, viverra sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas porta justo, quis ultricies ligula imperdiet vitae. Aliquam erat volutpat. Curabitur sed volutpat ipsum. Vivamus in massa in purus tempus vehicula a at ex. Aliquam vulputate condimentum bibendum.

Blur bright
Full with caption

Integer volutpat blandit ex, et pellentesque purus blandit eget. Praesent facilisis sapien sed eleifend fermentum. Maecenas egestas pretium odio elementum congue. Cras

varius ante nibh. Phasellus pellentesque massa ut leo porta, vitae varius nulla fermentum. Nulla ullamcorper risus ac ullamcorper posuere. Praesent interdum erat dui, ac sagittis orci euismod vel. In a nisi vulputate, tempus turpis non, viverra sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut egestas porta justo, quis ultricies ligula imperdiet vitae. Aliquam erat volutpat. Curabitur sed volutpat ipsum. Vivamus in massa in purus tempus vehicula a at ex. Aliquam vulputate condimentum bibendum.

Test images (large, medium, small, tiny)

Tree at the beach

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a molestie eros, sit amet pretium nulla. Nulla pulvinar feugiat euismod. Morbi vehicula faucibus consectetur. Suspendisse vitae mi sed lorem ornare sagittis. Integer tempus mattis mauris, vel mattis odio elementum et. Proin laoreet tellus justo, a pellentesque ipsum lobortis id. Phasellus scelerisque in lacus eu scelerisque. Sed gravida lorem ac sodales fermentum. Ut fringilla nibh ac lacus ultrices sollicitudin.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In et ornare nunc, sed mattis elit. Vestibulum a tortor scelerisque, interdum ligula sed, finibus ligula. Mauris pellentesque efficitur felis, et tempus odio tincidunt eu. Vestibulum viverra sapien nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc imperdiet mauris sed purus varius, quis scelerisque lorem sagittis. Integer in lorem at lorem aliquet auctor a id urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed placerat, nibh nec rutrum commodo, elit urna vehicula leo, quis volutpat erat sapien quis purus. Pellentesque in efficitur tellus, non hendrerit lectus.

Aliquam porttitor enim ornare dictum varius. Quisque vel lectus et magna aliquet luctus quis et dui. Donec posuere sed ligula consectetur elementum. Etiam finibus, neque at aliquet mattis, metus lorem dignissim felis, eu vehicula augue ligula eu odio. Aenean varius diam et massa hendrerit dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor dapibus est, posuere malesuada nulla fermentum eu. Vestibulum molestie augue quis malesuada egestas. Integer non lectus et lacus viverra elementum.

Arch bridge

Nam tincidunt urna non mauris porttitor rhoncus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque dapibus, libero a varius interdum, lectus libero faucibus sem, ac vehicula diam nunc vitae leo. Ut a urna diam. Vestibulum et odio lacinia, gravida neque eget, tempor ipsum. Donec non semper nisi. Praesent dictum sed ante ac viverra. Donec pharetra eleifend magna, at ullamcorper odio rutrum condimentum. In enim metus, pretium sit amet lobortis quis, rutrum vitae risus. Nam luctus posuere turpis, id gravida lacus aliquam sed. Sed pulvinar, sem sed ullamcorper porttitor, nulla risus sollicitudin magna, eu egestas libero massa id ipsum.

Suspendisse mattis imperdiet leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus efficitur ut mauris a mollis. Mauris quis lorem massa. Nam nulla ipsum, euismod eu maximus ac, iaculis id urna. Nulla ultrices lobortis lectus, a egestas est dictum ac. Pellentesque vitae nisl sit amet elit porta luctus eget eget tellus. Sed molestie pulvinar lacus, et finibus tortor sagittis ut.

Nam tincidunt urna non mauris porttitor rhoncus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque dapibus, libero a varius interdum, lectus libero faucibus sem, ac vehicula diam nunc vitae leo. Ut a urna diam. Vestibulum et odio lacinia, gravida neque eget, tempor ipsum. Donec non semper nisi. Praesent dictum sed ante ac viverra. Donec pharetra eleifend magna, at ullamcorper odio rutrum condimentum. In enim metus, pretium sit amet lobortis quis, rutrum vitae risus. Nam luctus posuere turpis, id gravida lacus aliquam sed. Sed pulvinar, sem sed ullamcorper porttitor, nulla risus sollicitudin magna, eu egestas libero massa id ipsum.

Alps

Nam tincidunt urna non mauris porttitor rhoncus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque dapibus, libero a varius interdum, lectus libero faucibus sem, ac vehicula diam nunc vitae leo. Ut a urna diam. Vestibulum et odio lacinia, gravida neque eget, tempor ipsum. Donec non semper nisi. Praesent dictum sed ante ac viverra. Donec pharetra eleifend magna, at ullamcorper odio rutrum condimentum. In enim metus, pretium sit amet lobortis quis, rutrum vitae risus. Nam luctus posuere turpis, id gravida lacus aliquam sed. Sed pulvinar, sem sed ullamcorper porttitor, nulla risus sollicitudin magna, eu egestas libero massa id ipsum.

Leaves

Nam tincidunt urna non mauris porttitor rhoncus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque dapibus, libero a varius interdum, lectus libero faucibus sem, ac vehicula diam nunc vitae leo. Ut a urna diam. Vestibulum et odio lacinia, gravida neque eget, tempor ipsum. Donec non semper nisi. Praesent dictum sed ante ac viverra. Donec pharetra eleifend magna, at ullamcorper odio rutrum condimentum. In enim metus, pretium sit amet lobortis quis, rutrum vitae risus. Nam luctus posuere turpis, id gravida lacus aliquam sed. Sed pulvinar, sem sed ullamcorper porttitor, nulla risus sollicitudin magna, eu egestas libero massa id ipsum.