All Components

Two column layout orc-l-page-layout--two-column

Two column wide layout orc-l-page-layout orc-l-page-layout--two-column-wide

Two column fixed orc-l-page-layout orc-l-page-layout--two-column-fixed

Layout container orc-l-container

Layout container med cap orc-l-container orc-l-container--med-cap

Line-length container orc-l-linelength-container

2-up grid orc-l-grid orc-l-grid--2up

2-up grid no gap orc-l-grid orc-l-grid--2up orc-l-grid--no-gap

2-up grid description

2-up grid small gap orc-l-grid orc-l-grid--2up orc-l-grid--small-gap

2-up grid description

2-up grid med gap orc-l-grid orc-l-grid--2up orc-l-grid--med-gap

2-up grid description

3-up grid orc-l-grid orc-l-grid--3up

3-up grid no gap orc-l-grid orc-l-grid--3up orc-l-grid--no-gap

3-up grid description

3-up grid small gap orc-l-grid orc-l-grid--3up orc-l-grid--small-gap

3-up grid description

3-up grid med gap orc-l-grid orc-l-grid--3up orc-l-grid--med-gap

3-up grid description

Accordion orc-c-accordion

Default alert orc-c-alert

A 1- or 2-sentence message of warning, error, success, or information for the user.

Error alert orc-c-alert--error

Applies a reddish background and error icon.

Warning alert orc-c-alert--warning

Applies a yellow background and warning icon.

Success alert orc-c-alert--success

Applies a green background and checkmark icon.

Avatar block list orc-c-avatar-block-list orc-l-grid--3up

A collection of [avatar blocks](/components/blocks-and-cards/avatar-block/) (visual business cards).

Default avatar block orc-c-avatar-block

A visual business card with a person's key details, including their picture, phone number, and email address.

Dark avatar block orc-c-avatar-block--dark

Applies a dark background and lightens the text.

Default badge orc-c-badge

A small label, usually indicating tier status.

Small badge orc-c-badge--small

Shrinks the size of the default badge.

Yellow badge orc-c-badge--yellow

Applies a yellow background to the badge.

Velvet badge orc-c-badge--velvet

Changes the badgestyling to present the Velvet tier.

Sterling badge orc-c-badge--sterling

Changes the badge styling to represent the Sterling tier.

Gold badge orc-c-badge--gold

Changes the badge styling to represent the Gold tier.

Platinum badge orc-c-badge--platinum

Changes the badge styling to represent the Platinum tier.

Default banner orc-c-banner

A horizontal strip identifying the Autograph Collection.

Default booking widget orc-c-booking-widget

An interface for letting guests choose dates and book rooms

Default breadcrumbs orc-c-breadcrumbs

A linked list indicating the hierarchy of pages within a section, providing a way for users to navigate back.

Default button group orc-c-btn-group

Two buttons that offer the user two separate calls to action.

Vertical button group orc-c-btn-group--vertical

Stacks the two buttons vertically and centers them horizontally.

Centered button group orc-c-btn-group--center

Horizontally centers the buttons while keeping them stacked side by side.

Default button orc-c-btn

The primary way to perform actions in an Orchid site or app.

Small button orc-c-btn--small

Decreases the button and text size.

Centered button orc-c-btn--center

Horizontally centers the button.

Icon before text button

Places an + icon to the left of the button text.

Icon after text button

Places an + icon to the right of the button text.

Icon only button

Button description

Purple button orc-c-btn--purple

Button description

Dark gray button orc-c-btn--dark-gray

Applies a dark gray background to the button.

White button orc-c-btn--white

Applies a white background to the button.

Bare button orc-c-btn--bare

Removes any background or border unless the button is hovered over.

Text button orc-c-btn--text

Removes any text style, background image, border, or padding.

Loading button is-loading

Indicates that the action is loading.

Card list orc-c-card-list orc-l-grid--3up

A collection of [cards](/components/blocks-and-cards/card/) (typically containing summary information).

Default card orc-c-card

A block consisting of an image and text in a header, body, and footer format

Breaking card orc-c-card--break

This card displays horizontally on larger screens.

Lined card orc-c-card--lined

A card with a line underneath.

Card Fill Space orc-c-card--fill-space

Use when you want all cards to become the same height as the tallest card in the row.

Dark card orc-c-card--dark

A card on a dark background.

Picture card orc-c-card--picture orc-c-card--align-left

A card where an image is the background with a text overlay.

Vertical picture card orc-c-card--picture-vertical

A card where a vertically oriented image is the background with a text overlay.

No padding card orc-c-card--no-padding

A card without padding.

