Test Page - Design System | Administration

This is the slider title. It seems to follow the box banner component from design system but adds support for a subtitle.

This is the subtitle

We can use WYSIWYG in the carousel, but not without mishaps like this.

Choose your styles carefully. Would be great to see variants in backgrounds for this overlay box or to be able to set the color of a heading. Also, the indicators might be better spaced 48px or so off the bottom of this card, rather than fixed to the bottom of the section div.

Drupal
This is another slide with a lengthy title that may not break gracefully at all breakpoints.

This is the slides subtitle

It would also be nice to be able to control the width of the ribbon container at the design system breakpoints to control where the ribbon breaks longer titles.

Button One

Button Two

Default Carousel Button
Trying to replicate a design system banner

This is the subtitle

Cras a enim libero.

Duis odio purus, mattis quis augue eget, cursus laoreet nunc. Integer eu mi vitae est dictum tempus. Quisque volutpat, enim et interdum tempor, eros metus accumsan elit, ac interdum augue ipsum sed dolor. Donec nec leo id nisl bibendum suscipit. Nullam ut metus imperdiet, pulvinar nulla sit amet, varius ipsum.

Button One Button Two Button Three

Default Button

Basic components like text and accordions.

H1s aren't available for headings, but could be semantically appropriate if markup is actually using sections.

Testing basic text layout

A block of generic text, set in a 2 column section, with 67/33 split. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non arcu ut sapien aliquam fringilla et eu eros. Etiam vulputate viverra dui vel rutrum. Nulla vitae magna nisl. Praesent bibendum, mauris sit amet auctor eleifend, risus nisi ultrices nisl, sed bibendum nibh risus sit amet enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere ac neque non tincidunt. Quisque ac sagittis ligula. Morbi sed venenatis leo. Cras felis nisl, faucibus at nulla et, consectetur vulputate massa.

Adding an accordion section.

To get the design system look for this, we need to set the default spacing to no spacing (changing from auto).

The answer is the question. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non arcu ut sapien aliquam fringilla et eu eros. Etiam vulputate viverra dui vel rutrum. Nulla vitae magna nisl. Praesent bibendum, mauris sit amet auctor eleifend, risus nisi ultrices nisl, sed bibendum nibh risus sit amet enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere ac neque non tincidunt. Quisque ac sagittis ligula. Morbi sed venenatis leo. Cras felis nisl, faucibus at nulla et, consectetur vulputate massa.

Does it support lists?

Item one
Item two
Item three
Item four

The answer is the question. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non arcu ut sapien aliquam fringilla et eu eros. Etiam vulputate viverra dui vel rutrum. Nulla vitae magna nisl. Praesent bibendum, mauris sit amet auctor eleifend, risus nisi ultrices nisl, sed bibendum nibh risus sit amet enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere ac neque non tincidunt. Quisque ac sagittis ligula. Morbi sed venenatis leo. Cras felis nisl, faucibus at nulla et, consectetur vulputate massa.

Does it support lists?

Item one
Item two
Item three
Item four

The answer is the question. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non arcu ut sapien aliquam fringilla et eu eros. Etiam vulputate viverra dui vel rutrum. Nulla vitae magna nisl. Praesent bibendum, mauris sit amet auctor eleifend, risus nisi ultrices nisl, sed bibendum nibh risus sit amet enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere ac neque non tincidunt. Quisque ac sagittis ligula. Morbi sed venenatis leo. Cras felis nisl, faucibus at nulla et, consectetur vulputate massa.

Does it support lists?

Item one
Item two
Item three
Item four

The answer is the question. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non arcu ut sapien aliquam fringilla et eu eros. Etiam vulputate viverra dui vel rutrum. Nulla vitae magna nisl. Praesent bibendum, mauris sit amet auctor eleifend, risus nisi ultrices nisl, sed bibendum nibh risus sit amet enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean posuere ac neque non tincidunt. Quisque ac sagittis ligula. Morbi sed venenatis leo. Cras felis nisl, faucibus at nulla et, consectetur vulputate massa.

Does it support lists?

Item one
Item two
Item three
Item four

Testing the various banners currently available.

This is a H2 heading.

First attempt to use this in a full width container glitched and I lost the banner. I've run into the content loss bug also when trying to shift the proportions of the columns in a two column layout from 67/33 to 33/67. Something seems off on the line length of this text container. It's too short given the width of its containing div.

