aRes Travel inc Style Guide

Typography

HK Grotesk by Hanken Design Co. is the primary font used for all text; body text, headings, buttons.
There are four font-weights:

  • Regular, 400
  • Semibold, 500
  • Medium, 600
  • Bold, 700

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph text, regular body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lists

  • List item
  • List item
  • List item

Typography Utility Classes

.font-weight-bold → font-weight: bold;
.font-sm → font-size: 13px;

.text-lowercase → Lowercased text.

.text-uppercase → Uppercased text.

.text-capitalize → CapiTaliZed text.

Bold text.

Normal weight text.

Light weight text.

Italic text.

Left aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

Right aligned text on all viewport sizes.

Colors

Primary

Used for buttons, links, icons, and accents

aRes Red
#FF3347
.bg-ares-red
.color-ares-red
Blue
#2F93FA
.bg-blue
.color-blue
Medium Blue
#445CED
.bg-med-blue
.color-med-blue

Blue greys

Used for text and content backgrounds

Dark Grey
#12253D
.bg-dark-grey
.color-dark-grey
Medium Grey
#314B6A
.bg-med-grey
.color-med-grey
Grey
#617692
.bg-grey
.color-grey
Light Grey
#D2DDEC
.bg-light-grey
.color-light-grey
Almost White
#F5F7FA
.bg-almost-white
.color-almost-white
White
#FCFCFC
.bg-white
.color-white

Gradients

Used for backgrounds and accents

Red
.bg-grad-red
Blue
.bg-grad-blue
White
.bg-grad-white

Color Utility Classes

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light (and .bg-dark)

.text-dark

.text-muted

.text-white (and .bg-dark)

Cards

Cards are content containers with varying display options.
Below are our custom card components. Refer to bootstrap documentation (v4) for bootstrap's card markup.

Content and Image Card

This card component (cardContentImage) is a combination of content and a related image displayed inline at full-width. The image can be displayed on the left or right, which is toggled via the imageAlign variable when you embed this component. If you don't set imageAlign to either right or left, it defaults to the right position. The card title, card content, and image can be overridden.

Content and Image Card

This is the cardContentImage component with the image displayed on the left. Cool!

Card Large

This is a large, full-width card with a few configurable options. Like the Content and Image Card, the image for this card can be displayed on the left or right via setting the imageAlign variable when embedding this component. The default is to display on the right. This card also has additional display options; a custom content icon displayed above the card title, and call to action link text. Refer to the cardLarge component for all configurable options.

Read more


This is our card for affiliate and client testimonials. The configurable options include, but are not limited to: affiliate logo, logo container background color, affiliate name, affiliate company, card content, etc. This is the default look of the card. Refer to the cardTestimonial component for all display options.

Stephen C.

Travel Coordinator

Company ABC

Here's another example of the testimonial card with more display options set. A custom badge image can be added which will display in the top left. Also, there may be instances we want to display an image in the top container instead of a logo. In that case, set logoImgClasses to 'card-bg-img' when embedding this component so the image covers the entire container.

Sophie T.

Director of Marketing

Company ABC



This is the horizontal testimonial card, displayed with the logo / image on the left and testimonial content on the right. Refer to the cardTestimonialHorizontal component for all configurable options. It differs from the original cardTestimonial component in some ways.

Sophie T.

Director of Marketing

Company ABC


Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Arrow link
Card title

Card description. This card uses a circle background behind the icon, and bg-transparent utility class to blend in with the content background.

Read more

Card with list

  • This is the card list group component
  • It displays items in a container with a check icon for each list item
  • When embedding this component, place each of your items in a list HTML element
  • It displays by default with a max-width of 45rem
  • You can embed this component and override / include CSS classes for display, such as spacing or color utilities
  • Refer to the cardListGroup component for all configurable options


Card with list group columns

  • This is the card list group column component
  • It displays a card list group with the lists displayed as columns
  • This component is great for making longer lists more legible by placing the list items side by side
  • When embedding this component, there are two blocks to override; cardContentLeft and cardContentRight
  • Place each of your items in a list HTML element
  • The columns break down to one on mobile
  • You can embed this component and override / include CSS classes for display, such as spacing or color utilities
  • Refer to the cardListGroupDivided component for all configurable options


  • Card without list-group-flush
  • (no border)
  • Vestibulum at eros
  • Card with list-group-flush
  • Dapibus ac facilisis in
  • Vestibulum at eros

  • Card with list-group and icons

  • Dapibus ac facilisis in

  • Vestibulum at eros

Card with list group, card-header

Featured
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros

Icons

A combination of font-awesome, feather icons, and custom made icons. All are found in _partials/svgIcons.svg.
By default, all of the icons use currentColor fill, which inherits the color value of the parent element.
Apply utility color classes to the svg element to change icon color

  • icon-arrow-right
  • icon-ads
  • icon-badge
  • icon-be
  • icon-cart
  • icon-chart
  • icon-devices
  • icon-groups icon-groups
  • icon-headphones
  • icon-image icon-image
  • icon-map icon-map
  • icon-messaging
  • icon-package
  • icon-sort
  • icon-tickets
  • icon-tripadvisor
  • icon-arrow-right
  • icon-chevron-right
  • icon-leaf
  • icon-globe
  • icon-question
  • icon-linegraph
  • icon-code
  • icon-images
  • icon-user-lock
  • icon-database
  • icon-check
  • icon-lock
  • icon-commission
  • icon-bullhorn

Example of colored icons using utility classes

  • icon-ads
  • icon-badge
  • icon-be
  • icon-chart
  • icon-sort
  • icon-tickets
  • icon-tripadvisor

Buttons

  • .btn .btn-primary
  • .btn .btn-primary-arrow .btn-arrow
  • .btn .btn-secondary
  • .btn .btn-secondary-arrow .btn-arrow
  • .btn .btn-tertiary
  • .btn .btn-tertiary-arrow .btn-arrow-blue
  • .btn .btn-outline
  • .btn .btn-outline .btn-arrow .btn-outline-arrow
  • .btn .btn-success
  • .btn .btn-danger
  • .btn .btn-warning
  • .btn .btn-info
  • .btn .btn-light
  • .btn .btn-dark
  • .btn .btn-link

Forms and inputs

Text inputs

Checkboxes


Radio buttons


Select boxes

Example invalid custom select feedback

Content Components

.headline-huge component

Used for the homepage and subpages header

Headline huge h1, font size 50px

Headline huge paragraph, font size 22px

Basic headline component

Headline title

Headline paragraph text with .color-grey utility class