Padded card orc-c-card--padded

A card with padding.

Gradient card orc-c-card--picture orc-c-card--gradient orc-c-card--align-left

A card with a gradient on top to create proper contrast for text.

Reversed card orc-c-card--break orc-c-card--reversed

Flip the typical card layout; this one has image on the left and text on the right.

Large card orc-c-card--large

A super-sized version of a card.

Align left card orc-c-card--align-left

A card with all text aligned left (as opposed to the default center alignment on text).

Date card orc-c-card--date

This card contains a date block within it.

Medium text card orc-c-card--med-text

A card with slightly larger body copy than the default card.

Duplicate card orc-c-card

An offer card that contains messaging that there are duplicates of this offer.

Limited flag card orc-c-card

An offer card that contains messaging that this offer has a limit.

No redemption card orc-c-card

An offer card that contains messaging to call the Identity desk.

Pool card orc-c-card

An offer card that displays a pool offer.

Short choice card orc-c-card

An offer card that displays a short choice for redemption.

Tier card orc-c-card

An offer card only meant for specific reward tiers.

Default checkbox field orc-c-field

An intuitive field that lets users turn controls on or off.

Checkbox field error has-error

Lets the user know that their selection can't be registered in our system.

Checkbox field valid is-valid

Lets the user know that their selection is valid and was registered.

Disabled checkbox field is-disabled

Shows the user that they can't interact with the checkbox.

Background black orc-u-background-black

Colors description

Text color brand purple orc-u-color-brand-purple

Colors description

Text color error orc-u-color-success

Colors description

Text color tier sterling orc-u-color-tier-sterling

Colors description

Text color tier gold orc-u-color-tier-gold

Colors description

Text color tier platinum orc-u-color-tier-platinum

Colors description

Default contact form orc-c-form

Send a message to a specific person or group

Default counter orc-c-field orc-c-field--counter

A way to let users increase a value one at a time.

Date block list orc-c-date-block-list

A collection of [date blocks](/components/blocks-and-cards/date-block/) (calendar event details).

Default date block orc-c-date-block

All the details related to a calendar event, including the date, title, and a description.

Dark date block orc-c-date-block--dark

Replaces the standard white background with a dark background.

Date range orc-c-field orc-c-field--inline orc-c-field--small

Allows the user to select a date.

Display block orc-u-display-block

Display description

Content is hidden orc-u-is-hidden

Display description

Content is vishidden orc-u-is-vishidden

Display description

Content is hidden xl orc-u-is-hidden-xl

Display description

Content is visible large orc-u-is-visible-large

Display description

Content is visible xl orc-u-is-visible-xl

Display description

Expanding value pair orc-c-expanding-value-pair

Create additional paired fields.

Fancy carousel orc-c-carousel orc-c-carousel--fancy

A stylized slideshow that cycles through images upon click.

Full height fancy carousel orc-c-carousel orc-c-carousel--fancy orc-c-carousel--full-height

Expands the content of the carousel section to fit the height of the viewport.

Tinted fancy carousel orc-c-carousel orc-c-carousel--fancy orc-c-carousel--tint

Applies a slight tint at the edges of the images in the carousel.

Default footer nav orc-c-footer-nav

The site's lowest-priority navigation, placed at the foot of each page.

Default footer orc-c-footer

The Cosmopolitan logo and functional links displayed at the bottom of every page.

Default form orc-c-form

Allow users to enter and submit data.

Default group dining form orc-c-form orc-c-form--group

A contact information input form for users reserving tables for 13 or more.

Default header orc-c-header

The uppermost part of the page, containing the logo and site-wide navigation.

Default hero orc-c-hero

A large, prominently placed banner with both image and text that can also include a button to drive traffic.

Hero background top orc-c-hero--bg-top

This aligns the background image along the top of the hero.

Hero background right orc-c-hero--bg-right

This aligns the background image along the right of the hero.

Hero background bottom orc-c-hero--bg-bottom

This variant places the background image along the bottom of the hero.

Hero background left orc-c-hero--bg-left

This variant places the background image along the left side of the hero.

Hero full height orc-c-hero--full height

Gives the hero a height the same size of the viewport.

Hero tint orc-c-hero--tint

Overlays the image with a slight gray tint.

Hero text top center orc-c-hero--text-top-center

This centers the text toward the top of the image.

Hero text top right orc-c-hero--text-top-right

Right-justifies the text toward the top of the image.

Hero text bottom right orc-c-hero--text-bottom-right

Right-justifies the text toward the bottom of the image.

Hero text bottom center orc-c-hero--text-bottom-center

