Close
Home
One Topic - Three Distinct Views:  The Vanguard View | Subscribe
Let Vanguard Technology help you with your website  Contact Us

Partner With Vanguard

Beautifully designed impactful websites for your organization and budget
 

Web Smarts - Business Savvy

We’ve been building websites since 1998

We are trusted advisors to Over 50 Active Clients within several industries including associations and nonprofits, healthcare, financial services, retail, B2B and more.

We Are
Trusted
Partners

After we deliver a quality website on time and within your budget, we will be there for when it really counts. We will be proactive, consultative and strategic after we launch your website.

We Are
Integration
Experts

We’ve integrated with virtually every AMS system on the market as well as most LMS, publication, advocacy and career center applications. Our company was founded on custom development.

We build websites that are easy to edit, manage and design using the best content management system on the market, Sitefinity CMS.

Our Clients Are Our Partners....

John Wurm

Membership & Communications Director
Minnesota Council of Nonprofits

The team at Vanguard helped us think about our digital presence from the perspective and needs of our users, while holding true to the values our organization espouses.

Connect With Us

On-Demand Webinar

Improve Your Webcopy

Sitefinity 13

With Improvements to Asset Management, Classifications and Redesigned Personalization, is it time to consider an upgrade to Sitefinity 13?

The

Vanguard View

Technology articles about one topic from the perspective of Leadership, Marketing and IT professionals .

2020 Volume 2 - Leverage Video and Search to Quickly Improve Your Website
blog-image

Bootstrap Cards

Posted: Feb 26, 2021
Content Management Design

One of the coolest features to come out of the recent versions of Sitefinity is the implementation of cards. A card is a content widget where you have the option to place an image, heading, summary text, and a link within a bordered box that can help drive traffic to other pages of your website.

Card Use Cases

Cards can be extremely useful in breaking up content and providing some visualization to a page. They look great being grouped together.

One example where you could utilize a card widget is a landing page that calls out links to direct traffic to its subpages.

Card Heading - Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Learn More
Card Heading - Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Learn More

Another example would be to display groups of bios on a page to make the page pop a little more instead of having plain, vertical text.

John Doe

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Jane Doe

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Cards can be arranged in any way (usually up to 4 columns) in conjunction with the grid layout. In other words, you could have a single card on one line, or you could group them in columns of two, three, or four in as many rows as you’d like.

Exploring Sitefinity’s Integration with Bootstrap’s Cards

The most appealing feature of the cards in Sitefinity is the ability to drag and drop, meaning that you can take the card widget from the toolbox and drag it anywhere on the page. Additionally, you can add the card’s content on the spot, rather than having to fill out the content of the card on another page (think of content types like news, blogs, events.)

The following are the fields that each card contains.

  • Heading
  • Text
  • Image
  • Label (button text)
  • Link (page selector or external field)
  • Template (pick between a list of predefined card templates/styles)

Keep in mind that none of these fields are required and can be left blank / null. For example, a card doesn’t need to contain an image or even a link, it can just be used as a placeholder for text (like the previous example for the bios).

In addition, each card can be styled uniquely by using card templates. Sitefinity allows us at Vanguard to create as many card templates as desired, so for instance, we could do something like the following: (with each example using the same exact card widget / information, but with different templates) 

Card Heading - Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Learn More
Card Heading - Card Simple

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Learn More

Card Heading - Card Hero

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Learn More

In Conclusion...

Cards can be a very useful tool in separating content up and adding prominence to information to generate more traffic. It is very easy to setup and can work well on any page of a website. For more information about cards/bootstrap, please contact your Vanguard Client Service Manager.

Back To Posts

Author:

Matt Chriest

Vanguard Tips & Tricks

We provide helpful hints you never knew you needed for our clients. Check out "Vanguard Tips & Tricks" to learn quick and simple hacks to make managing your website easier than ever.

blog-image

Bootstrap Cards

Posted: Feb 26, 2021
Content Management Design

One of the coolest features to come out of the recent versions of Sitefinity is the implementation of cards. A card is a content widget where you have the option to place an image, heading, summary text, and a link within a bordered box that can help drive traffic to other pages of your website.

Card Use Cases

Cards can be extremely useful in breaking up content and providing some visualization to a page. They look great being grouped together.

One example where you could utilize a card widget is a landing page that calls out links to direct traffic to its subpages.

Card Heading - Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Learn More
Card Heading - Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Learn More

Another example would be to display groups of bios on a page to make the page pop a little more instead of having plain, vertical text.

John Doe

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Jane Doe

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Cards can be arranged in any way (usually up to 4 columns) in conjunction with the grid layout. In other words, you could have a single card on one line, or you could group them in columns of two, three, or four in as many rows as you’d like.

Exploring Sitefinity’s Integration with Bootstrap’s Cards

The most appealing feature of the cards in Sitefinity is the ability to drag and drop, meaning that you can take the card widget from the toolbox and drag it anywhere on the page. Additionally, you can add the card’s content on the spot, rather than having to fill out the content of the card on another page (think of content types like news, blogs, events.)

The following are the fields that each card contains.

  • Heading
  • Text
  • Image
  • Label (button text)
  • Link (page selector or external field)
  • Template (pick between a list of predefined card templates/styles)

Keep in mind that none of these fields are required and can be left blank / null. For example, a card doesn’t need to contain an image or even a link, it can just be used as a placeholder for text (like the previous example for the bios).

In addition, each card can be styled uniquely by using card templates. Sitefinity allows us at Vanguard to create as many card templates as desired, so for instance, we could do something like the following: (with each example using the same exact card widget / information, but with different templates) 

Card Heading - Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Learn More
Card Heading - Card Simple

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Learn More

Card Heading - Card Hero

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Learn More

In Conclusion...

Cards can be a very useful tool in separating content up and adding prominence to information to generate more traffic. It is very easy to setup and can work well on any page of a website. For more information about cards/bootstrap, please contact your Vanguard Client Service Manager.

Back To Posts

Author:

Matt Chriest

Case Studies

Vanguard conducts thorough preliminary investigative work to ensure your website is built to cater specifically to your target audience and meet your organization’s goals. Check out some of the case studies on some of our most recent client success stories.  

Follow Us On Social Media Twitter Facebook YouTube LinkedIn

What Can Vanguard Do For You?

As your organization grows and evolves, your website should as well. Whether you are looking to generate more traffic, implement custom functionality, mobile compatibility, integrate your systems, or give your site a complete redesign, Vanguard Technology is your go-to web partner. Reach out to us with your current concerns with your website, and our experts will happily provide a solution.