Card Styles

Card styles are based off of cascaded properties defined via CSS classnames. Card size, padding, etc are all defined through these names. Examples below list the configured names used. Like all other elements, applicable colors are determined by the current department, and this can also be overridden by using the page ‘Department’ taxonomy, or by applying the .department-{hksb or hknc} class to the element’s parent. Example: Toggle HKSB Department

Small (Default)

Lorem ipsum

Card style used: Card – Additionally, heading has the no-margin-top class, and this paragraph has the no-margin-bottom class.

Lorem ipsum

Card style used: Card – Additionally, heading has the no-margin-top class, and this paragraph has the no-margin-bottom class.

Lorem ipsum

Card style used: Card – Additionally, heading has the no-margin-top class, and this paragraph has the no-margin-bottom class.

Large

Lorem ipsum

Card style used: Card (Large) – Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.

Lorem ipsum

Card style used: Card (Large) – Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.

Icon

Lorem ipsum

Card style used: Card w/Icon – Icon not shown here, but it can be managed with standard page builder tools.

Lorem ipsum

Card style used: Card w/Icon – the ‘Icon’ style is all about the difference in border & margins. Otherwise, it’s nearly the same.

Simple Rounded

Lorem Ipsum

The Simple Rounded style is used in columns where a simple background color is required with rounded edges. By default, it has no inner padding, so elements inside it go edge-to-edge unless wrapped in a group or columns.

Lorem Ipsum

It can use any background and foreground color as needed. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod.

Rounded edges can also be applied to entire groups using the ‘Rounded Edges’ style on the group as shown here.

Post Card

This is a Linked Heading

Card style used: Post Card – The post card is a basic card variant used in many posts types. The default card has a slight padding of 18px which may need to be extended based on post type. Override these properties in the post type CSS itself, not _cards.scss. See templates/_blog.scss for an example

This is also a Linked Heading

Card style used: Post Card – The post card is a basic card variant used in many posts types. The default card has a slight padding of 18px which may need to be extended based on post type. Override these properties in the post type CSS itself, not _cards.scss. See templates/_blog.scss for an example

Card style used: Post Card (Shadowed) – a variant of the post card that always shows its shadow – not just on hover

Card style used: Post Card (Shadowed) – a variant of the post card that always shows its shadow – not just on hover

Card style used: Post Card (Shadowed) – a variant of the post card that always shows its shadow – not just on hover

Event Card

Lorem ipsum

Card style used: Event Card – The event card is a simple variant with default padding, rounded edges, and no hover state. Additionally, default styles for link fill and other card defaults are not propagated to the event card. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Idque Caesaris facere voluntate liceret: sese habere. Quam diu etiam furor iste tuus nos eludet?

Card Examples

Eyebrow Text

Heading w/Link

Card style used: Card (Large) – The heading above is structurally an H5, but this example has the h2 class applied to make the font size the same size as earlier headings. The link inside this heading automatically expands to the full size of the card for accessibility. Cards such as this should only have a single link for this reason.

Eyebrow Text

The heading above has the no-arrow-link class applied to hide the link arrow normally present on the heading upon hover. Just in case we need it.

Links Fill Cards

Card style used: Card (Large) – The link within this paragraph will fill this entire card. Again, there can only be one link like this per card, whether it’s in this content, an image, or the heading.

Sample Blog Cards

The group shown here uses the blog-post-row CSS class to apply additional styles to existing card styles. See templates/_blog.scss for an example.

Containers

Dark blue background flourish. This should show the ‘H’ flourish as a large and slightly lightened version of the ‘Dark Navy’ color. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Idque Caesaris facere voluntate liceret: sese habere. Quam diu etiam furor iste tuus nos eludet? Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Idque Caesaris facere voluntate liceret: sese habere. Quam diu etiam furor iste tuus nos eludet. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Cum ceteris in veneratione tui montes, nascetur mus. Etiam habebis sem dicantur magna mollis euismod. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Inmensae subtilitatis, obscuris et malesuada fames. Morbi fringilla convallis sapien, id pulvinar odio volutpat. Ut enim ad minim veniam, quis nostrud exercitation. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Magna pars studiorum, prodita quaerimus. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Quisque ut dolor gravida, placerat libero vel, euismod.

HKS white background flourish. This should show the ‘H’ flourish as a smaller background element in the ‘HKS Blue 4’ color. Additionally, this group will automatically have the rounded edges and box shadow as default, and the color of the background ‘H’ is determined by the page ‘Department’ taxonomy. Toggle the HKBS Department to preview.

This flourish can also be added to columns too! This seemed necessary because we have a large amount of same-height column patterns, which prevented this from being possible with the group type alone. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Magna pars studiorum, prodita quaerimus. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Quisque ut dolor gravida, placerat libero vel, euismod.

This flourish can also be added to columns too! Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Magna pars studiorum, prodita quaerimus. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Quisque ut dolor gravida, placerat libero vel, euismod.