Center-justifies the text toward the bottom of the image.

Hero text bottom left orc-c-hero--text-bottom-left

Left-justifies the text toward the bottom of the image.

Hero text center left orc-c-hero--text-center-left

Left-justifies the text at the center of the image.

Hero text center orc-c-hero--text-center

Places the text at the absolute center of the image.

Hero text center right orc-c-hero--text-center-right

Right-justifies the text at the center of the image.

Horizontal card list orc-c-horizontal-card-list

Portrait-style cards, designed to be displayed in a row.

Default horizontal list orc-c-horizontal-list

Multiple elemnts displayed inline, separated by bullets.

Light horizontal list orc-c-horizontal-list--light

Lightens the text color within the horizontal list.

Centered horizontal list orc-c-horizontal-list--center

Centers the items within the list.

Default icon list orc-c-icon-list

Icons displayed side by side.

Default card orc-c-card

Card description

Inline checkbox orc-c-input-group

Turn a single value on and off.

Default link list orc-c-link-list

A vertical collection of links.

2up link list orc-c-link-list--2up

Lays out the list to be 2 items across.

Bare link list orc-c-link-list--bare

Removes the underlines from the default link list.

Purple link list orc-c-link-list--purple

Changes the text color to purple.

Bold link list orc-c-link-list--bold

Changes the font weight to bold.

List list orc-c-list-list

A collection of lists, as many lists of as many items as you need.

2up List list orc-c-list-list--2up

Displays nested lists 2 across when there is enough space.

Default list orc-c-list

A single list, with as many items as you need.

White list orc-c-list--white

Changes the text color to white.

Ordered list orc-c-list--ordered

Adds a number in front of each item.

Lined list orc-c-list--lined

Applies top and bottom padding and a bottom border to each list item.

Cosmopolitan logo orc-c-logo

Code for embedding The Cosmopolitan logo on any of our digital properties.

Purple Cosmopolitan logo orc-c-logo--purple

Our logo with purple text, for display on white backgrounds.

Media block list orc-c-media-block-list

A vertically stacked collection of [media blocks](/components/blocks-and-cards/media-block/) (image, headline, and descriptive text).

Default media block orc-c-media-block

An effiicient use of image, headline, and descriptive text to promote and link to content.

Dark media block orc-c-media-block--dark

Places the content overtap a dark background.

Lined media block orc-c-media-block--lined

Adds a line beneath the media block for visual separation from other content.

Default page header orc-c-page-header

The title and description used to headline a page.

Page header align left orc-c-page-header--align-left

Aligns the text to the left, instead of centered by default.

Page header condensed orc-c-page-header--condensed

Applies the condensed font family to the page header title.

Page header fancy orc-c-page-header--fancy

Changes the font weight of the page header title to bold and the description to a light gray.

Page header plain description orc-c-page-header--plain-desc

Sets the description to roman and light gray.

Gold page header orc-c-page-header--gold

Changes the page header title text color to gold.

Thick lined bottom page header orc-c-page-header--lined-bottom-thick

Adds a thick bottom border to the page header.

White page header orc-c-page-header--white

Changes the page header text to white.

Position relative orc-u-position-relative

Position description

Position static orc-u-position-static

Position description

Default primary nav orc-c-primary-nav

The main navigation for The Cosmopolitan site, visible at the top of the screen.

Primary nav megamenu orc-c-primary-nav--megamenu

The main navigation for The Cosmopolitan site that contains a megamenu on larger screens.

Default profile block orc-c-profile-block

A prominent display of account information for logged-in Identity members.

No progress profile block orc-c-profile-block--no-progress

A variant for Platinum members whose activities do not accrue tier points.

Sterling profile block orc-c-profile-block--sterling

Styles the background and contents to represent the Sterling tier.

Gold profile block orc-c-profile-block--gold

Styles the background and contents to represent the Gold tier.

Platinum profile block orc-c-profile-block--platinum

Styles the background and contents to represent the Velvet tier.

Default profile form orc-c-form orc-c-form--profile

Combines several other components into a state for users inputting and managing their profile data.

Default pullquote orc-c-pullquote

A quotation from a person or text that is enlargened for stylistic effect on the page.

Default radio field orc-c-field

A predefined set of mutually exclusive options, requiring the user to choose just one.

Radio field error has-error

Shows that the radio field has an error.

Radio field valid is-valid

Shows that the selection was valid and registered.

Disabled radio field is-disabled

Shows the user that they can't interact with the radio field.

Default room preference form orc-c-form orc-c-form--room

A stylized series of radio buttons for selecting room preferences.

