Styles | Gospelmusic.NL

This page is here to show off styles and components for standard page elements such as typography, form elements, icons, product cards and more. These are hard coded in an alternate page template file containing the section main-styleguide.liquid .

Colors

Info

Success

Warning

Danger

Primary

Secondary

Gray

Color schemes

Add classs 'color-scheme color-scheme--type' to your element, where 'type' is any of the ones listed below (gradient, black, white, primary, secondary, gray)

Black color scheme

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur libero ut consequuntur fugiat dignissimos atque id saepe explicabo exercitationem at facilis asperiores, expedita natus autem facere! Neque quia in praesentium.

Link with arrow

White color scheme

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur libero ut consequuntur fugiat dignissimos atque id saepe explicabo exercitationem at facilis asperiores, expedita natus autem facere! Neque quia in praesentium.

Link with arrow

Primary color scheme

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur libero ut consequuntur fugiat dignissimos atque id saepe explicabo exercitationem at facilis asperiores, expedita natus autem facere! Neque quia in praesentium.

Link with arrow

Secondary color scheme

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur libero ut consequuntur fugiat dignissimos atque id saepe explicabo exercitationem at facilis asperiores, expedita natus autem facere! Neque quia in praesentium.

Link with arrow

Gray color scheme

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur libero ut consequuntur fugiat dignissimos atque id saepe explicabo exercitationem at facilis asperiores, expedita natus autem facere! Neque quia in praesentium.

Link with arrow

Typography

Headings

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5
Headline 6

Paragraphs

Sizes

Text xs

Text sm

Text base

Text lg

Text xl

Label

Label xs

Label sm

Label base

Label lg

Label xl

Transforms

Normal

Capitalised

Uppercased

Type styles

  • Strong
  • Emphasis
  • Link
  • Strike
  • Sup

RTE (Rich text editor)

Headline 2

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus dolore beatae molestias voluptas cumque facilis, recusandae omnis, nihil magni culpa tenetur quo aperiam, earum nisi at pariatur impedit voluptates quia!

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus dolore beatae molestias voluptas cumque facilis, recusandae omnis, nihil magni culpa tenetur quo aperiam, earum nisi at pariatur impedit voluptates quia!

Headline 3

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus dolore beatae molestias voluptas cumque facilis, recusandae omnis, nihil magni culpa tenetur quo aperiam, earum nisi at pariatur impedit voluptates quia!

Headline 4

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus dolore beatae molestias voluptas cumque facilis, recusandae omnis, nihil magni culpa tenetur quo aperiam, earum nisi at pariatur impedit voluptates quia!

Headline 5

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus dolore beatae molestias voluptas cumque facilis, recusandae omnis, nihil magni culpa tenetur quo aperiam, earum nisi at pariatur impedit voluptates quia!

Headline 6

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus dolore beatae molestias voluptas cumque facilis, recusandae omnis, nihil magni culpa tenetur quo aperiam, earum nisi at pariatur impedit voluptates quia!

Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

The author of the quote
  • One
  • Two
  • Three, with child list
    • First sub item
    • Second sub item
    • Third sub item, with child list
      • Third level item
      • Another third level item
  • Four
  1. One
  2. Two
  3. Three, with child list
    1. First sub item
    2. Second sub item
    3. Third sub item, with child list
      1. Third level item
      2. Another third level item
  4. Four
Order Date Payment Status Fulfillment Status Total
#1001 December 22, 2015 Authorized Unfulfilled $43.03
#1002 December 23, 2015 Authorized Unfulfilled $44.03
#1003 December 24, 2015 Authorized Unfulfilled $45.03
#1004 December 25, 2015 Authorized Unfulfilled $46.03
#1005 December 26, 2015 Authorized Unfulfilled $47.03
#1006 December 27, 2015 Authorized Unfulfilled $48.03

Grid

More info on tailwind and css-tricks.

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Icons

User interface icons

  • Cart
  • Dichtbij
  • Filters
  • Menu
  • Verwijderen
  • Rekening

Payment icons

Social icons

Buttons

Button types

Cart
Primary anchor
Secondary anchor
Outline anchor
Gradient anchor
Link anchor

Button sizes

Forms

Form message
Incorrect email format
Incorrect password

Checkboxes

Radios

Switch button

Submit button

Options

For variants, filters and sorting

Input button style

Input list style

Quantity input

Collapsibles

Collapsible

Collapsible content 1
Collapsible content 2
Collapsible content 3

Collapsible using button styles

Collapsible content 1
Collapsible content 2
Collapsible content 3

Toggle element

Badges

Badges size: default. Default badges are responsive.

Badges size: sm

Badges size: md

Prices

Normale prijs
Van €4,95 EUR
Normale prijs
Van €4,95 EUR
Normale prijs
Van €1,50 EUR
Normale prijs
Van €1,50 EUR
Normale prijs
Van €4,95 EUR
Normale prijs
Van €4,95 EUR
Normale prijs
Van €4,95 EUR
Normale prijs
Van €4,95 EUR

Collection cards

Product cards

Ga naar de productpagina: Jezus is wachtend (download)
Jezus is wachtend (download)

Leverancier: Gospelmusic

Bestel nummer GLK296D

Jezus is wachtend (download)

Auteur(s): A. Kousemaker / Arr. & tekst: M.A. Alt

Normale prijs
Van €4,95 EUR
Ga naar de productpagina
Ga naar de productpagina: Jezus is wachtend, o zondaar op u (download)
Jezus is wachtend, o zondaar op u (download)

Leverancier: Gospelmusic

Bestel nummer JDH0261D

Jezus is wachtend, o zondaar op u (download)

Auteur(s): A. Strijbos / W.H. Zwart

Normale prijs
Van €4,95 EUR
Ga naar de productpagina
Ga naar de productpagina: Jezus klopt - 'k heb Jezus nodig-Jezus houdt van alle kind'ren
Jezus klopt - 'k heb Jezus nodig-Jezus houdt van alle kind'ren

Leverancier: Opwekking

Bestel nummer OPK0027a

Jezus klopt - 'k heb Jezus nodig-Jezus houdt van alle kind'ren

Auteur(s): Virgil Brook / Jan Visser

Fragment beluisteren:
Normale prijs
Van €1,50 EUR
Ga naar de productpagina
Ga naar de productpagina: Jezus komt om ons van lijden (download)
Jezus komt om ons van lijden (download)

Leverancier: Gospelmusic

Bestel nummer JDH0423D

Jezus komt om ons van lijden (download)

Auteur(s): P. Nicolai / J. v. Weelden

Normale prijs
Van €4,95 EUR
Ga naar de productpagina

Blog post cards