Build Flexible Custom Cards in Rise with Mighty Studio

Rise gives you a few ways to make a card layout, but the moment you need tighter brand control—image placement, border styles, padding, rounded corners—you start running into walls. Mighty Studio’s Custom Card template gives you a more flexible card block without asking you to wrangle CSS snippets for every layout decision.

Studio Spotlight: Custom Card

Here’s how to build and tune a Custom Card in Rise, using the same controls shown in the Studio Spotlight video walkthrough.

Why use a Custom Card instead of native Rise card workarounds?#

If you’ve built “cards” in Rise before, you’ve probably used one of these approaches:

• A block with an image above text
• A Process block to stack image and text
• A Note block when you need an icon or image on the left
• A background color workaround to make the block feel like a card
• A custom CSS snippet to get the styling Rise doesn’t expose

Those work in the right situations. But they also come with tradeoffs.

In native Rise, you can’t reliably adjust internal padding across those card-like blocks. Borders are limited. Corner radius is only available in certain places. Image sizing often has to be handled outside Rise in a design tool if you don’t want the image to fill the available space.

The Custom Card template is built for the moments when you want text and an optional image on a styled card background, with controls for fill, gradients, transparency, borders, corners, shadows, padding, and block width.

1. Add the Custom Card template from the Discover library#

Start in your Rise course with Mighty enabled.

1. Open the Rise lesson where you want the card to appear.
2. Add a new block.
3. Open Mighty Studio and go to Discover.
4. Insert the Custom Card template.
5. Choose a preset if you want a starting point. In the video, one example is a Four Levels of Evaluation card set.

Once inserted, you’ll work in the edit panel for that Studio block. The Custom Card edit model puts the content and image controls near the top, which is helpful when you’re still drafting and stakeholders are still changing words.

2. Edit the card text#

In the Custom Card edit panel, start with the content fields.

1. Select the card text you want to update.
2. Use the rich text controls to format it as needed.
3. Update headings, body copy, or labels directly in the panel.

The important bit: you can keep editing text in the same practical way you’d expect while building a Rise lesson. You’re not locked into a static graphic just because you wanted a more polished card.

3. Add an image only when the card needs one#

The image field is optional.

If you haven’t uploaded an image, the extra image controls stay out of your way. That keeps the edit panel cleaner when you’re building text-only cards, like a key takeaway or callout.

To add an image:

1. Open the Image field in the Custom Card editor.
2. Upload or select your image.
3. Add alt text if the image conveys meaning.
4. If the image is decorative, turn on the Decorative image option.

When Decorative image is enabled, the alt text field is removed because it’s no longer relevant for that image.

Accessibility note

Use Decorative image only when the image does not add information the learner needs. If the image explains, labels, compares, or reinforces content in a meaningful way, write useful alt text instead.

4. Choose where the image sits relative to the text#

This is one of the places the Custom Card template immediately feels different from typical Rise card workarounds.

In the image controls, use the Position field to place the image:

1. Left of the text
2. Right of the text
3. Top above the text
4. Bottom below the text

That gives you a lot more freedom than having to pick a completely different Rise block just because the image needs to move.

For example:

• Put an icon on the left for a compact checklist-style card.
• Put a product image above the text for a more visual card.
• Put an image on the right when you want the text to lead and the visual to support.

5. Set the image width, alignment, and spacing#

After positioning the image, tune how much space it takes up.

1. Find the image Width control.
2. Set the image width as a percentage of the card.
3. Use a smaller value like 20% for an icon-style image.
4. Use a larger value when the image should dominate the card.
5. Set it to 100% if you want the image to span the full card width.

A quick note: When the image width is set to 100%, the alignment control disappears. Left, center, and right alignment don’t mean much when the image already fills the whole card.

When the image is under 100%, you can align it left, center, or right. Then adjust the spacing between the image and the text. You can keep them tight, or add more breathing room if the layout feels crowded.

6. Pick a solid fill or build a gradient background#

Next, open the Fill controls.

You can choose a simple solid background color, or use a gradient fill. The gradient options match the gradient controls Mighty uses for content block backgrounds in Rise:

• Linear 180°, running top to bottom
• Linear 90°, running left to right
• Radial, starting from the center and moving outward

From there, adjust:

• The gradient colors
• The gradient Size
• The Blend amount

For a sharper two-tone effect, set the Blend amount to 0. That creates a crisp division between the two colors.

If you want a softer fade, increase the Blend amount. At 100%, the two colors split roughly 50/50 with a smooth transition between them.

Use Size to change where the gradient begins and how far one color extends before the transition. In practice, this is how you fine-tune the balance when a color is taking over too much—or not enough—of the card.

7. Use transparency carefully over lesson backgrounds#

The Custom Card fill controls also include transparency.

This is especially useful when your Rise lesson already has a gradient or image background and you want the card to feel integrated instead of pasted on top.

In the video, one card uses a white fill with transparency set to 30, creating a light overlay effect over a gradient background. Another card sits over a photo background with a teal fill and transparency set to 75% so the image can show through while the text remains readable.

That second example is the important caution: transparency can make a card look great, but it can also destroy text contrast quickly.

If you lower transparency too far over a detailed photo, the learner may have to fight the background to read the content. Keep checking legibility as you adjust.

8. Add borders: solid, dashed, or dotted#

Open the Border controls to style the edge of your card.

You can adjust the familiar basics:

• Border Width
• Border Color

The Custom Card template also adds border Style options:

• Solid
• Dashed
• Dotted

A solid border gives you the clean, standard card treatment. Dashed borders can create a coupon or placeholder feel. Dotted borders can be pushed further for more playful effects.

The video shows a neat “stamp” effect using the dotted border. Here’s how it’s created:

1. Set the border style to Dotted.
2. Increase the border width to around 10 so the dots become oversized.
3. Change the border color to match the Rise lesson background.
4. Adjust the fill so it extends appropriately around the border.
5. Set the border position to the center of the border.

The result is a scalloped, stamp-like card edge—a small detail that would be awkward to create with native Rise blocks alone.

9. Adjust corner radius, shadow, and padding#

Finally, open Shape and shadow.

Here you can adjust the card’s corner radius up to 60. Smaller values give you a subtle rounded rectangle. Larger values can create a much softer, pill-like card—and when combined with a thick dotted border, it can create some surprisingly interesting shapes.

For shadow, choose from the available drop shadow sizes:

• Small
• Medium
• Large

Use shadows with restraint, especially if you’re also using a busy border or transparent fill. A large shadow can look polished on a simple card, but it may compete with decorative border effects.

Then set the card padding.

The Custom Card template lets you adjust:

• Top and bottom padding, up to 80
• Left and right padding, up to 80

This is one of the most practical controls in the whole template. Native Rise card-like layouts don’t always give you the interior spacing you need. Here, you can give your text and image a generous cushion, or tighten things up for a compact card set.

10. Set the block width in the lesson#

One last layout control: you can change the content width for the Studio block after you add it.

In the examples, the same Custom Card designs are shown at different block widths, including very large, large, medium, and small. That means you can mix and match the card design itself with the width that best fits the lesson section.

Use wider cards for feature callouts, summaries, or visual explanations. Use narrower widths when you want the card to feel more like a focused aside.

A simple card recipe to try#

If you want a quick starting point, try this combination in your next Rise lesson:

1. Add a Custom Card from Mighty Studio.
2. Add a short heading and 2–3 lines of body text.
3. Upload an icon or simple image.
4. Set image Position to Left.
5. Set image Width to 20%.
6. Add comfortable spacing between the image and text.
7. Use a solid fill or a subtle gradient.
8. Add a Solid border with a modest width.
9. Set a medium corner radius.
10. Increase left and right padding so the card has breathing room.

That gives you a clean, branded card without building a graphic outside Rise or reaching for a CSS snippet.

The takeaway#

Use native Rise blocks when they get you there quickly, but reach for the Custom Card template when the card itself needs design control—image placement, gradients, borders, transparency, padding, and width all in one editable block.