Also interesting to observe how exceptionally tall cards to continue to grow outside of the section div without maintaining white space against preceding elements. If this element contains enough text it will hide the preceding section hiding behind this banner/card. Setting the section styles to override auto spacing and adjusting to x-large fixes.

Morbi eu pellentesque ex, consectetur dapibus eros. Proin ex libero, gravida et dui et, vulputate aliquam tellus. Vivamus in vehicula elit. Praesent justo ex, placerat sit amet semper sed, laoreet quis diam. Maecenas mattis, sapien nec sagittis pretium, tortor purus facilisis nulla, non scelerisque sem enim vel mi.

Heading h2 with legacy style

Suspendisse lorem ante, interdum quis est tristique, varius faucibus dolor. Phasellus sed diam at tortor volutpat posuere at blandit urna. Nulla facilisi. In ut rutrum dolor. Quisque vel vulputate nibh. Vestibulum tincidunt erat ex, quis sodales leo suscipit a.

Morbi eu pellentesque ex, consectetur dapibus eros. Proin ex libero, gravida et dui et, vulputate aliquam tellus. Vivamus in vehicula elit. Praesent justo ex, placerat sit amet semper sed, laoreet quis diam. Maecenas mattis, sapien nec sagittis pretium, tortor purus facilisis nulla, non scelerisque sem enim vel mi.

Heading H2 with legacy style

Morbi eu pellentesque ex, consectetur dapibus eros. Proin ex libero, gravida et dui et, vulputate aliquam tellus. Vivamus in vehicula elit. Praesent justo ex, placerat sit amet semper sed, laoreet quis diam. Maecenas mattis, sapien nec sagittis pretium, tortor purus facilisis nulla, non scelerisque sem enim vel mi.

Heading h2

I appreciate the availability of the legacy styles and ability to add buttons without restriction. Suspendisse lorem ante, interdum quis est tristique, varius faucibus dolor. Phasellus sed diam at tortor volutpat posuere at blandit urna. Nulla facilisi. In ut rutrum dolor. Quisque vel vulputate nibh. Vestibulum tincidunt erat ex, quis sodales leo suscipit a.

Button One

Design System

A generic H2 heading

Let's skip the CTA button. Suspendisse lorem ante, interdum quis est tristique, varius faucibus dolor. Phasellus sed diam at tortor volutpat posuere at blandit urna. Nulla facilisi. In ut rutrum dolor. Quisque vel vulputate nibh. Vestibulum tincidunt erat ex, quis sodales leo suscipit a.

This is a blue text banner in a full width container. It's an H3 heading that's rendering at 36px

This is a h2 heading. It's much smaller and not rendering at the right size.

Design System Typography

Text banners have 3 variants:

Blue(default)
Dark blue
Gray

It appears that list styling breaks on these (at least in the editor). Integer fringilla diam a est egestas vestibulum.

Button Test

Design System

This is a dark blue text banner

This is a h2 heading

Text banners have three variants:

Blue(default)
Dark blue
Gray

It appears that list styling breaks on these (at least in the editor). Integer fringilla diam a est egestas vestibulum.

Button Test

Design System

This is a gray text banner

This is a h2 heading

Text banners have three variants:

Blue(default)
Dark blue
Gray

It appears that list styling breaks on these (at least in the editor). Integer fringilla diam a est egestas vestibulum.

Button Test

Design System

This is a blue text banner in a default width container

This is a h2 heading

Text banners have three variants:

Blue(default)
Dark blue
Gray

It appears that list styling breaks on these (at least in the editor). Integer fringilla diam a est egestas vestibulum.

Button Test

Design System

This is a gray text banner in a default width container

This is a h2 heading

Text banners have three variants:

Blue(default)
Dark blue
Gray

It appears that list styling breaks on these (at least in the editor). Integer fringilla diam a est egestas vestibulum.

Button Test

Design System

This is a gray text banner in a default width container

This is a h2 heading

Text banners have three variants:

Blue(default)
Dark blue
Gray

It appears that list styling breaks on these (at least in the editor). Integer fringilla diam a est egestas vestibulum.

Button Test

Design System

A text block with a h2 heading.

Could we have a white variant of the text banner?

Inline media works pretty nicely, scaling to 100% of the parent container. For editing purposes, as well as optimization, it's still best to scale images appropriately - this one is huge in the editor.

Brand System

This is a dark blue text banner in a default width, 2 column container set to a 33/67 split.

This is a h2 heading

Text banners have three variants:

Blue(default)
Dark blue
Gray

It appears that list styling breaks on these (at least in the editor). Integer fringilla diam a est egestas vestibulum.

Button Test

Design System