ricola-logo.svg

Styleguide

    • SiteFooter
    • MainNavigation
    • MainNavigationCtaTeaser
      • Plain
      • With Icon
      • With Image
    • Breadcrumb
    • FormFields
    • Umantis
    • TourBookingCituro
    • SocialProfileSection
    • ProductCategoriesSection
      • 1 image
      • 2 images
      • 3 images
    • PageHeader
    • Lightbox
      • Lead text
      • Lead text centered
      • Layout Default
      • Layout reverse
      • Use Original Image Ratio
      • Title Size Large
      • Title Size Small
      • No Title
      • With CTA
      • With background color
      • With background image
      • With background image, text left
      • With background image, text right
      • With background video
      • With background image and secondary image
      • With background image and secondary image left
      • With background image and secondary video
        • 1 item
        • 2 items
        • 3 items
        • 4 items
        • 5 items
        • 1 item
        • 2 items
        • 4 items
        • One item
        • Two items, hidden headline
        • Four items
        • Default
        • Full width (filling the row)
        • In Main Navigation
      • MilestonesScrolldown
      • LinkList
      • FactsTeaserSection
      • FactsTeaser
        • Two items
        • Three items
        • Six items
      • HerbSection
      • FAQSection
      • ArticleTeaserSection
      • DownloadSection
      • Inline
      • Standalone
      • Variant Default
      • Variant Small
      • Color White
      • Cover
      • With percentage
      • With text
      • Without text
      • Compact
      • Visually Hidden
      • Default Trigger Button
      • Custom Trigger Button
      • As Link
      • As button, disabled
      • As Button
      • As Span
    • Icon
      • defaults
      • Large / yellow
      • medium / yellow
      • small / yellow
      • no-padding / yellow
      • green
      • lightgreen
      • white
    • GoogleMaps
    • ComponentWidth
      • primary
      • primary/small
      • primary/medium
      • primary/outline
      • primary/loading
      • As Link
      • secondary
      • secondary/small
      • secondary/medium
      • secondary/outline
      • Default
      • With Icon
      • Externally controlled
      • Quiz
        • With headline
        • Hidden headline
        • With Headline and CTA
        • With headline
        • Hidden headline
        • For Grid
        • For Grid, new product
        • For Product Detail Header
        • For Slider, inactive slide
        • For Slider, active slide
        • Default
        • With price reduction
        • Status Loading
        • Status Updating
        • Status Error While Loading
        • Status Error While Adding to cart
        • Status Not Available
        • 3 Items
        • 4 Items
        • 5 Items
        • 6 Items
        • 8 items
        • 5 items
        • Column
        • Row
      • ProductDetailHeader
        • With Table
        • With Richtext
        • With Button CTA
        • With Icon Button CTA
        • ImageElement / landscape
        • ImageElement / portrait
        • ImageElement / square
        • ImageElement / Layout In Accordion
        • Video/default
        • Slider/default
        • Slider/with captions
        • Full Width
      • WinterContestForm
      • WinATripForm
      • SwissSkiCampaignForm
      • RicolaInteractiveTrailForm
      • LargeGroupTourBookingForm
      • HerbgardenContestForm
      • ErlebnisShopForm
      • CustomerServiceForm
      • CardboardCanQuestionnaireForm
      • B2BForm
      • FAQSearch
        • Status Loading
        • Status Empty
        • Status Loaded
        • Status Updating
        • Status Error
      • ArticleTeaserGrid
        • With place and date
        • With category
  • siteSiteFooter

    SiteFooter

  • siteMainNavigation

    default

  • siteMainNavigationCtaTeaser

    NavigationProductTeaser

  • siteMainNavLinkList

    Plain

  • siteMainNavLinkList

    With Icon

  • siteMainNavLinkList

    With Image

  • siteBreadcrumb

    Breadcrumb

  • formsFormFields

    Basic Fields

  • blocksUmantis

    Umantis iFrame

  • blocksTourBookingCituro

    Cituro

  • blocksSocialProfileSection

    Default

  • blocksProductCategoriesSection

    Product Categories Section

  • blocksPageHeaderHero

    1 image

  • blocksPageHeaderHero

    2 images

  • blocksPageHeaderHero

    3 images

  • blocksPageHeader

    Page header

  • blocksLightbox

    Text only Lightbox

  • blocksLeadText

    Lead text

  • blocksLeadText

    Lead text centered

  • blocksImageText

    Layout Default

  • blocksImageText

    Layout reverse

  • blocksImageText

    Use Original Image Ratio

  • blocksImageText

    Title Size Large

  • blocksImageText

    Title Size Small

  • blocksImageText

    No Title

  • blocksImageText

    With CTA

  • blocksHeroTeaserHome

    With background color

  • blocksHeroTeaserHome

    With background image

  • blocksHeroTeaserHome

    With background image, text left

  • blocksHeroTeaserHome

    With background image, text right

  • blocksHeroTeaserHome

    With background video

  • blocksHeroTeaserHome

    With background image and secondary image

  • blocksHeroTeaserHome

    With background image and secondary image left

  • blocksHeroTeaserHome

    With background image and secondary video

  • blocksProductUSPSectionProductUSPSection

    1 item

  • blocksProductUSPSectionProductUSPSection

    2 items

  • blocksProductUSPSectionProductUSPSection

    3 items

  • blocksProductUSPSectionProductUSPSection

    4 items

  • blocksProductUSPSectionProductUSPSection

    5 items

  • blocksQuoteSliderSectionQuotesSliderSection

    1 item

  • blocksQuoteSliderSectionQuotesSliderSection

    2 items

  • blocksQuoteSliderSectionQuotesSliderSection

    4 items

  • blocksPageTeaserSectionPageTeaserSection

    One item

  • blocksPageTeaserSectionPageTeaserSection

    Two items, hidden headline

  • blocksPageTeaserSectionPageTeaserSection

    Four items

  • blocksPageTeaserSectionPageTeaser

    Default

  • blocksPageTeaserSectionPageTeaser

    Full width (filling the row)

  • blocksPageTeaserSectionPageTeaser

    In Main Navigation

  • blocksMilestonesScrolldownMilestonesScrolldown

    MilestonesScrolldown

  • blocksLinkListLinkList

    Link list

  • blocksFactsTeaserSectionFactsTeaserSection

    default

  • blocksFactsTeaserSectionFactsTeaser

    default

  • blocksFactsSectionFactsSection

    Two items

  • blocksFactsSectionFactsSection

    Three items

  • blocksFactsSectionFactsSection

    Six items

  • blocksHerbSectionHerbSection

    Herb section

  • blocksFAQSectionFAQSection

    FAQ section

  • blocksArticleTeaserSectionArticleTeaserSection

    News Teaser Section

  • blocksDownloadSectionDownloadSection

    Download Section

  • baseTable

    Inline

  • baseTable

    Standalone

  • baseSpinner

    Variant Default

  • baseSpinner

    Variant Small

  • baseSpinner

    Color White

  • baseSpinner

    Cover

  • baseSpinner

    With percentage

  • baseSectionHeadline

    With text

  • baseSectionHeadline

    Without text

  • baseSectionHeadline

    Compact

  • baseSectionHeadline

    Visually Hidden

  • baseModal

    Default Trigger Button

  • baseModal

    Custom Trigger Button

  • baseIconLink

    As Link

  • baseIconLink

    As button, disabled

  • baseIconLink

    As Button

  • baseIconLink

    As Span

  • baseIcon

    Default

  • baseIconButton

    defaults

  • baseIconButton

    Large / yellow

  • baseIconButton

    medium / yellow

  • baseIconButton

    small / yellow

  • baseIconButton

    no-padding / yellow

  • baseIconButton

    green

  • baseIconButton

    lightgreen

  • baseIconButton

    white

  • baseGoogleMaps

    Default

  • baseComponentWidth

    default

  • baseButton

    primary

  • baseButton

    primary/small

  • baseButton

    primary/medium

  • baseButton

    primary/outline

  • baseButton

    primary/loading

  • baseButton

    As Link

  • baseButton

    secondary

  • baseButton

    secondary/small

  • baseButton

    secondary/medium

  • baseButton

    secondary/outline

  • baseAccordionPanel

    Default

  • baseAccordionPanel

    With Icon

  • baseAccordionPanel

    Externally controlled

  • featuresquizQuiz

    Quiz

  • featuresproductsProductTeaserSlider

    With headline

  • featuresproductsProductTeaserSlider

    Hidden headline

  • featuresproductsProductTeaserSlider

    With Headline and CTA

  • featuresproductsProductTeaserGrid

    With headline

  • featuresproductsProductTeaserGrid

    Hidden headline

  • featuresproductsProductTeaser

    For Grid

  • featuresproductsProductTeaser

    For Grid, new product

  • featuresproductsProductTeaser

    For Product Detail Header

  • featuresproductsProductTeaser

    For Slider, inactive slide

  • featuresproductsProductTeaser

    For Slider, active slide

  • featuresproductsProductShopifyWidget

    Default

  • featuresproductsProductShopifyWidget

    With price reduction

  • featuresproductsProductShopifyWidget

    Status Loading

  • featuresproductsProductShopifyWidget

    Status Updating

  • featuresproductsProductShopifyWidget

    Status Error While Loading

  • featuresproductsProductShopifyWidget

    Status Error While Adding to cart

  • featuresproductsProductShopifyWidget

    Status Not Available

  • featuresproductsProductMoodSection

    3 Items

  • featuresproductsProductMoodSection

    4 Items

  • featuresproductsProductMoodSection

    5 Items

  • featuresproductsProductMoodSection

    6 Items

  • featuresproductsProductFilter

    8 items

  • featuresproductsProductFilter

    5 items

  • featuresproductsProductFeatures

    Column

  • featuresproductsProductFeatures

    Row

  • featuresproductsProductDetailHeader

    With variants and buying options

  • featuresproductsProductDetailAccordion

    With Table

  • featuresproductsProductDetailAccordion

    With Richtext

  • featuresproductsBuyingOptionsOverlay

    With Button CTA

  • featuresproductsBuyingOptionsOverlay

    With Icon Button CTA

  • featuresmediaMediaComponent

    ImageElement / landscape

  • featuresmediaMediaComponent

    ImageElement / portrait

  • featuresmediaMediaComponent

    ImageElement / square

  • featuresmediaMediaComponent

    ImageElement / Layout In Accordion

  • featuresmediaMediaComponent

    Video/default

  • featuresmediaMediaComponent

    Slider/default

  • featuresmediaMediaComponent

    Slider/with captions

  • featuresmediaMediaComponent

    Full Width

  • featuresformsWinterContestForm

    Winter Contest Form

  • featuresformsWinATripForm

    Win A Trip Form

  • featuresformsSwissSkiCampaignForm

    Swiss Ski Campaign Form

  • featuresformsRicolaInteractiveTrailForm

    Ricola Interactive Trail Form

  • featuresformsLargeGroupTourBookingForm

    Large Group Tour Booking Form

  • featuresformsHerbgardenContestForm

    Herbgarden Contest Form

  • featuresformsErlebnisShopForm

    Erlebnis-Shop Form

  • featuresformsCustomerServiceForm

    Customer Service Form

  • featuresformsCardboardCanQuestionnaireForm

    Cardboard Can Questionnaire Form

  • featuresformsB2BForm

    B2B form DE

  • featuresfaq-searchFAQSearch

    example

  • featurescartShoppingCartOverlay

    Status Loading

  • featurescartShoppingCartOverlay

    Status Empty

  • featurescartShoppingCartOverlay

    Status Loaded

  • featurescartShoppingCartOverlay

    Status Updating

  • featurescartShoppingCartOverlay

    Status Error

  • featuresarticleArticleTeaserGrid

    Default

  • featuresarticleArticleTeaser

    With place and date

  • featuresarticleArticleTeaser

    With category

☞