Default section header orc-c-section-header

Enlargened text that headlines a section of the page.

Section header align left orc-c-section-header--align-left

Left-justifies the section header and all content within it.

Section header condensed orc-c-section-header--condensed

Condenses the font family of the section title.

Lined section header orc-c-section-header--lined

Adds a line to the left and right of the section header.

Padded section header orc-c-section-header--padded

Adds more top and bottom padding to the section header.

White section header orc-c-section-header--white

Changes the section header text to white.

Section orc-c-section

A generic container that identifies a major section of a page.

Centered section orc-c-section--centered

Centers the content within the section.

Netting section orc-c-section--netting

Applies a netting background image to the top of the section.

Purple netting section orc-c-section--purple-netting

Applies a purple background, and a netting image to the top of the section

Purple section orc-c-section--purple

Applies a purple background to the section.

Split section orc-c-section--split

On larger screens, the section header responsively shifts to the left of the rest of the content.

White section orc-c-section--white

Applies a white background to the section.

Default select field orc-c-field

A dropdown, providing the user with options to choose from.

Select field error has-error

Lets the user know that their selection can't be registered in our system.

Select field valid is-valid

Lets the user know that their selection is valid and was registered.

Disabled select field is-disabled

Shows that user can't interact with the checkbox.

Show more orc-c-show-more

Initially truncates content and expands it to show the full area on tap.

Default social nav orc-c-social-nav

Icons for The Cosmopolitan's accounts across social networks.

Default social share orc-c-social-share

Links to share The Cosmopolitan content on Facebook, Twitter, and Pinterest.

Margin top none orc-u-margin-top-none

Margin description

Margin top small orc-u-margin-top-small

Margin description

Margin top orc-u-margin-top

Margin description

Margin top large orc-u-margin-top-large

Margin description

Margin right none orc-u-margin-right-none

Margin description

Margin right small orc-u-margin-right-small

Margin description

Margin right orc-u-margin-right

Margin description

Margin right large orc-u-margin-right-large

Margin description

Margin bottom none orc-u-marginbottomp-none

Margin description

Margin bottom small orc-u-margin-bottom-small

Margin description

Margin bottom orc-u-margin-bottom

Margin description

Margin bottom large orc-u-margin-bottom-large

Margin description

Margin left none orc-u-margin-left-none

Margin description

Margin left small orc-u-margin-left-small

Margin description

Margin left orc-u-margin-left

Margin description

Margin left large orc-u-margin-left-large

Margin description

Padding none orc-u-padding-none

Padding description

Padding small orc-u-padding-small

Padding description

Padding orc-u-padding

Padding description

Padding large orc-u-padding-large

Padding description

Padding top none orc-u-padding-top-none

Padding description

Padding top small orc-u-padding-top-small

Padding description

Padding top orc-u-padding-top

Padding description

Padding top large orc-u-padding-top-large

Padding description

Padding bottom none orc-u-padding-bottom-none

Padding description

Padding bottom small orc-u-padding-bottom-small

Padding description

Padding bottom orc-u-padding-bottom

Padding description

Padding bottom large orc-u-padding-bottom-large

Padding description

Split block list orc-c-split-block-list

A vertically stacked collection of [split blocks](/components/blocks-and-cards/split-block/) (two side-by-side blocks).

Default split block orc-c-split-block

A group of two side-by-side blocks split by a divider, used to compare or juxtapose two elements.

Split passage list orc-c-split-passage-list

Long-form content with related metadata.

Split text list orc-c-split-text-list

A vertically stacked collection of [split text blocks](/components/blocks-and-cards/split-text/) (two side-by-side text elements).

Lined split text list orc-c-split-text-list--lined

Adds bottom borders beneath each list item.

Default stacked icon list orc-c-stacked-icon-list

A vertical list of text with correlating icons.

Stripe list orc-c-stripe-list

A vertically stacked collection of [stripes](/components/blocks-and-cards/stripe/) (text unit that displays account activity).

Default stripe orc-c-stripe

A unit of text, typically used to display account activity.

Large stripe orc-c-stripe--large

This version increases the padding and text size within the stripe.

Subtle stripe orc-c-stripe--subtle

This lightens the text color to show an inactive state.

Velvet stripe orc-c-stripe--velvet

Adds a background color and styling to represent the Velvet Identity tier.

Sterling stripe orc-c-stripe--sterling

Adds a background color and styling to represent the Sterling Identity tier.

Gold stripe orc-c-stripe--gold

Adds a background color and styling to represent the Gold Identity tier.

Platinum stripe orc-c-stripe--platinum

