o-card base styles

mixins

oCard

@mixin oCard() { ... }

Description

Base card styles

Parameters

None.

Requires

Links

oCardMetaImage

@mixin oCardMetaImage() { ... }

Description

Base styles for meta image element floated to the right and fixed size

Parameters

None.

Requires

Links

oCardTag

@mixin oCardTag() { ... }

Description

Base tag styles

Parameters

None.

Requires

Links

oCardContent

@mixin oCardContent() { ... }

Description

Base styles for content element giving correct order and box-sizing

Parameters

None.

Used by

Links

oCardTimestamp

@mixin oCardTimestamp() { ... }

Description

Base timestamp styles

Parameters

None.

Requires

Links

oCardHeading

@mixin oCardHeading() { ... }

Description

Base heading styles (includes link styles within the element)

Parameters

None.

Requires

Links

oCardStandfirst

@mixin oCardStandfirst() { ... }

Description

Base standfirst text styles

Parameters

None.

Links

oCardImage

@mixin oCardImage() { ... }

Description

Card image styles, also applies top and bottom modifiers

Parameters

None.

Requires

Links

oCardRelatedContent

@mixin oCardRelatedContent() { ... }

Description

Base related content list styles

Parameters

None.

Requires

Links

oCardRelatedContentItem

@mixin oCardRelatedContentItem() { ... }

Description

Base related content item styles, including link styles

Parameters

None.

Requires

Links

oCardImageLeft

@mixin oCardImageLeft() { ... }

Description

Styles for a left aligned image

Parameters

None.

Requires

Used by

Links

oCardImageRight

@mixin oCardImageRight() { ... }

Description

Styles for a right aligned image

Parameters

None.

Requires

Used by

Links

oCardImageTop

@mixin oCardImageTop() { ... }

Description

Styles to force an image to the top of the card

Parameters

None.

Requires

Used by

Links

oCardImageBottom

@mixin oCardImageBottom() { ... }

Description

Styles to force an image to the bottom of the card

Parameters

None.

Requires

Used by

Links

variables

o-card-is-silent

$o-card-is-silent: true !default;

Description

Silent mode

Type

Bool

Links

o-card-output-fonts

$o-card-output-fonts: false !default;

Description

Active mode

Type

Bool

Links

o-card-spacing-unit

$o-card-spacing-unit: 10px;

Description

Size of spacing used throughout the component

Type

{number}

Used by

Links

o-card-image-left-width

$o-card-image-left-width: 40%;

Description

Size of image when left aligned

Type

{number}

Used by

Links

o-card-image-right-width

$o-card-image-right-width: 50%;

Description

Size of image when right aligned

Type

{number}

Used by

Links

o-card-meta-image-size

$o-card-meta-image-size: 60px;

Description

Size of the meta image element

Type

{number}

Used by

Links

o-card theme styles

mixins

oCardThemeStandout

@mixin oCardThemeStandout() { ... }

Description

Stand out card theme styles

Parameters

None.

Links

oCardThemeOpinionTag

@mixin oCardThemeOpinionTag() { ... }

Description

Styles for the o-card__tag element. Sets the colour and typography of an opinion card tag.

Parameters

None.

Links

oCardThemeMetaImageRounded

@mixin oCardThemeMetaImageRounded() { ... }

Description

Styles for rounded meta images. Adds border radius and background colour

Parameters

None.

Links

oCardThemePortrait

@mixin oCardThemePortrait() { ... }

Description

Portrait card theme styles. Modifies the card to a flex column. Resets o-cardimage and o-cardcontent to remove floats and fill the full width of the card

Parameters

None.

Requires

Links

oCardThemeLandscape

@mixin oCardThemeLandscape() { ... }

Description

Landscape card theme styles. Modifies the o-card element to switch to display block and modifies the card__content element if the card has a left aligned image

Parameters

None.

Links