There are no notes for this item.

<section class="product-pricing bg-lightgrey">

    <div class="row row--xsmall pricing-card-container">
        <div class="columns small-12">
            <h1 class="u-center u-mt0 u-mb2 c-base">Pricing</h1>
        </div>

        <div class="columns small-12 large-6">
            <div class="pricing-card">
                <header class="pricing-card__header">
                    <h2 class="pricing-card__title">Single license</h2>
                </header>
                <div class="pricing-card__body">
                    <div class="pricing-card__pricing">
                        <span data-role="price" data-euro="2900" class="pricing-card__price"><sup></sup>29</span>
                    </div>
                    <ul class="pricing-card__features">
                        <li>1 site</li>
                        <li>unlimited standard support</li>
                        <li>lifetime minor &amp; patch updates</li>
                    </ul>
                    </ul>

                </div>
                <div class="pricing-card__footer">
                    <form method="post" action="/">
                        <input type="hidden" name="add_to_cart" value="1">
                        <input type="hidden" name="product" value="123">
                        <input type="hidden" name="quantity" value="1">
                        <input type="submit" value="Buy now">
                    </form>
                </div>
            </div>
        </div>
        <div class="columns small-12 large-6">
            <div class="pricing-card">
                <header class="pricing-card__header">
                    <h2 class="pricing-card__title">Unlimited license</h2>
                    <span class="pricing-card__ribbon">Best value</span>
                </header>
                <div class="pricing-card__body">
                    <div class="pricing-card__pricing">
                        <span data-role="price" data-euro="2900" class="pricing-card__price"><sup></sup>29</span>
                        <span class="pricing-card__price-label">/month</span>
                    </div>
                    <ul class="pricing-card__features">
                        <li>unlimited sites</li>
                        <li>unlimited standard support</li>
                        <li>lifetime minor &amp; patch updates</li>
                        <li>free major updates</li>
                        <li>cancel anytime</li>
                    </ul>
                </div>
                <div class="pricing-card__footer">
                    <form method="post" action="/">
                        <input type="hidden" name="add_to_cart" value="1">
                        <input type="hidden" name="product" value="123">
                        <input type="hidden" name="quantity" value="1">
                        <input type="submit" value="Buy now">
                    </form>
                </div>
            </div>
        </div>
    </div>

</section>

<section class="product-faq">
    <div class="row row--small pricing-card-container">
        <div class="columns small-12">
            <h1 class="u-center u-mt0 u-mb2 c-base" id="faq">Frequently asked questions</h1>
        </div>

        <div class="columns small-12 large-5">
            <h3 id="free" class="c-base">Can I try Redactor for free?</h3>
            <p>Yes, <a href="/free-development-licenses/">free development licenses</a> are available for Redactor. With free development licenses you can try an extra, or start development, before a license purchase is needed. Such free licenses are available on a specific whitelist of domains, such as <code>localhost</code>, <code>site.dev</code>, <code>dev.site.com</code>.</p>
            <p>When using a free development license, you'll automatically get an email when the site goes live to assign a full license. </p>
            <p><a href="/free-development-licenses/">Learn more about development licenses here.</a></p>
            <h3 id="support" class="c-base u-mt4">What is unlimited standard support?</h3>
            <p>Standard support gives you access to our email support for as long as the major version you're using is supported. When a new major version comes out, you can choose to upgrade to renew your support and get new versions. We also offer a <a href="https://forum.modmore.com/">community forums</a> for your questions and discussions about Redactor.</p>
            <p><a href="https://modmore.com/about/support/">Learn more about standard unlimited support »</a></p>
            <p>Unlimited licenses also include standard support, as well as free major upgrades, so you're covered indefinitely as long as you're subscribed. If you cancel a subscription, your support is locked in at the current major release.</p>
        </div>

        <div class="columns small-12 large-5 large-offset-2">
            <h3 id="updates" class="c-base">Are updates included?</h3>
            <p>Yes, lifetime minor updates (e.g. 1.3 -&gt; 1.4) and patch updates (e.g. 1.3.0 -&gt; 1.3.1) are included in all purchases.</p>
            <p>If you subscribe to the unlimited license you'll also get free major updates (e.g. 1.3 -&gt; 2.0) included, as long as the major update is released while your subscription is active. </p>
            <h3 id="unlimited" class="c-base u-mt4">Do you have any prepaid unlimited licenses?</h3>
            <p>Yes, we're happy to provide you a 6 or 12 month prepaid subscription. To make that happen, please first purchase the first month in order to set up your account and subscription properly. Then <a href="mailto:support@modmore.com?subject=Prepaid Redactor unlimited license ">email support</a> for an invoice for the period you wish to prepay. For 12 months in advance we're happy to offer a 10% discount.</p>
            <h3 id="payment" class="c-base u-mt4">Which payment methods do you support?</h3>
            <p>Credit Card (Visa, MasterCard, Maestro, American Express), PayPal, iDeal, Bancontact/Mister Cash, SOFORT Banking, SEPA Bank Transfer, Belfius Direct Net. </p>
            <p>For the unlimited subscriptions we accept Credit Card and PayPal. </p>
        </div>
    </div>