Adds a background color and styling to represent the Platinum Identity tier.

Default subsection header orc-c-subsection-header

Text that is slightly smaller than a section header to indicate a subsection on a page.

Default table orc-c-table

A neat presentation of data, whether numbers or (very) short-form text.

Default tabs orc-c-tabs

A collection of content where one segment is shown at a time.

Text block list orc-c-text-block-list

A collection of [text blocks](/components/blocks-and-cards/text-block/) (text unit with title, description, and kicker).

Striped text block list orc-c-text-block-list--striped

Gives a striped appearance to the list items.

Default text block orc-c-text-block

A text unit consisting of a title, description, and kicker.

Small text block orc-c-text-block--small

Reduces the padding and text size within the component.

Bare text block orc-c-text-block--bare

Removes padding from around the component.

Dark text block orc-c-text-block--dark

Lightens the text and applies a dark background.

Centered text block orc-c-text-block--center

Center-justifies all text.

Default text field orc-c-field

A single-line empty form field in which the user can input any text.

Text field error has-error

Lets the user know that their input text is invalid and can't be registered in our system.

Text field valid is-valid

Lets the user know that their input text is valid and was registered.

Disabled text field is-disabled

Shows that the user can't interact with the text field.

Default text passage orc-c-text-passage

A passage of text, typically seen in articles and blog posts, that may include various components.

Lined bottom thick text passage orc-c-text-passage--lined-bottom-thick

Applies a thick bottom border on the text passage.

Lined top text passage orc-c-text-passage--lined-top

Adds a border to the top of the text passage.

Lined bottom text passage orc-c-text-passage--lined-bottom

Applies a bottom border to the text passage.

Lined text passage orc-c-text-passage--lined

Applies both top and bottom borders to the text passage.

Tiny text passage orc-c-text-passage--tiny

Shrinks the text to a tiny font size.

Small text passage orc-c-text-passage--small

Shrinks the text to a small font size.

Medium 2 text passage orc-c-text-passage--med-2

Increases the font size to medium.

White text passage orc-c-text-passage--white

Changes the color of the text to white.

Text align center orc-u-text-align-center

Text description

Text align right orc-u-text-align-right

Text description

Text transform uppercase orc-u-text-uppercase

Text description

Default textarea field orc-c-field

A multiple-line empty form field in which the user can input lengthy text.

Textarea field error has-error

Lets the user know that their input text is invalid and can't be registered in our system.

Textarea field valid is-valid

Lets the user know that their input text is valid and was registered.

Disabled textarea field is-disabled

Shows that the user can't interact with the text field.

Tile list orc-c-tile-list l-grid--3up

A collection of [tiles](/components/blocks-and-cards/tile/) (independent units of content).

Default tile orc-c-tile

An independent unit of content, typically displayed with others like it.

Velvet tile orc-c-tile--velvet

Applies a background and text style to represent the Velvet Identity tier.

Sterling tile orc-c-tile--sterling

Applies a background and text style to represent the Sterling Identity tier.

Gold tile orc-c-tile--gold

Applies a background and text style to represent the Gold Identity tier.

Platinum tile orc-c-tile--platinum

Applies a background and text style to represent the Platinum Identity tier.

Centered tile orc-c-tile--center

Center-justifies all content, including imagery and text.

Dark tile orc-c-tile--dark

Applies a dark background and lightens the text.

Default toggle dropdown orc-c-toggle-dropdown

A trigger that opens a vertical toggle menu that acts as a custom select menu.

Default toggle orc-c-field orc-c-field--toggle

Quickly switch between two possible states

Toolbar orc-c-toolbar

Content and actions related to the current screen. They are always placed side by side.

Absolutely positioned toolbar orc-c-toolbar--absolute

Absolutley positions the toolbar items on medium and large screens.

Default tout orc-c-tout

A small call-to-action block, with or without a button.

Black tout orc-c-tout--black

Applies a dark background and lightens the text.

Purple tout orc-c-tout--purple

Applies a dark background with a gold, stylized header and lightened body text.

Default tree nav orc-c-tree-nav

Expandable & collapsible navigation.

Default utility nav orc-c-utility-nav

A secondary portion of the main navigation.

Vertical header orc-c-header orc-c-header--vertical

Activates a vertical sidebar navigation on wide screens and hamburger navigation on small screens.

Video hero orc-c-video-hero

A more cinematic alternative to a traditional hero, employing video instead of static imagery.

Width 25 orc-u-width-25

Width description

Width 50 orc-u-width-50

Width description

Width 75 orc-u-width-75

Width description

Width 100 orc-u-width-100

Width description