Cards

Article Card

See the Pen Components – Cards: Article Card by Working Solutions (@wsol) on CodePen.

Story Card

See the Pen Components – Cards: Story Card by Working Solutions (@wsol) on CodePen.

Related Stories

See the Pen Components – Cards: Related Stories Card by Working Solutions (@wsol) on CodePen.

Study Card

See the Pen Components – Cards: Study Card by Working Solutions (@wsol) on CodePen.

Gradient Card

Default Gradient Card

The default gradient card defaults to sea-serpent. If a theme is applied to the page, it will take the style of that theme.

See the Pen Components – Cards: Gradient Card by Working Solutions (@wsol) on CodePen.

Sea Serpent

Add class card-sea-serpent to the gradient-card div to apply theme.

See the Pen Components – Cards: Gradient Card Sea Serpent by Working Solutions (@wsol) on CodePen.

Ifrit

Add class card-ifrit to the gradient-card div to apply theme.

See the Pen Components – Cards: Gradient Card Ifrit by Working Solutions (@wsol) on CodePen.

Dragon

Add class card-dragon to the gradient-card div to apply theme.

See the Pen Components – Cards: Gradient Card Dragon by Working Solutions (@wsol) on CodePen.

Sun Wukong

Add class card-sun-wukong to the gradient-card div to apply theme.

See the Pen Components – Cards: Gradient Card Sun Wukong by Working Solutions (@wsol) on CodePen.

Dybbuk

Add class card-dybbuk to the gradient-card div to apply theme.

See the Pen Components – Cards: Gradient Card Dybbuk by Working Solutions (@wsol) on CodePen.

Fae

Add class card-fae to the gradient-card div to apply theme.

See the Pen Components – Cards: Gradient Card Fae by Working Solutions (@wsol) on CodePen.

Nine Tails

Add class card-nine-tails to the gradient-card div to apply theme.

See the Pen Components – Cards: Gradient Card Nine Tails by Working Solutions (@wsol) on CodePen.

Gradient Large Card

Default Gradient Large Card

The default gradient card defaults to sea-serpent. If a theme is applied to the page, it will take the style of that theme.

See the Pen Components – Cards: Gradient Large Card by Working Solutions (@wsol) on CodePen.

Sea Serpent

Add class card-sea-serpent to the gradient-card div to apply theme.

See the Pen Components – Cards: Gradient Large Card Sea Serpent by Working Solutions (@wsol) on CodePen.

Ifrit

Add class card-ifrit to the gradient-card div to apply theme.

See the Pen Components – Cards: Gradient Large Card Ifrit by Working Solutions (@wsol) on CodePen.

Dragon

Add class card-dragon to the gradient-card div to apply theme.

See the Pen Components – Cards: Gradient Large Card Dragon by Working Solutions (@wsol) on CodePen.

Sun Wukong

Add class card-sun-wukong to the gradient-card div to apply theme.

See the Pen Components – Cards: Gradient Large Card Sun Wukong by Working Solutions (@wsol) on CodePen.

Dybbuk

Add class card-dybbuk to the gradient-card div to apply theme.

See the Pen Components – Cards: Gradient Large Card Dybbuk by Working Solutions (@wsol) on CodePen.

Fae

Add class card-fae to the gradient-card div to apply theme.

See the Pen Components – Cards: Gradient Large Card Fae by Working Solutions (@wsol) on CodePen.

Nine Tails

Add class card-nine-tails to the gradient-card div to apply theme.

See the Pen Components – Cards: Gradient Large Card Nine Tails by Working Solutions (@wsol) on CodePen.

Video Card

See the Pen Components – Cards: Video Card by Working Solutions (@wsol) on CodePen.