</section>
/* No context defined for this component. */
  • Content:
    /*------------------------------------*\
    	Product pricing
    \*------------------------------------*/
    
    .pricing-card-container {
    	margin-top: 4rem;
    	margin-bottom: 4rem;
    }
    
    .pricing-card {
    	position: relative;
    	display: flex;
    	flex-direction: column;
    	overflow: hidden;
    	width: 100%;
    	background: #fff;
    	border-radius: $radius;
    	border: 1px solid rgba(0,0,0,.1);
    	box-shadow: 0 0 3px rgba(39,44,49,.02), 0 5px 22px -6px rgba(39,44,49,.05);
    	margin-bottom: 2rem;
    }
    
    .pricing-card__header {
    	border-radius: $radius $radius 0 0;
    	text-align: center;
    	padding: 2rem 0 1rem 0;
    }
    
    .pricing-card__title {
    	margin: 0;
    	font-family: $font-family-body;
    	color: $color-text-base;
    }
    
    .pricing-card__ribbon {
    	position: absolute;
    	top: 20px;
    	right: -35px;
    	display: block;
    	width: 140px;
    	padding: 10px 0;
    	background: $color-secondary-dark;
    	color: white;
    	font-size: 0.7rem;
    	text-transform: uppercase;
    	line-height: 1;
    	text-align: center;
    	transform: rotate(45deg);
    }
    
    .pricing-card__pricing {
    	text-align: center;
    }
    
    .pricing-card__price {
    	font-size: 2rem;
    	line-height: 1em;
    	font-weight: bold;
    
    	sup {
    		font-weight: normal;
    		font-size: 1.3rem;
    	}
    }
    
    .pricing-card__price-label {
    	color: $color-grey-base;
    	font-size: 0.9rem;
    	font-weight: 600;
    	line-height: 1em;
    }
    
    .pricing-card__features {
    	list-style: none;
    	margin: 1rem 2rem;
    	padding: 0;
    
    	li {
    		position: relative;
    		padding: 0.4rem 0 0.4rem 30px;
    		border-bottom: 1px solid $color-grey-light;
    	}
    
    	li:last-child {
    		border-bottom: 0;
    	}
    
    	li:before {
    		position: absolute;
    		top: 14px;
    		left: 0;
    		content: ' ';
    		width: 16px;
    		height: 16px;
    		background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAyNCAxOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7Ij4gICAgPGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsMSwwLjA0LC0zLjg0KSI+ICAgICAgICA8cGF0aCBkPSJNMjMuMTM4LDguMTA4TDkuMDc3LDIyLjE2OUM4Ljk1MSwyMi4yNTkgOC44MzQsMjIuMzA0IDguNzI3LDIyLjMwNEM4LjYyLDIyLjMwNCA4LjUwMywyMi4yNTkgOC4zNzcsMjIuMTY5TDAuMTM1LDEzLjkyN0MtMC4wOTgsMTMuNjk0IC0wLjA5OCwxMy40NiAwLjEzNSwxMy4yMjdMMy41MjksOS44MzNDMy43NjIsOS42IDMuOTk2LDkuNiA0LjIyOSw5LjgzM0w4LjcyNywxNC4zNThMMTkuMDQ0LDQuMDE1QzE5LjI3NywzLjc4MiAxOS41MTEsMy43ODIgMTkuNzQ0LDQuMDE1TDIzLjEzOCw3LjQwOUMyMy4zNzEsNy42NDIgMjMuMzcxLDcuODc2IDIzLjEzOCw4LjEwOUwyMy4xMzgsOC4xMDhaIiBzdHlsZT0iZmlsbDpyZ2IoMzEsNzQsMTI3KTtmaWxsLXJ1bGU6bm9uemVybzsiLz4gICAgPC9nPjwvc3ZnPg==);
    		background-repeat: no-repeat;
    	}
    }
    
    .pricing-card__footer {
    	text-align: center;
    	padding: 1rem 0;
    }
    
    .pricing-card input[type="submit"] {
    	background: $color-secondary-dark;
    	border: 0;
    	padding: 0.6rem 1.8rem;
    	margin: 0 auto;
    	border-radius: $radius;
    	font-weight: 600;
    	text-transform: uppercase;
    	cursor: pointer;
    
    	&:hover, &:focus {
    		background: $color-secondary-dark;
    	}
    
    	&:active {
    		transform: scale(0.99);
    	}
    }
    
  • URL: /components/raw/product-pricing/product-pricing.scss
  • Filesystem Path: components/02-components/product-pricing/product-pricing.scss
  • Size: 3.3 KB