Skip to Main Content

Stamps & Dividers

See all pages: Table of Contents

Graphic Stamp component

The Graphic Stamp component can be used for many purposes. It is embedded as an option in all Grid items, as well as being available on its own.

Keep in mind that the stamp is always absolutely positioned, so its parent container must have a positioning context for it to work as expected.

Options include: padding (for 'or' column treatment), lined horizontal on mobile, and various desktop positions (center, top center, bottom center, top left, top right, bottom left, bottom right). By default the stamp will sit in the bottom center on mobile and the right center on desktop.

Perfect Pair Stamp

This option must be below the tile on mobile and to the right on desktop.
Additionally, it changes in size across resolutions.

Promo Tile

Subtitle

Promo Tile

Subtitle

Promo Tile

Subtitle

Perfect Pair

Promo Tile

Subtitle

'Or' Column Layout

To reproduce this effect, first see the Grid Reference page for a standard Two Column (large left) layout. Then add a Graphic Stamp to the first grid item (in the Grid dialog). Modify the new graphic stamp to use an image ('or' can be found in the images/graphic-stamps folder), set 'Top and Bottom' for padding, and set 'Lined on Mobile' as the variant.

Larger Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in pharetra arcu, non condimentum ante. Vivamus commodo massa dolor, at consectetur est semper vel. Vivamus at orci id purus pellentesque dictum. Donec pulvinar risus sit amet ante tempus dictum. Ut ultrices sapien eget libero vehicula, et interdum nibh accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In pulvinar sodales odio, et accumsan magna finibus vel. Phasellus dictum porttitor mi, eget efficitur augue volutpat in. Duis tempor ipsum massa, vel pulvinar ipsum lacinia vel. Fusce porttitor porta cursus. Ut sed dolor tortor.

Nullam a felis vitae felis porta tincidunt. Aliquam erat volutpat. In hac habitasse platea dictumst. Mauris sit amet leo eget ligula hendrerit scelerisque. In hac habitasse platea dictumst. Duis sed neque magna. Aenean ac fringilla enim. Suspendisse mollis, ligula nec blandit malesuada, eros ante convallis augue, in lobortis ante lectus eget tortor. Vestibulum non accumsan purus, in aliquet metus. Suspendisse eu justo aliquam, efficitur felis non, euismod arcu. Nullam ut arcu id libero consectetur mollis sed sit amet libero. Vestibulum tincidunt condimentum diam non condimentum. Integer elementum orci quis accumsan placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque dapibus felis at rhoncus tempus. Mauris est mi, vehicula a porta vel, fermentum vitae mauris.

Integer porttitor ipsum sed ipsum aliquet, vel scelerisque leo luctus. Morbi facilisis dapibus nisl, et pretium ipsum interdum a. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras lacinia sapien gravida felis dapibus feugiat. Praesent sodales nulla arcu, eu convallis tellus pellentesque nec. Donec gravida tincidunt dui vitae molestie. Aenean dignissim velit lobortis, lobortis diam at, gravida erat. Vivamus sed suscipit tortor. Etiam mollis mollis lacus, eu facilisis tortor. Nam mauris neque, eleifend at dignissim pharetra, placerat id nisi. Sed faucibus pharetra sem, finibus euismod lectus. Aliquam erat volutpat. Etiam efficitur sapien a sollicitudin viverra. In mattis felis id sem iaculis, et imperdiet enim posuere. Nunc ipsum ligula, semper sed nunc quis, tristique feugiat ipsum. Donec quis dui nisl.

Subheading

Aliquam in cursus sem. Sed scelerisque consequat enim, vel egestas augue congue feugiat. In finibus ullamcorper ultricies. Mauris a erat ullamcorper, malesuada neque in, sagittis metus. Maecenas tortor sem, sodales ac porttitor ut, euismod eget tellus. Phasellus lacinia urna vel nisl mattis, in cursus turpis congue. Maecenas faucibus porttitor mauris, eu euismod mi pretium at. Curabitur varius non nisi nec congue. Cras volutpat elit ut nunc pulvinar rutrum.

Mauris viverra volutpat tortor, eget mattis arcu molestie nec. Fusce ut suscipit metus, at commodo magna. Vivamus volutpat dignissim scelerisque. Donec a nulla egestas magna lobortis mattis. Pellentesque luctus sollicitudin magna, quis efficitur mauris mattis in. Praesent vulputate consectetur felis, id imperdiet libero lacinia ut. Quisque magna velit, convallis a nunc quis, maximus suscipit leo. Etiam lacus turpis, scelerisque ut diam at, egestas gravida diam. Aliquam ut aliquam felis. In ac est quis quam faucibus vestibulum consectetur ut enim.

OR

Positioned Stamps

Available positioning options: centered, top left, top right, bottom left, bottom right.
The default will be on the bottom on mobile, and on the right on desktop.

Divider

The divider component can be used with and without text.
You can optionally set a max-width, and set a variant (such as left-alignment).

Some text that will go above our divider component...

divider

Some more text that will go below our divider component.

The divider below this text has a max-width of 300px set.

More text, under a divider with no text.

The divider below this text is set with a max-width of 50% and a left-aligned variant.

left

Some text that will go below our last divider component...