External pages

External pages are built out of Block objects. less/components/ExternalPage.less provides a number of predefined block styles, which are documented below, for most use cases.

Block

This is the default style of a Block object.

It sets the padding-top and padding-bottom to 64px and the background-color to $white.

To use it, give a div node a class of Block.

Modifiers

Block--type-alternative

This modifier sets the background-color of a Block to $aqua-haze. To use it, give a div node an additional class of Block--type-alternative.

Block--type-dark

This modifier sets the text-align of a Block to center and its background-color to $outer-space.

It sets the margin-bottom of children h2 and h3 nodes to 0

It changes the color of a child h2 node to $white, the color of a child h3 node to 0.8 of $white, and the color of a child p node to 0.6 of $white.

It sets the margin-top of a child Button node to 32px.

To use it, give a div node an additional class of Block--type-dark.

Block--type-footer

This modifier sets the margin-top of children h5 and p nodes to 0 and their margin-bottom to 16px and the margin of children ul nodes to 0 0 32px 0.

To use it, give a div node an additional class of Block--type-footer.

Elements

Block__content-block

This element sets the margin-top of the node to 32px and the margin-bottom of h2 and h3 nodes contained within it to 0.

Block__copyright

This element sets the color of a nodes contained within it to $shuttle-gray.

Element Modifiers

Block__content--center

This modifier sets the text-align of the node to center and the margin of img nodes contained within it to 0 auto.

Block__content--margin-bottom-0

This modifier sets the margin-bottom of h1, h2, h3, h4, h5, and h6 nodes to 0.

Block__content-block--left

This modifier sets the text-align of the node to left.

Block__content-block--top

This modifier sets the margin-top of the node to 0.

BlockContent

Add this class to a Block object to reduce the width of a GridContainer within it to 640px on a desktop and 100% on tablets and smartphones.

BlockGrid

Add this class to a Block object to set the margin-bottom of a p node contained within it to 0.

It sets the margin-top of a ProfilePicture object contained within it to 16px.

BlockHero

This is the default style of a BlockHero object. It sets the padding-top and padding-bottom to 128px, text-align to center, background-position to top, background-size to cover, and its background-repeat to no-repeat.

It sets the margin-bottom of h2, h3 and p nodes to 0, the color of h2 nodes to $white, and the color of h3 nodes to 0.5 of $white.

It sets the margin-top of a Button object contained within it to 32px.