Styles

Styles

Styles

Styles

Styles
Styles
Default Card
Primary Card
Primary Card

Lorem ipsum dolor sit amet, consectetur consectetur adipiscing elit. Duis erat mi, pulvinar nec maximus id, fermentum sit amet enim. Sed sagittis elit vitae nisi venenatis, eget semper urna placerat. Proin dignissim elit in commodo gravida. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed id purus at libero euismod ullamcorper. In elit nulla, dapibus facilisis vestibulum vel, rhoncus vitae lectus. Quisque gravida, mi nec congue sodales, diam nulla cursus nibh, id interdum justo felis eget tellus. Proin diam quam, pharetra sed ante ut, consequat consectetur mauris.

Standard Button Variants

Large Button Variants

Small Button Variants

Inverse Standard Button Variants

Inverse Large Button Variants

Inverse Small Button Variants



TT: Styles Page below



H1 Text should render to - 67px

H2 Text lorem ipsum should render to - 50px

H3 Text lorem ipsum should render to - 38px

H4 Text lorem ipsum should render to - 28px

H5 Text lorem ipsum should render to - 21px
H6 Text lorem ipsum should render to - 16px

P "uk-text-large" lorem ipsum should render to - 21px

P "uk-text-muted" lorem ipsum should render to - 16px

P - Base size should render to - 16px

P "uk-text-small" lorem ipsum should render to - 14px


Color classes generated in "mixins.scss" using variables lists "$mp-colors" and "mp-color-names" from variables.scss

H3 mp-color-primary Text lorem ipsum

H3 mp-color-secondary Text lorem ipsum

H3 mp-color-tertiary Text lorem ipsum


Lead and Meta

Uk-text-lead Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

Regular "p" tag Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Uk-text-meta Written by Super User on . Posted in Blog
And wrapping into the next line.

Large and Small

Uk-text-large Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

Regular "p" tag Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Uk-text-small Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

Style

  • text-light
  • text-lighter
  • text-normal
  • text-bolder
  • text-bold
  • text-italic
  • text-lowercase
  • text-uppercase
  • text-capitalize

Colors

Background

Styles

"a tag" uk-button

"a tag" uk-button-default

a tag uk-button-primary

a tag uk-button-secondary

a tag uk-button-danger

Link

Buttons Inverse - parent class "uk-light" and "uk-background-secondary"

Styles

"a tag" uk-button

"a tag" uk-button-default

a tag uk-button-primary

a tag uk-button-secondary

a tag uk-button-danger

Text

Tag "a" uk-button uk-button-text

Link

Size

a tag uk-button-default uk-button-small

Link

Group

Link
Link
Link
Link
Link
Link
Link
Link
Link
Link
Link
Link

CTAs

Liquid error (sections/styles-page.liquid line 439): Could not find asset snippets/mp-tile-cta.liquid

CTAs inverse

Liquid error (sections/styles-page.liquid line 447): Could not find asset snippets/mp-tile-cta.liquid

Group with Drop

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.