{"title":"Understand StoreConnect default CSS styles","slug":"default-css-styles","url":"https://support.storeconnect.com/articles/default-css-styles","url_markdown":"https://support.storeconnect.com/articles/default-css-styles.md","subtitle":null,"summary":"Reference for built-in CSS utility classes covering flex, grid, display, width, typography, colors, spacing, borders, and responsive breakpoints available in every StoreConnect store.","type":"Help_Documentation","video_url":"","keywords":"default css styles, css utility classes, css classes reference, flex layout, grid layout, responsive design, spacing classes, typography classes, colour classes, margin padding, display classes, liquid templates","last_modified":"2026-08-21T07:12:35+0000","body_markdown":"StoreConnect stores come with default CSS styles that work as an out-of-the-box framework and you can use in liquid templates, custom Markdown, and HTML code.\n\nFor a more comprehensive guide to styling markdown with CSS, GitLab has a great article on [Markdown Kramdown](https://about.gitlab.com/blog/2016/07/19/markdown-kramdown-tips-and-tricks/#classes-ids-and-attributes) that can help.\n\n## Flex\n\n| Class        | Style                                 |\n|--------------|---------------------------------------|\n| .sc-flex     | display: flex;                        |\n| .sc-flex-row | display: flex;flex-direction: row;    |\n| .sc-flex-col | display: flex;flex-direction: column; |\n\n### Responsive flex classes\n\n| Class               | Small ≥ 576px                         | Medium ≥ 768px       |\n|---------------------|---------------------------------------|----------------------|\n| .sc-flex-row-sm     | display: flex;flex-direction: row;    |                      |\n| .sc-flex-col-to-row | display: flex;flex-direction: column; | flex-direction: row; |\n\n| Class                     | Style                           |\n|---------------------------|---------------------------------|\n| .sc-justify-space-between | justify-content: space-between; |\n| .sc-justify-space-evenly  | justify-content: space-evenly;  |\n| .sc-justify-space-around  | justify-content: space-around;  |\n| .sc-justify-space-center  | justify-content: center;        |\n| .sc-justify-space-start   | justify-content: flex-start;    |\n| .sc-justify-space-end     | justify-content: flex-end;      |\n\n| Class                  | Style                    |\n|------------------------|--------------------------|\n| .sc-align-items-center | align-items: center;     |\n| .sc-align-items-start  | align-items: flex-start; |\n| .sc-align-items-end    | align-items: flex-end;   |\n\n| Class         | Style           |\n|---------------|-----------------|\n| .sc-grow      | flex-grow: 1;   |\n| .sc-no-shrink | flex-shrink: 0; |\n\n## Grid\n\n### Responsive columns\n\n| Class                   | Style                                                          | Medium ≥ 768px                         |\n|-------------------------|----------------------------------------------------------------|----------------------------------------|\n| .sc-one-to-two-column   | display: grid;gap: 20px;grid-template-columns: 1;              | grid-template-columns: repeat(2, 1fr); |\n| .sc-one-to-three-column | display: grid;gap: 20px;grid-template-columns: 1;              | grid-template-columns: repeat(3, 1fr); |\n| .sc-one-to-four-column  | display: grid;gap: 20px;grid-template-columns: 1;              | grid-template-columns: repeat(4, 1fr); |\n| .sc-two-to-four-column  | display: grid;gap: 20px;grid-template-columns: repeat(2, 1fr); | grid-template-columns: repeat(4, 1fr); |\n\n### Fixed columns\n\n| Class                    | Style                                                          |\n|--------------------------|----------------------------------------------------------------|\n| .sc-one-third-two-thirds | display: grid;gap: 20px;grid-template-columns: 1fr 2fr;        |\n| .sc-two-thirds-one-third | display: grid;gap: 20px;grid-template-columns: 2fr 1fr;        |\n| .sc-two-column           | display: grid;gap: 20px;grid-template-columns: 1fr 1fr;        |\n| .sc-three-column         | display: grid;gap: 20px;grid-template-columns: repeat(3, 1fr); |\n| .sc-four-column          | display: grid;gap: 20px;grid-template-columns: repeat(4, 1fr); |\n\n## Display\n\n| Class                    | Style                  |\n|--------------------------|------------------------|\n| .sc-display-inline-block | display: inline-block; |\n| .sc-display-inline       | display: inline;       |\n| .sc-display-block        | display: block;        |\n| .sc-hide                 | display: none;         |\n| .sc-invisble             | display: hidden;       |\n\n## Responsive hide / display elements\n\n| Screen Size                      | Class                  |\n|----------------------------------|------------------------|\n| Hidden on small ≤ 576px          | .sc-hide-up-to-small   |\n| Hidden only up to medium ≤ 768px | .sc-hide-up-to-medium  |\n| Hidden only up to large ≤ 992px  | .sc-hide-up-to-large   |\n| Visible up to small ≤ 576px      | .sc-hide-small-and -up |\n| Visible up to medium ≤ 768px     | .sc-hide-medium-and-up |\n| Visible up to large ≤ 992px      | .sc-hide-large-and-up  |\n\n## Width\n\n| Class              | Style            |\n|--------------------|------------------|\n| .sc-expand         | width: 100%;     |\n| .sc-mw-100         | max-width: 100%; |\n| .sc-one-whole      | width: 100%;     |\n| .sc-three-quarters | width: 75%;      |\n| .sc-two-thirds     | width: 66.66%;   |\n| .sc-one-half       | width: 50%;      |\n| .sc-one-third      | width: 33.33%;   |\n| .sc-one-quarter    | width: 25%;      |\n\n### Responsive widths\n\n| Class                           | Style          |\n|---------------------------------|----------------|\n| .sc-one-whole-small-and-up      | width: 100%;   |\n| .sc-three-quarters-small-and-up | width: 75%;    |\n| .sc-two-thirds-small-and-up     | width: 66.66%; |\n| .sc-one-half-small-and-up       | width: 50%;    |\n| .sc-one-third-small-and-up      | width: 33.33%; |\n| .sc-one-quarter-small-and-up    | width: 25%;    |\n\n| Class                            | Style          |\n|----------------------------------|----------------|\n| .sc-one-whole-medium-and-up      | width: 100%;   |\n| .sc-three-quarters-medium-and-up | width: 75%;    |\n| .sc-two-thirds-medium-and-up     | width: 66.66%; |\n| .sc-one-half-medium-and-up       | width: 50%;    |\n| .sc-one-third-medium-and-up      | width: 33.33%; |\n| .sc-one-quarter-medium-and-up    | width: 25%;    |\n\n| Class                           | Style          |\n|---------------------------------|----------------|\n| .sc-one-whole-up-to-medium      | width: 100%;   |\n| .sc-three-quarters-up-to-medium | width: 75%;    |\n| .sc-two-thirds-up-to-medium     | width: 66.66%; |\n| .sc-one-half-up-to-medium       | width: 50%;    |\n| .sc-one-third-up-to-medium      | width: 33.33%; |\n| .sc-one-quarter-up-to-medium    | width: 25%;    |\n\n## Typography \u0026 alignments\n\n| Class           | Style               |\n|-----------------|---------------------|\n| .sc-text-left   | text-align: left;   |\n| .sc-text-right  | text-align: right;  |\n| .sc-text-center | text-align: center; |\n\n| Class             | Style            |\n|-------------------|------------------|\n| .sc-font-zero     | font-size: 0;    |\n| .sc-font-tiny     | font-size: 14px; |\n| .sc-font-small    | font-size: 15px; |\n| .sc-font-base     | font-size: 16px; |\n| .sc-font-medium   | font-size: 18px; |\n| .sc-font-large    | font-size: 20px; |\n| .sc-font-xlarge   | font-size: 24px; |\n| .sc-font-xxlarge  | font-size: 30px; |\n| .sc-font-huge     | font-size: 35px; |\n| .sc-font-gigantic | font-size: 45px; |\n\n| Class                 | Style                               |\n|-----------------------|-------------------------------------|\n| .sc-font-normal       | font-weight: 400;                   |\n| .sc-font-bold         | font-weight: 600;                   |\n| .sc-font-family       | font-family: var(--sc-font-family); |\n| .sc-font-line-through | text-decoration: line-through;      |\n\n| Class         | Style                                                         |\n|---------------|---------------------------------------------------------------|\n| .sc-uppercase | text-transform: uppercase;                                    |\n| .sc-truncate  | white-space: nowrap;overflow: hidden;text-overflow: ellipsis; |\n\n## Colours\n\n| Class               | Style                           |\n|---------------------|---------------------------------|\n| .sc-color-primary   | color: hsla(212, 100%, 50%, 1); |\n| .sc-color-secondary | color: hsla(0, 0%, 15%, 1);     |\n| .sc-color-error     | color: hsla(0, 100%, 45%, 1);   |\n| .sc-color-sale      | color: hsla(0, 100%, 45%, 1);   |\n\n**Primary** and **secondary** might change if you have set up your brand colors during the installation process or you have overridden these properties in the custom style field.\n\n| Class              | Style           |\n|--------------------|-----------------|\n| .sc-shade-darkest  | color: #1a1a1a; |\n| .sc-shade-dark     | color: #4d4d4d; |\n| .sc-shade-neutral  | color: #737373; |\n| .sc-shade-light    | color: #b3b3b3; |\n| .sc-shade-lighter  | color: #dedede; |\n| .sc-shade-lightest | color: #f2f2f2; |\n\n## Box shadow\n\n| Class        | Style                                                                      |\n|--------------|----------------------------------------------------------------------------|\n| .sc-shadow   | box-shadow: 0 1px 2px hsla(0,0%,0%,0.1);                                   |\n| .sc-shadow-2 | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.05); |\n| .sc-shade-3  | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.2);  |\n\n## Spacing\n\n### Margins\n\nYou can configure and apply responsive spacing classes to margin and padding classes. Here are the basics:\n\n`sc-{ breakpoint }:{ property }-{ size }`\n\n**Mobile-first breakpoints**\n\n-   sm: 576px\n-   md: 768px\n-   lg: 992px\n-   xl: 1400px\n-   hg: 1700px\n\n**Properties:**\n\n-   m - for classes that set margin\n-   p - for classes that set padding\n\n**Sides:**\n\n-   t sets margin-top or padding-top\n-   b sets margin-bottom or padding-bottom\n-   l sets margin-left or padding-left\n-   r sets margin-right or padding-right\n-   s sets margin-left and margin-right or padding-left and padding-right\n-   e sets margin-top and margin-bottom or padding-top and padding-bottom\n\n**Sizes:**\n\n-   micro: 3px\n-   tiny: 5px\n-   small: 10px\n-   medium: 15px\n-   base: 20px\n-   large: 30px\n-   xlarge: 40px\n-   xxlarge: 60px\n-   huge: 80px\n\n### Example with breakpoints\n\n`sc-md:m-base` sets `margin: 20px;` from `768px` and up\n\n`sc-md:ms-base` sets `margin-right: 20px; margin-left: 20px;` from `768px` and up\n\n### Example without breakpoints\n\n`sc-p-base` sets `padding: 20px;` across all devices\n\n`sc-pl-base` sets `padding-left: 20px;` across all devices\n\n### Margin built-in classes\n\n| Class           | Small ≥ 576px                         | Medium ≥ 768px                        |\n|-----------------|---------------------------------------|---------------------------------------|\n| .sc-m-none      | margin: 0;                            | margin: 0;                            |\n| .sc-mt          | margin-top: 10px;                     | margin-top: 20px;                     |\n| .sc-mr          | margin-right: 10px;                   | margin-right: 20px;                   |\n| .sc-mb          | margin-bottom: 10px;                  | margin-bottom: 20px;                  |\n| .sc-ml          | margin-left: 10px;                    | margin-left: 20px;                    |\n| .sc-mt-spacious | margin-top: 20px;margin-bottom: 20px; | margin-top: 40px;margin-bottom: 40px; |\n| .sc-mr-spacious | margin-right: 20px;margin-left: 20px; | margin-right: 40px;margin-left: 40px; |\n| .sc-mb-spacious | margin-bottom: 20px;margin-top: 20px; | margin-bottom: 40px;margin-top: 40px; |\n| .sc-ml-spacious | margin-left: 20px;margin-right: 20px; | margin-left: 40px;margin-right: 40px; |\n| .sc-me-spacious | margin-left: 20px;margin-right: 20px; | margin-left: 40px;margin-right: 40px; |\n| .sc-ms-spacious | margin-top: 20px;margin-bottom: 20px; | margin-top: 40px;margin-bottom: 40px; |\n\n| Class       | Style                                 |\n|-------------|---------------------------------------|\n| .sc-ms-auto | margin-left: auto;margin-right: auto; |\n\n### Padding built-in classes\n\n| Class           | Small ≥ 576px                           | Medium ≥ 768px                          |\n|-----------------|-----------------------------------------|-----------------------------------------|\n| .sc-p-none      | padding: 0;                             | padding: 0;                             |\n| .sc-pt          | padding-top: 10px;                      | padding-top: 20px;                      |\n| .sc-pr          | padding-right: 10px;                    | padding-right: 20px;                    |\n| .sc-pb          | padding-bottom: 10px;                   | padding-bottom: 20px;                   |\n| .sc-pl          | padding-left: 10px;                     | padding-left: 20px;                     |\n| .sc-pt-spacious | padding-top: 20px;padding-bottom: 20px; | padding-top: 40px;padding-bottom: 40px; |\n| .sc-pr-spacious | padding-right: 20px;padding-left: 20px; | padding-right: 40px;padding-left: 40px; |\n| .sc-pb-spacious | padding-bottom: 20px;padding-top: 20px; | padding-bottom: 40px;padding-top: 40px; |\n| .sc-pl-spacious | padding-left: 20px;padding-right: 20px; | padding-left: 40px;padding-right: 40px; |\n| .sc-pe-spacious | padding-left: 20px;padding-right: 20px; | padding-left: 40px;padding-right: 40px; |\n| .sc-ps-spacious | padding-top: 20px;padding-bottom: 20px; | padding-top: 40px;padding-bottom: 40px; |\n\n## Borders\n\n| Class             | Style Applied                                                   |\n|-------------------|-----------------------------------------------------------------|\n| .sc-border-top    | border-top: 1px solid #d9d9d9;                                  |\n| .sc-border-right  | border-right: 1px solid #d9d9d9;                                |\n| .sc-border-bottom | border-bottom: 1px solid #d9d9d9;                               |\n| .sc-border-left   | border-left: 1px solid #d9d9d9;                                 |\n| .sc-border-ends   | border-top: 1px solid #d9d9d9;border-bottom: 1px solid #d9d9d9; |\n| .sc-border-sides  | border-left: 1px solid #d9d9d9;border-right: 1px solid #d9d9d9; |\n| .sc-border-none   | border: none;                                                   |\n\n**Related help documents**\n\n-   [Adding Custom CSS](/documentation/adding-custom-css)"}