Cards
Cards are sections of information that are useful to users when navigating the site. These sections can be large or small, and have many options available.
Card Options:
- Plain Card
- Card with Title
- Card with Footer
- Card with Image
Each of these options can be combined with each other, meaning you can have a card with a title and a header image, or a card with a header image and a footer, or a card with all of the above. Cards are used to draw attention to the most important information on a page that isn’t an alert or a message. Cards are generally used for static information or articles and categories of information.
Cards automatically expand to the entire width of the container they exist in. This means if you don’t place the card in a specific container or row, it will automatically expand to the full width of the main container like this text does. To limit the size of the cards, use the “Row” component, and specify the column width in the right-hand menu containing the block settings.
Content within the card is rich text, meaning it can be bold, italics, underlined, hyperlinked, and more. Anything you can do to regular text can be done to the text of the card body (called card-content in the editor). The card heading is limited in size to Heading 4 (H4).
Card images automatically resize based on the size of the card it is linked to, but it is best practice to use images on cards that are relatively similar in size. If you use an image with a resolution of 300×500 pixels, you should try to use similarly sized images on other cards in the same page to maintain aspect ratios, resolutions, and quality.
The cards below showcase some of the options available.
Demo Card
This is some content that is editable.
Card 2
This is some content that is editable.
Card 3
This is some content that is editable.
My First Card
Some Bold card content!
My First Card
Some Bold card content!
Card 1
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
Card 1
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
Card 1
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
Card 1
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
Card 2
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
Card 3
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
Card 4
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
Alerts
There are two main types of alerts available for use: Full Color and Accent alerts. Functionally, both behave the same way: notifying users of the most-important information on a page. This could be a warning, a notice that a form is closing, an info-box alerting users to an important change, and more. The only difference is that full color alerts are dismissible.
If alerts are used, they should always be placed at the top of the content they are referring to. For instance, if the alert is for an entire page (say, a form is being closed) then the alert should be at the very top of the page content. If the alert is for a section of information that is being updated, the alert should be at the top of that section, so as to not confuse users of other page content that is not related to the alert.
Here are some alert examples:
Accent Alerts:
Default Alert
This is the default alert. The default color is the “info” color. The default format is the “accent alert”.
Primary Alert
The colors of an alert can be changed in the block inspector settings panel on the right.
Secondary Alert
The colors of an alert can be changed in the block inspector settings panel on the right.
Success Alert
The colors of an alert can be changed in the block inspector settings panel on the right.
Warning Alert
The colors of an alert can be changed in the block inspector settings panel on the right.
Danger Alert
The colors of an alert can be changed in the block inspector settings panel on the right.
Dark Alert
The colors of an alert can be changed in the block inspector settings panel on the right.
Full Color Alerts:
Full Color Alert
The full color alert default color is the same as the default accent color, the style is “info”.
Primary Full Color Alert
The colors of an alert can be changed in the block inspector settings panel on the right.
Secondary Full Color Alert
The colors of an alert can be changed in the block inspector settings panel on the right.
Success Full Color Alert
The colors of an alert can be changed in the block inspector settings panel on the right.
Warning Full Color Alert
The colors of an alert can be changed in the block inspector settings panel on the right.
Danger Full Color Alert
The colors of an alert can be changed in the block inspector settings panel on the right.
Dark Full Color Alert
The colors of an alert can be changed in the block inspector settings panel on the right.
Content Group
In Bootstrap, the Content Group is called “Media Object”, but in WordPress, the Media Group and Media Object names are already taken by default system blocks. The content group block is a simple way to organize content in a structured, repeating pattern. Content Groups have three main elements:
- Content Image (optional)
- Title (required)
- Body (required)
The content image is used as a sort system, and can be an icon, a small image, or other visual indicator. The content image MUST be square, and it is recommended to be between 50x50px or 100x100px.
Examples:
Resources for Parents and Families
Lorem Ipsum Text. Bla bla bla.
- Item 1
- item 2
- item 3
Be the change you wish to see in the world.
Ghandi
Example Content Group with Image and Inner Blocks
Some rich text content to give your group more information, with bold, italics, and underline.
A badge!Example Content Group with Image
Some rich text content to give your group more information, with bold, italics, and underline.
Example Content Group without Image
Some rich text content to give your group more information, with bold, italics, and underline.
Examples as Groups:
Content Group Item 1
Content groups are particularly useful for organizing related information and giving additional context.
A badge!Content Group Item 2
The COVID-19 webpage uses this format to group related and useful resources and links into a single area with a text description and language tag.
English SpanishContent Group Item 3
You can still add rich-text content to the blocks when they are grouped like this. Rich text is any kind of formatting on text like bold, underline, italics, links, and more.
EnglishCollapse
Bootstrap provides out-of-the-box support for collapsable elements that can show or hide content on clicks or user interactions. The theme integrated collapse has restricted some of the features, but it is still a useful content block to have. Collapse cards have to be created individually, there is not currently the ability to create collapsable groups.
Examples:
Health and Safety Resources
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat erat laoreet diam tincidunt, eu suscipit enim facilisis. Nullam ac dolor enim. Aliquam et lobortis ligula, vel tincidunt arcu. Ut tristique, nibh quis pulvinar pretium, nulla est rhoncus augue, quis cursus eros massa vel nisl. Sed lobortis pellentesque felis eu varius. Integer pellentesque nibh at imperdiet finibus. Nullam quis tellus nec felis lacinia fringilla id at massa.
Content Group Item 1
Content groups are particularly useful for organizing related information and giving additional context.
A badge!Content Group Item 1
Content groups are particularly useful for organizing related information and giving additional context.
A badge!Content Group Item 1
Content groups are particularly useful for organizing related information and giving additional context.
A badge!Content Group Item 1
Content groups are particularly useful for organizing related information and giving additional context.
A badge!Content Group Item 1
Content groups are particularly useful for organizing related information and giving additional context.
A badge!Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat erat laoreet diam tincidunt, eu suscipit enim facilisis. Nullam ac dolor enim. Aliquam et lobortis ligula, vel tincidunt arcu. Ut tristique, nibh quis pulvinar pretium, nulla est rhoncus augue, quis cursus eros massa vel nisl. Sed lobortis pellentesque felis eu varius. Integer pellentesque nibh at imperdiet finibus. Nullam quis tellus nec felis lacinia fringilla id at massa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat erat laoreet diam tincidunt, eu suscipit enim facilisis. Nullam ac dolor enim. Aliquam et lobortis ligula, vel tincidunt arcu. Ut tristique, nibh quis pulvinar pretium, nulla est rhoncus augue, quis cursus eros massa vel nisl. Sed lobortis pellentesque felis eu varius. Integer pellentesque nibh at imperdiet finibus. Nullam quis tellus nec felis lacinia fringilla id at massa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat erat laoreet diam tincidunt, eu suscipit enim facilisis. Nullam ac dolor enim. Aliquam et lobortis ligula, vel tincidunt arcu. Ut tristique, nibh quis pulvinar pretium, nulla est rhoncus augue, quis cursus eros massa vel nisl. Sed lobortis pellentesque felis eu varius. Integer pellentesque nibh at imperdiet finibus. Nullam quis tellus nec felis lacinia fringilla id at massa.
Collapse content can contain other block elements. Just select the block within the collapse content using the plus button.
This is an alert!
With some additional message.
Content Group within Simple Collapse
Some more information available here within the collapse.
This is a tag within a content-group within a collapse!Jumbotron
The Jumbotron is a useful UI element to draw attention to a large area. It consists of a large background image, and heading and subheading text. Jumbotrons should be used towards the top of the page or as a break between pieces of content. The headings at the top of the pages in this theme and on these templates are built using the Jumbotron element.
Examples:
Parents and
Families
Resources
Early Childhood Professionals
Resources
Default Jumbotron
With Light Grey Text and Background
Primary Jumbotron
With Primary Background and Light Text
Secondary Jumbotron
With Secondary Background and Light Text
Light Jumbotron
With Grey Background and Primary Text
Color-Block Links
The color-block links are a fairly restrictive style of blocks. The colors are not orderable, the font, text style, and color are not editable. Only the link title and the link attribute (the URL), and the icons are editable. This is a great block to show the child-pages of a category. For instance, if you have a page of “Cars”, the color-block links on that page can be the models of car like “Ford”, “Nissan”, and “Toyota”.
Note: The block requires four links. If you don’t fill out all links, the block will still show up, but it won’t work properly.
Examples: