Current options

  • Title
  • Prefix
  • Suffix
  • Body text
  • Badge
  • Icon
  • Link
  • Price
  • Size (small)
  • Alignment

Ideas

  • Images
  • Color
  • Button
<div class="row">
    <div class="columns small-12 medium-6 large-4">

        <a href="/agenda/" class="card card--highlight    ">

            <div class="card__media">
                <svg role="img" class="card__icon">
					<use xlink:href="../../svg/svg-symbols.svg#agenda"></use>
				</svg>
            </div>

            <div class="card__header">
                <span class="card__badge">On Sale</span>
                <h4 class="card__title">Agenda</h4>
                <p class="card__suffix">1.0.2-pl</p>
            </div>

            <div class="card__content">
                <p>Build your next calendar in MODX using Agenda. Create recurring events, categories and locations, and import events from iCal/XML feeds.</p>
            </div>

            <div class="card__footer">
                <p class="card__price"><strong>€119</strong> per license</p>
            </div>

        </a>

    </div>
    <div class="columns small-12 medium-6 large-4">

        <a href="/commerce/" class="card     ">

            <div class="card__media">
                <svg role="img" class="card__icon">
					<use xlink:href="../../svg/svg-symbols.svg#commerce"></use>
				</svg>
            </div>

            <div class="card__header">
                <h4 class="card__title">Commerce</h4>
                <p class="card__suffix">1.1.0-rc2</p>
            </div>

            <div class="card__content">
                <p>Commerce makes it easy to sell online exactly the way you want. Extend functionality with our Payment Methods and Modules or build your own.</p>
            </div>

            <div class="card__footer">
                <p class="card__price"><strong>€299</strong> per license</p>
            </div>

        </a>

    </div>
    <div class="columns small-12 medium-6 large-4">

        <a href="/agenda/" class="card     ">

            <div class="card__media">
                <svg role="img" class="card__icon">
					<use xlink:href="../../svg/svg-symbols.svg#contentblocks"></use>
				</svg>
            </div>

            <div class="card__header">
                <span class="card__badge">Most Popular</span>
                <h4 class="card__title">ContentBlocks</h4>
                <p class="card__suffix">1.8.12-pl</p>
            </div>

            <div class="card__content">
                <p>ContentBlocks is a powerful content manager for MODX allowing editors to create modular, multi-column content.</p>
            </div>

            <div class="card__footer">
                <p class="card__price"><strong>€79</strong> per license</p>
            </div>

        </a>

    </div>
    <div class="columns small-12 medium-6 large-4">

        <a href="/agenda/" class="card     ">

            <div class="card__media">
                <svg role="img" class="card__icon">
					<use xlink:href="../../svg/svg-symbols.svg#digitalsignage"></use>
				</svg>
            </div>

            <div class="card__header">
                <h4 class="card__title">Digital Signage</h4>
                <p class="card__suffix">1.2.0-pl</p>
            </div>

            <div class="card__content">
                <p>Broadcast anything you want into your office, store, or school with Digital Signage. Manage slides, broadcasts and many players from a central place.</p>
            </div>

            <div class="card__footer">
                <p class="card__price"><strong>€99</strong> per license</p>
            </div>

        </a>

    </div>
    <div class="columns small-12 medium-6 large-4">

        <a href="/agenda/" class="card     ">

            <div class="card__media">
                <svg role="img" class="card__icon">
					<use xlink:href="../../svg/svg-symbols.svg#formalicious"></use>
				</svg>
            </div>

            <div class="card__header">
                <h4 class="card__title">Formalicious</h4>
                <p class="card__suffix">2.0.3-pl</p>
            </div>

            <div class="card__content">
                <p>The most powerful and easy-to-use form builder for MODX. Multi-step forms, hooks, validation and more.</p>
            </div>

            <div class="card__footer">
                <p class="card__price"><strong>€29</strong> per license</p>
            </div>

        </a>

    </div>
    <div class="columns small-12 medium-6 large-4">

        <a href="/moregallery/" class="card     ">

            <div class="card__media">
                <svg role="img" class="card__icon">
					<use xlink:href="../../svg/svg-symbols.svg#moregallery"></use>
				</svg>
            </div>

            <div class="card__header">
                <h4 class="card__title">MoreGallery</h4>
                <p class="card__suffix">1.9.1-pl</p>
            </div>

            <div class="card__content">
                <p>MoreGallery is an intuitive and powerful image gallery for MODX with video support, tags, cropping and custom fields.</p>
            </div>

            <div class="card__footer">
                <p class="card__price"><strong>€25</strong> per license</p>
            </div>

        </a>

    </div>
    <div class="columns small-12">

        <a href="/moregallery/" class="card     ">

            <div class="card__media">
                <svg role="img" class="card__icon">
					<use xlink:href="../../svg/svg-symbols.svg#simplecart"></use>
				</svg>
            </div>

            <div class="card__header">
                <h4 class="card__title">Authorize.net Gateway for SimpleCart 3.0.0-rc2</h4>
            </div>

            <div class="card__content">
                <p>Provides an Authorize.net gateway for SimpleCart, which can be used to accept credit card payments in your shop with minimal PCI compliance needs thanks to the hosted checkout form.</p>
            </div>

        </a>

    </div>
    <div class="columns small-12 medium-3">

        <a href="/moregallery/" class="card   card--small  ">

            <div class="card__media">
                <svg role="img" class="card__icon">
					<use xlink:href="../../svg/svg-symbols.svg#simplecart"></use>
				</svg>
            </div>

            <div class="card__header">
                <h4 class="card__title">Authorize.net Gateway for SimpleCart</h4>
            </div>

            <div class="card__content">
                <p>Provides an Authorize.net gateway for SimpleCart.</p>
            </div>

        </a>

    </div>
    <div class="columns small-12 medium-3">

        <a href="/moregallery/" class="card   card--small  ">

            <div class="card__media">
                <svg role="img" class="card__icon">
					<use xlink:href="../../svg/svg-symbols.svg#simplecart"></use>
				</svg>
            </div>

            <div class="card__header">
                <h4 class="card__title">Authorize.net Gateway for SimpleCart</h4>
            </div>

            <div class="card__content">
                <p>Provides an Authorize.net gateway for SimpleCart.</p>
            </div>

        </a>

    </div>
    <div class="columns small-12 medium-3">

        <a href="/moregallery/" class="card   card--small  ">

            <div class="card__media">
                <svg role="img" class="card__icon">
					<use xlink:href="../../svg/svg-symbols.svg#simplecart"></use>
				</svg>
            </div>

            <div class="card__header">
                <h4 class="card__title">Authorize.net Gateway for SimpleCart</h4>
            </div>

            <div class="card__content">
                <p>Provides an Authorize.net gateway for SimpleCart.</p>
            </div>

        </a>

    </div>
    <div class="columns small-12 medium-3">

        <a href="/moregallery/" class="card   card--small  ">

            <div class="card__media">
                <svg role="img" class="card__icon">
					<use xlink:href="../../svg/svg-symbols.svg#simplecart"></use>
				</svg>
            </div>

            <div class="card__header">
                <h4 class="card__title">Authorize.net Gateway for SimpleCart</h4>
            </div>

            <div class="card__content">
                <p>Provides an Authorize.net gateway for SimpleCart.</p>
            </div>

        </a>

    </div>
    <div class="columns small-12 medium-6">

        <div class="card   card--center card--blue">

            <div class="card__media">
                <svg role="img" class="card__icon">
					<use xlink:href="../../svg/svg-symbols.svg#info"></use>
				</svg>
            </div>

            <div class="card__header">
                <h4 class="card__title">What is digital signage?</h4>
            </div>

            <div class="card__content">
                <p>Digital signage, sometimes called narrow casting, is when you use a monitor or TV screen to broadcast into a physical space. This can be anything: sales, call to actions, news, social media posts, and more. With our MODX extra aptly called
                    Digital Signage you can manage slideshows to broadcast to different players (screens) in your office, retail area, or school.</p>
            </div>

        </div>

    </div>
    <div class="columns small-12 medium-6">

        <div class="card   card--center card--yellow">

            <div class="card__media">
                <svg role="img" class="card__icon">
					<use xlink:href="../../svg/svg-symbols.svg#digitalsignage"></use>
				</svg>
            </div>

            <div class="card__header">
                <h4 class="card__title">Works with your hardware</h4>
            </div>

            <div class="card__content">
                <p>To use Digital Signage, you'll need a monitor and an internet-capable device with a browser. HDMI Sticks like the Asus Chromebit or Intel Compute Stick are perfect: plug them in, connect to the WiFi, and start broadcasting. Digital Signage
                    gives you a special URL for each monitor you want to use. Once connected, you can manage the broadcast and schedules from within MODX.</p>
            </div>

        </div>

    </div>
</div>
{
  "cards": [
    {
      "title": "Agenda",
      "suffix": "1.0.2-pl",
      "body": "<p>Build your next calendar in MODX using Agenda. Create recurring events, categories and locations, and import events from iCal/XML feeds.</p>",
      "badge": "On Sale",
      "icon": "agenda",
      "link": "/agenda/",
      "price": "€119",
      "highlight": true,
      "column": "small-12 medium-6 large-4"
    },
    {
      "title": "Commerce",
      "suffix": "1.1.0-rc2",
      "body": "<p>Commerce makes it easy to sell online exactly the way you want. Extend functionality with our Payment Methods and Modules or build your own.</p>",
      "icon": "commerce",
      "link": "/commerce/",
      "price": "€299",
      "column": "small-12 medium-6 large-4"
    },
    {
      "title": "ContentBlocks",
      "suffix": "1.8.12-pl",
      "body": "<p>ContentBlocks is a powerful content manager for MODX allowing editors to create modular, multi-column content.</p>",
      "badge": "Most Popular",
      "icon": "contentblocks",
      "link": "/agenda/",
      "price": "€79",
      "column": "small-12 medium-6 large-4"
    },
    {
      "title": "Digital Signage",
      "suffix": "1.2.0-pl",
      "body": "<p>Broadcast anything you want into your office, store, or school with Digital Signage. Manage slides, broadcasts and many players from a central place.</p>",
      "icon": "digitalsignage",
      "link": "/agenda/",
      "price": "€99",
      "column": "small-12 medium-6 large-4"
    },
    {
      "title": "Formalicious",
      "suffix": "2.0.3-pl",
      "body": "<p>The most powerful and easy-to-use form builder for MODX. Multi-step forms, hooks, validation and more.</p>",
      "icon": "formalicious",
      "link": "/agenda/",
      "price": "€29",
      "column": "small-12 medium-6 large-4"
    },
    {
      "title": "MoreGallery",
      "suffix": "1.9.1-pl",
      "body": "<p>MoreGallery is an intuitive and powerful image gallery for MODX with video support, tags, cropping and custom fields.</p>",
      "icon": "moregallery",
      "link": "/moregallery/",
      "price": "€25",
      "column": "small-12 medium-6 large-4"
    },
    {
      "title": "Authorize.net Gateway for SimpleCart 3.0.0-rc2",
      "body": "<p>Provides an Authorize.net gateway for SimpleCart, which can be used to accept credit card payments in your shop with minimal PCI compliance needs thanks to the hosted checkout form.</p>",
      "icon": "simplecart",
      "link": "/moregallery/",
      "column": "small-12"
    },
    {
      "title": "Authorize.net Gateway for SimpleCart",
      "body": "<p>Provides an Authorize.net gateway for SimpleCart.</p>",
      "icon": "simplecart",
      "link": "/moregallery/",
      "size": "small",
      "column": "small-12 medium-3"
    },
    {
      "title": "Authorize.net Gateway for SimpleCart",
      "body": "<p>Provides an Authorize.net gateway for SimpleCart.</p>",
      "icon": "simplecart",
      "link": "/moregallery/",
      "size": "small",
      "column": "small-12 medium-3"
    },
    {
      "title": "Authorize.net Gateway for SimpleCart",
      "body": "<p>Provides an Authorize.net gateway for SimpleCart.</p>",
      "icon": "simplecart",
      "link": "/moregallery/",
      "size": "small",
      "column": "small-12 medium-3"
    },
    {
      "title": "Authorize.net Gateway for SimpleCart",
      "body": "<p>Provides an Authorize.net gateway for SimpleCart.</p>",
      "icon": "simplecart",
      "link": "/moregallery/",
      "size": "small",
      "column": "small-12 medium-3"
    },
    {
      "title": "What is digital signage?",
      "body": "<p>Digital signage, sometimes called narrow casting, is when you use a monitor or TV screen to broadcast into a physical space. This can be anything: sales, call to actions, news, social media posts, and more. With our MODX extra aptly called Digital Signage you can manage slideshows to broadcast to different players (screens) in your office, retail area, or school.</p>",
      "icon": "info",
      "align": "center",
      "color": "blue",
      "column": "small-12 medium-6"
    },
    {
      "title": "Works with your hardware",
      "body": "<p>To use Digital Signage, you'll need a monitor and an internet-capable device with a browser. HDMI Sticks like the Asus Chromebit or Intel Compute Stick are perfect: plug them in, connect to the WiFi, and start broadcasting. Digital Signage gives you a special URL for each monitor you want to use. Once connected, you can manage the broadcast and schedules from within MODX.</p>",
      "icon": "digitalsignage",
      "align": "center",
      "color": "yellow",
      "column": "small-12 medium-6"
    }
  ]
}
  • Content:
    .card {
    	position: relative;
    	display: flex;
    	flex-direction: column;
    	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);
        border-radius: $radius;
    	background: #ffffff;
    	height: calc(100% - 2rem);
    	margin: 1rem 0;
        transition: all ease 0.3s;
    }
    
    a.card:hover {
    	text-decoration: none;
    	transform: scale(1.02);
    	box-shadow: 8px 20px 30px rgba(39,44,49,.05), 1px 6px 12px rgba(39,44,49,.04);
    }
    
    .card--highlight {
    	border: 1px solid rgba(31, 75, 127, .5);
        box-shadow: 0 0 3px rgba(31, 75, 127, .1), 0 5px 22px -6px rgba(31, 75, 127, 0.5);
    }
    
    a.card--highlight:hover {
        box-shadow: 8px 20px 30px rgba(31, 75, 127, .1), 1px 6px 12px rgba(31, 75, 127, 0.5);
    }
    
    .card--center {
    	text-align: center;
    }
    
    .card__media {
    	padding: 2rem 2rem 0;
    
    	.card--yellow &,
    	.card--blue & {
    		display: flex;
    		align-items: center;
    		justify-content: center;
    		color: #fff;
    		padding: 2rem;
    		margin-bottom: 2rem;
    
    		.card__icon {
    			max-width: 100px;
    			max-height: 100px;
    		}
    	}
    
    	.card--yellow & {
    		background: #F8B72C;
    	}
    
    	.card--blue & {
    		background: #359BC8;
    	}
    }
    
    .card__icon {
    	display: inline-block;
    	width: 100%;
    	height: 100%;
    	max-width: 50px;
    	max-height: 60px;
    
    	.card--small & {
    		max-width: 30px;
    		max-height: 40px;
    	}
    }
    
    .card__header {
    	margin-bottom: 1em;
        padding: 0 2rem;
    }
    
    .card__badge {
    	background-color: $color-grey-xlight;
    	color: $color-charcoal;
    	padding: 6px 12px;
    	border-radius: 0 3px 0 3px;
    	line-height: 1;
    	margin: 0;
    	font-size: $font-size-xsmall;
    	letter-spacing: 0.04em;
    	font-weight: bold;
    	text-transform: uppercase;
    	position: absolute;
    	top: 0;
    	right: 0;
    
    	.card--highlight & {
    		background-color: $color-primary;
    		color: $color-white;
    	}
    }
    
    .card__title {
    	font-size: $font-size-h2;
    	margin: 0;
    	color: $color-text-base;
    
    	.card--small & {
    		font-size: $font-size-h4;
    	}
    }
    
    .card__prefix,
    .card__suffix {
    	color: $color-charcoal;
    	margin: 0;
    	font-size: $font-size-small;
    }
    
    .card__content {
        padding: 0 2rem 2rem;
    }
    
    .card__content p {
    	color: $color-charcoal;
    }
    
    .card__content p:last-child {
    	margin-bottom: 0;
    }
    
    .card__footer {
        padding: 0 2rem 2rem;
    	margin-top: auto;
    }
    
    .card__price {
    	margin-bottom: 0;
    }
    
  • URL: /components/raw/cards/cards.scss
  • Filesystem Path: components/02-components/cards/cards.scss
  • Size: 2.2 KB
  • Content:
    /*------------------------------------*\
    	CTA
    \*------------------------------------*/
    
    .cta {
    	background: $color-primary;
    	padding: 4rem 0;
    }
    
    .cta__title {
    	color: $color-white;
    	margin: 0;
    	font-size: $font-size-h1;
    }
    
    .cta__links {
    	margin: 1rem 0 0;
    
    	.button {
    		margin: 1rem 0.5rem;
    		padding: 6px 24px;
    	}
    }
    
    .cta__dev-link {
    	display: block;
    	color: $color-white;
    	margin: 0;
    	opacity: 0.9;
    
    	a {
    		color: $color-white;
    		font-weight: bold;
    	}
    }
    
  • URL: /components/raw/cards/cta.scss
  • Filesystem Path: components/02-components/cards/cta.scss
  • Size: 456 Bytes