BC Information Cards
This block can be used in multiple ways. But the basics is that you can display blocks of information on page.
Use this block if you have information that you want to display in a card style.
- Custom ID
- Custom Class
- Background Video
- Background Image
- Background Overlay
- Section Title
- Section Sub Title
- Section Description
- Card Column Classes + Custom Classes
- Card Background Image
- Card background Overlay
- Card Icon or Card Image
- Card Title + Card Sub Title
- Card Button
- Card Link Wrap
- Card Animation
- Card Content
- Shortcodes
* One thing to note: If you turn the animation on the card, and you have the overlay turned on. The overlay will show on hover and animate with the card.
- Card wrap link will only be included on newer BC launched sites
- When “Wrap Card in Link?” is enabled the hover state of the button will no longer work due to z-index issue.
PHP
/bc/wp-content/themes/bc3/default-blocks/bc-block-info-cards.php
SCSS
/bc/wp-content/themes/bc3/default-blocks/bc-block-info-cards.php
Overrides
Create a new SCSS file for individual blocks that need independent styling
Example file path/name: /bc/wp-content/themes/bc3/components/bc-block-info-cards__treatments.scss
Information Cards Variations
Cards with overlay
I am the sub title
Info cards with background and overlay
First Card
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel erat pretium, dignissim libero sit amet, fringilla metus.
Second Card
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel erat pretium, dignissim libero sit amet, fringilla metus.
Third Card
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel erat pretium, dignissim libero sit amet, fringilla metus.s
Cards with no container
First Card
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel erat pretium, dignissim libero sit amet, fringilla metus.
Second Card
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel erat pretium, dignissim libero sit amet, fringilla metus.
Third Card
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel erat pretium, dignissim libero sit amet, fringilla metus.s
Cards with section backgrond
And overylay
Also, I don’t have a container
First Card
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel erat pretium, dignissim libero sit amet, fringilla metus.
Second Card
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel erat pretium, dignissim libero sit amet, fringilla metus.
Third Card
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel erat pretium, dignissim libero sit amet, fringilla metus.s
Cards with icons
Info cards with background, overlay, icon image upload, and font awesome icon
Card with image upload
Card Sub title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel erat pretium, dignissim libero sit amet, fringilla metus.
Card with font awesome
Card Sub title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel erat pretium, dignissim libero sit amet, fringilla metus.
Uploaded image and icon
Card Sub title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel erat pretium, dignissim libero sit amet, fringilla metus.s
Cards with animation
Info cards with animation
Card with image upload
Card Sub title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel erat pretium, dignissim libero sit amet, fringilla metus.
Card with font awesome
Card Sub title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel erat pretium, dignissim libero sit amet, fringilla metus.
Uploaded image and icon
Card Sub title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel erat pretium, dignissim libero sit amet, fringilla metus.s
Cards with buttons
Info cards with animation
Card with button
And animation
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel erat pretium, dignissim libero sit amet, fringilla metus.