Card Blocks
Card (Traditional)
This block can be a bit deceiving the options can make it look quite a bit different. This has four sections for content and settings. (Introduction, Add/Edit Cards, Configuration and column structure). There are three different examples of how this block may be used.
Introduction
The standard intro section with Title, subtitle, content and alignment for the titles. These are optional.
Add/Edit Cards
This section has a sub block in it, called card. You may have choose to have any number of cards within this block.
- Populate from post
allows the content to be used from a manually selected post/blog
- Title
- Microtitle
sometimes its better to use this if you are using the overlay option on this block so more text fits on the image
- Subtitle
- Content
It’s possible to include some formatting here, but would encourage keeping it to bold and Italic only. There isn’t much space here and other formatting will not render well
- Link
Will be rendered as a pre-determined style
Configuration
- Block Wrapper classes
used by marketing to apply custom CSS styles if needed. Used sparingly.
- Anchor ID
You may assign this block a name, it will allow you to link to this block on the page with an anchor tag. (engineering.wisc.edu/pagename#AnchorID) If you use this please use a name that will be unique like cbe-news, also it is case sensitive and should not use spaces.
- Card Image Ratio
changes the ratio of the image, most images we shoot for 16×9 it’s likely the size to use.
- Stretch link
When this is checked the entire card is clickable, if it is not just the button is.
- Image Overlay
When checked it will only show the image, and put the text on top of the image. If you are using large titles, and copy this should not be used.
- Enable card Shadow
Turns on a slight shadow for the cards
- Background Image
It’s possible to have a background image for this entire block, however when selected it assumes the image will be dark and all text will be switched to white. Use with caution, white text over an image that isn’t dark enough will cause accessibility issues
Introduction: Section title here
Introduction: Section Subtitle
This paragraph is part of the introduction section it will show up on the top right side of the block. You’ll also notice in the configuration section if introduction the Title Heading alignment, that setting determines how the title and subtitle are going align up to this text. (Start | Center | End). I could say that’s left, center or right. In many cases this text isn’t going to be long enough for you to notice much of a difference. This currently is set to end/right. You also may add link below this paragraph of copy
MicroTitle is here
Title
Subtitle
Please notice if one of these is much longer than the others they all stretch to be the same height. So it is in the best interests to keep the amount of text in each of these cards about the same length.
Title Only
You are not required to have a link on these. But if you do they will all show in the same style.
Title
Technically nothing is required for these however consistency across them is highly recommended. A set like this is not recommended, but does shows much of the flexibility with the styling of this block.
Introduction: Section title here
Introduction: Section Subtitle
This one is has the configuration Image overlay turned on. Please notice the Fields for each card go over the image which means there should only be titles uses for these otherwise the text will get cut off. It’s only allowed to be within the image itself. If you have many columns the images will be smaller and even long titles will get cut off. Use this with caution
content content content content content content content content content content
Introduction: Section title
In this section we’re the configuration to make it set up as having 5 columns.
Card Horizontal
This block is built to highlight either an image or youTube video next to some text. It is very similar to Featured News, or Featured post.
Introduction
The standard intro section with Title, subtitle, content and alignment for the titles. These are optional.
Add/Edit Cards
You may have one card for this block. Please note there is a configuration section for the Card itself, and a configuration section for the entire block.
Image / YouTube ID / Featured post
The first three options you may only choose one of them. It is best to know which you plan on using before creating this card. If you want to change between them it will be best to start with a new Card Horizontal block.
- Image
Choose an image from the image library. (16×9 is recommended)
- YouTubeID
you need to use the ID of the youTube video here not the whole URL. https://youtu.be/QcPivi–MmI another example, https://www.youtube.com/watch?v=r_ekD9VO2aM
- Featured Post
This allows you to choose a post/blog item, or a news item. It will fill in the image with the featured image from the post or news item. Please note it will use the title from the post and it can not be overwritten. Also the text from the post does not fill in from the article, you will need to add your own teaser copy.
- Title
Please note if you choose post, or news the title will come from that and this field is note used.
- Subtitle
Shows up below the title (Optional)
- Micro title
Shows up above the title (Optional)
- Content
If it has a long title you may want to keep this shorter. (Optional)
- Links
You may add links, the recommendation is to use no more than 2, with the first one styled as a button, and the second as a link.
- Configuration – for card
- Image Width
Allows to set the width of the image, 50% or 66% of the page
- Image alignment
Choose if the image portion is on the left or right. This is a good way to add some variety if there are several of these blocks on the page.
Configuration – for full block
- Background
Please use the background when it’s needed to break up the design on the page.
Note: if you set a background and it does not fill the whole width of the page you need to set the block to full width.
- Block Wrapper
used by marketing to apply custom CSS styles if needed. Used sparingly.
- Anchor ID
You may assign this block a name, it will allow you to link to this block on the page with an anchor tag. (engineering.wisc.edu/pagename#AnchorID) If you use this please use a name that will be unique like cbe-news, also it is case sensitive and should not use spaces.
- Stretch link
This will make the entire card clickable with the link. Meaning you can click anywhere on the block.
Note: if you have this checked having two links will not work.
micro title – this is using Featured Post 33/66
Block, Eliceiri elected AIMBE fellows
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam interdum feugiat fermentum. Vestibulum non lobortis velit. In hac habitasse platea dictumst. Ut dui mauris, pellentesque eget tempor vitae, facilisis eget turpis. Quisque sed lectus sollicitudin, rutrum felis at, scelerisque erat.
Manual card post that’s 33/66
afaf adsf adfs adsf asdf adfs adsf adsf asdf afs adfs adfs adfs
Micro title – This is using a youTube ID
Youtube Title
subtitle
With this post the image is set to 66% on on the right and the whole block has a background. These configuration differences add some visual differences on the page.
Introduction: Section title title
Subtitle for this intro section
It’s possible to have this section have content, however because you only can have one card within each block it’s less likely you’ll be including something is the whole introduction part of this block.
Micro title – This is using an image
Card Title section is in this part
This example is using a stretch link so all the text and the image clickable to the link that is manually added in. Note: only can use one link.
CTA Grid with Card
This block is set as a two column setup with links on the left side, and a card on the right.
Add/Edit CTA’s
- Title
A title for the list of links. It is not required but does offer context to the links. An example where you may not use a title is if the links are all closely related to the content of the card.
- CTA
These are the links. You may add just links, or have context with each of the links. Either approach is fine, however it’s encouraged if you’re adding descriptions to do it for all of the links.
- Column Structure – Links
This is the structure of the links, may choose to have two columns for the links if you want to try to fit more links in the area, however if you have long descriptions it will get quite text heavy.
Column Structure – Links
This is the structure of the links, may choose to have two columns for the links if you want to try to fit more links in the area, however if you have long descriptions it will get quite text heavy.
Card
- Title
Please note if you choose post, or news the title will come from that and this field is note used.
- Subtitle
Shows up below the title (Optional)
- Micro title
Shows up above the title (Optional)
- Content
If it has a long title you may want to keep this shorter. (Optional)
- Links
You may add links, the recommendation is to use no more than 2, with the first one styled as a button, and the second as a link.
Configuration
- Card Image Ratio
Changes the ratio of the image.
- Block Wrapper
used by marketing to apply custom CSS styles if needed. Used sparingly.
- Anchor ID
You may assign this block a name, it will allow you to link to this block on the page with an anchor tag. (engineering.wisc.edu/pagename#AnchorID) If you use this please use a name that will be unique like cbe-news, also it is case sensitive and should not use spaces.
Your classes are only the beginning of your experience as a Badger Engineer
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Micro Title
Card title area here
Subtitle
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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
Micro Title
This card is using a 1×1 image
Subtitle
Because this card is using the 1×1 image it is a lot taller
Seeking candidates for a tenure-track position in the broadly defined discipline of applied electromagnetics. The department is especially interested in accomplished candidates with experimental expertise in areas such as antennas and radio-frequency/microwave/millimeter-wave/sub-millimeter-wave circuits and systems. (Application deadline is November 15)
The University of Wisconsin-Madison seeks to hire a faculty member with research and teaching interests in Artificial Intelligence (AI) and Medical Imaging. This position in Electrical and Computer Engineering is part of a campus-wide cluster initiative to expand and broaden interdisciplinary expertise in AI in Precision Medical Imaging and Diagnostics. (Application deadline is December 12)
Topics of interest include, but are not limited to, methods to improve grid resilience, data-driven approaches to power system monitoring, control and optimization, and emerging grid solutions such as energy storage systems and grid-edge devices to promote renewable energy integration. (Application deadline is December 19)
seeking candidates for a tenure-track position in the broadly defined discipline of applied electromagnetics. The department is especially interested in accomplished candidates with experimental expertise in areas such as antennas and radio-frequency/microwave/millimeter-wave/sub-millimeter-wave circuits and systems. (Application deadline is December 19)
The University of Wisconsin-Madison seeks to hire a faculty member with research and teaching interests in Artificial Intelligence (AI) and Medical Imaging. This position in Electrical and Computer Engineering is part of a campus-wide cluster initiative to expand and broaden interdisciplinary expertise in AI in Precision Medical Imaging and Diagnostics. (Application deadline is December 19)
Topics of interest include, but are not limited to, methods to improve grid resilience, data-driven approaches to power system monitoring, control and optimization, and emerging grid solutions such as energy storage systems and grid-edge devices to promote renewable energy integration. (Application deadline is December 19)