Bigblue style guide

Heading 1

Heading

Heading 2

Heading

Heading 3

Heading

Heading 4

Heading

Large text Primary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Large text Secondary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Large text TERTIARY

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

BASE TEXT Primary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

BASE TEXT Secondary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Base text Tertiary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Small text Tertiary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

bold Large text Primary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

bold Large text Secondary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

bold BASE TEXT Primary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

bold BASE TEXT Secondary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

bold Small text Tertiary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Unordered list

  • This is a list item
  • This is a list item
  • This is a list item

Ordered list

  1. This is a list item
  2. This is a list item
  3. This is a list item

Paragraphe large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Rich text

What’s a Rich Text What’s a Rich Text element?

What’s a Rich Text What’s a Rich Text element?

Static and dynamic content What’s a Rich What’s a Rich What’s a Rich Text element?

How to customize formatting for each rich What’s a Rich Text element?

How to customize formatting for each rich text What’s a Rich Text element What’s a Rich Text element?
How to customize formatting for each rich text What’s a Rich Text element? What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Caption

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Caption

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system:

Practices for Building — Linear is now open for all. Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

  • First item
  • Second item

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Another text:

  1. First item
  2. Second item

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

bg Text Primary

bg Text secondary

bg text Tertiary

bg Blue

bg White

bg White Secondary

bg White Tertiary

bg Transparency 30

BG Transparency 60

BG Transparency 80

bg Orange

Color

text-black

text-white

text-grey

Alignement

text-left

text-center

text-right

Box Shadow 1

Elevation 1

Box Shadow 3

Elevation 3

Box Shadow 2

Elevation 2

grid

col
col
col
col
col
col
col
col
col
col

grid desktop

col-lg-1
col-lg-11
col-lg-2
col-lg-10
col-lg-3
col-lg-9
col-lg-4
col-lg-8
col-lg-5
col-lg-7
col-lg-6
col-lg-6
col-lg-12

grid Tablet

col-md-1
col-md-11
col-md-2
col-md-10
col-md-3
col-md-9
col-md-4
col-md-8
col-md-5
col-md-7
col-md-6
col-md-6
col-md-12
md-hide
md-no-margin

grid Landscape

col-sm-1
col-sm-11
col-sm-2
col-sm-10
col-sm-3
col-sm-9
col-sm-4
col-sm-8
col-sm-5
col-sm-7
col-sm-6
col-sm-6
col-sm-12
sm-hide
sm-no-margin

grid Mobile

col-xs-1
col-xs-11
col-xs-2
col-xs-10
col-xs-3
col-xs-9
col-xs-4
col-xs-8
col-xs-5
col-xs-7
col-xs-6
col-xs-6
col-xs-12
xs-hide
xs-no-margin

Col left - Col right / row full width

col left
col right

Display : Flex horizontal

flex-horizontal

Display : Flex vertical

flex-vertical

Align start

align-start
align-start
align-start

Align center

align-center
align-center
align-center

Align end

align-end
align-end
align-end

Align stretch

align-stretch
align-stretch
align-stretch

Justify start

justify-start
justify-start

Justify center

justify-center
justify-center

Justify end

justify-end
end

Justify between

justify-between
justify-between

Justify around

justify-around
justify-around

Self align columns

self-start
self-center
self-end

Margin

margin bottom 8

margin bottom 4

margin bottom 3

margin bottom 2

margin bottom 1

margin bottom 0.5

margin bottom 0.2

margin 0

margin top 0.2

margin top 0.5

margin top 1

margin top 2

margin top 3

margin top 4

margin top 8

Padding

padding bottom 8

padding bottom 4

padding bottom 3

padding bottom 2

padding bottom 1

padding bottom 0.5

padding bottom 0.2

padding 0

padding top 0.2

padding top 0.5

padding top 1

padding top 2

padding top 3

padding top 4

padding top 8

Margin

margin left 0.2

margin left 0.5

margin left 1

margin left 2

margin left 4

margin left 8

margin right 0.2

margin right 0.5

margin right 1

margin right 2

margin right 4

margin right 8

Padding

padding left 0.2

padding left 0.5

padding left 1

padding left 2

padding left 4

padding left 8

padding right 0.2

padding right 0.5

padding right 1

padding right 2

padding right 4

padding right 8

margin 1 / 2 / 3 / 4 col

ml-1-col
ml-2-col
ml-3-col
ml-4-col
mr-1-col
mr-2-col
mr-3-col
mr-4-col
ml-1-col

overflow

Overflow-auto

Overflow-hidden

Overflow-scroll